ナビゲーションバーに表示するカスタムメニューを選択できるようにする

　WordPressのテーマの中には、カスタムメニューを複数作っても、ナビゲーションバーに設定するカスタムメニューが選択できなかったりする。

　STINGER3の場合はナビゲーションバーに表示するカスタムメニューを選択できる。

　けど、Principleではナビゲーションバーに表示するカスタムメニューを複数のカスタムメニューから選択できない。

　Principleの場合は、最後に作ったカスタムメニューが自動的にナビゲーションバーに表示される。

　これだとちょっと、都合が悪い。

　今日はナビゲーションバーに表示するカスタムメニューを選択できるようにする方法をご紹介。

カスタムメニューの設定画面を比べてみよう

　STINGER3の場合のカスタムメニューの設定画面はしたの画像のようになっている。

【位置の管理】というタブをクリックすると下の画像のように、複数のカスタムメニューの内どれをナビゲーションバーに表示するかという設定ができる。

　Principleの場合はのカスタムメニューの設定画面は下のようになっている。

【位置の管理】というタブが無く、替わりに以下の表示がある。

　現在お使いのテーマはカスタムメニュー機能に対応していませんが、ウィジェット画面でサイドバーに「カスタムメニュー」を追加できます。

ナビゲーションバーに表示するカスタムメニューを選択できるようにする

functions.phpに以下のコードを挿入する

register_nav_menu('mainmenu', 'メインメニュー');

＊functions.phpをカスタマイズするときは、サーバーのFTPからfunctions.phpを開いて編集すること。

　編集が終わるとカスタムメニューの設定画面が以下のように変わる。

↓

header.phpを編集する

　次にheader.phpを編集する。

テンプレートに以下の記述を追加する。

<nav>
<?php wp_nav_menu( array(
'theme_location'=>'mainmenu',
'container' =>'',
'menu_class' =>'',
'items_wrap' =>'<ul id="main-nav">%3$s</ul>'));
?>
</nav>

＊<nav></nav>の記述がある場合は削除。

スタイルシートを編集する

　最後にスタイルシートに次の記述を書き込んで更新する。

ul#main-nav {
clear: both;
margin: 0;
padding: 0;
height: 35px;
background-color: #6A98CA;
border-radius: 3px;
overflow: hidden;
}
ul#main-nav li {
list-style-type: none;
float: left;
}
ul#main-nav li a {
font-size: 90%;
display: block;
line-height: 35px;
color: #fff;
text-align: center;
margin: 0;
border-right: groove 1px #aaa;
}
ul#main-nav li a:hover {
background-color: #555;
color: #fff;
}