【Luxeritasカスタマイズ】スマホでミドルメニューを表示する方法
あか子です。
当ブログで使っているWordPressテーマは「Luxeritas」です。
シンプルでキレイにまとまっていて、とても気に入っているのですが、1つだけ気になることがありました。
それはスマホで見たときのメニューが目立たないこと。
そこで、アフィンガーのようなミドルメニューをLuxeritasで表示させるようにカスタマイズしました。（ヘッダー型メニューとでもいうのでしょうか）
完成形はこのようなものです。
Luxeritasのカスタマイズ方法が少なくて苦労したので、どなたかのお役に立てば…と記事にまとめてみました。
変更する箇所は4つあります。
- function.phpでミドルメニュー設定
- カスタマイザー画面でミドルメニュー作成
- header.phpでミドルメニュー表示
- style.cssで見た目調整
順に説明していきますね！
Contents [Show]
1.function.phpでミドルメニュー設定
子テーマ内のfunction.phpの一番下に下記コードを追加して保存します。
register_nav_menus( array('sp_middle_menu' => __( 'Middle Menu', 'luxeritas' ) ) );2.カスタマイザー画面でミドルメニュー作成
function.phpにコードを追加するとカスタマイザーのメニューにミドルメニューが追加されているはずです。
「外観」→「メニュー」のページでミドルメニューに入れる項目を設定します。
3.header.phpでミドルメニュー表示
次に、作成したミドルメニューを実際に表示させるために、header.phpにコードを追加します。
Luxeritasにはadd-header.phpというファイルが予め用意されていて、ヘッダーに追加したいコードを簡単に入れることが出来るようになっています。
でも今回は、元々あるモバイルメニューの下にミドルメニューを表示させるため、子テーマ内にhdeader.phpを作成して、親テーマのheader.phpから一部コピー・追記する作業をします。
まず、親テーマのheader.phpをまるごとコピーして子テーマ内にアップロードします。
「外観」→「テーマの編集」から子テーマのheader.phpを選択します。
中から、
という一行を探してください。
そのすぐ下に以下のコードを追加します。
これで、スマホでミドルメニューが表示されるようになりました。
4.style.cssで見た目調整
この段階では、まだメニューが縦並びのリストのままですから、見た目を調整していきます。
「外観」→「テーマの編集」から子テーマのstyle.cssを選択します。
以下のコードをコピペで使えますが、色などはお好きなに変更してくださいね！
list-style: none;
overflow: hidden;
}
.sp-middle-menu li {
list-style: none;
width: 49.3%;
text-align: center;
height: 40px;
line-height: 40px;
margin: 1px;
background: #e95098;/* 背景色
float:left;
}
.sp-middle-menu li a {
display:block;
text-decolation: none;
color: #fff;/* テキスト色
}
.sp-middle-menu li a:hover {
text-decolation: none;
background: #e3b3cd;/* メニュー選択時の背景色
color: #fff;
}
完成
何度もエラーになりながら完成したのですが、もしもっと上手な方法があったら教えていただけると助かります。
私のように何時間もカスタマイズに時間をかけずに済むように、どなたかの参考になったら嬉しいです。
