
スマホ開閉メニューの上部に画像を入れてみたい・・・
WordPressテーマ「Arkhe(アルケー)」は、シンプルで使いやすく、カスタマイズ性にも優れています。今回は、スマホ用ドロワーメニューの上部に画像(例:ロゴ)を挿入する方法をご紹介します。
「メニューを開いたときに、ロゴや画像を表示させたい」という方にぴったりのカスタマイズです。
初心者でも簡単に実装できるよう、コピペで使えるPHPコード付きで解説します。
目次
【Arkhe(アルケー)】フックを活用
以下のコードを、子テーマのfunctions.phpファイルに追加します。
add_action( 'arkhe_start_drawer_body', 'my_add_drawer_image' );
function my_add_drawer_image() {
?>
<div class="drawer-img-wrap">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="https:〇〇〇" alt="ホームへ戻る">
</a>
</div>
<?php
}
必要に応じて以下のCSSコードを追記してください。
.drawer-img-wrap {
text-align: center;
padding: 20px 0;
}
.drawer-img-wrap img {
width: 150px;
height: auto;
}
まとめ
Arkheテーマでスマホメニューをもっと魅力的にしたい方は、今回のカスタマイズがおすすめです。
画像を挿入することで、ブランド感がアップし、ユーザーにも親切な設計になります。
簡単なPHPコードで実装できるので、ぜひ試してみてください!
コメント