ゆるくはじめるWordPress.

テーマにカスタムメニューを追加する【WordPressテーマ作り STEP7】

custom-menu-top

もしグローバルメニューなどのメニューをサイトに入れたいと思ったら、カスタムメニューが使えるとかなり便利!
カスタムメニュー化しておくと、テンプレートファイルを触らずに管理画面からメニューの内容を変更できるので手間が省けるし、タイプミスでエラーが出るなんて事も防げます。
今回はそんなカスタムメニューの設置方法をまとめました。

カスタムメニュー機能を有効化する

まずカスタムメニューの機能を有効化するためにregister_nav_menus()をfunctions.phpに書き加えます。
その中にロケーション名とその説明を以下のように入れて設定。

functions.php

//カスタムメニュー
register_nav_menus( array(
    'header_menu' => 'ヘッダーに表示させるメニュー'
) );

複数設置することもできます↓

functions.php

//カスタムメニュー
register_nav_menus( array(
    'header_menu' => 'ヘッダーに表示させるメニュー',
    'footer_menu' => 'フッターに表示させるメニュー'
) );

位置やロケーションという呼び方なのでわかりやすくheaderやfooterとしましたが、好きな名前を付けてOK。
これでWordPressのサイドメニューに外観>メニューが追加されます。


メニューを表示させたい場所にテンプレートタグを設置する

テンプレートファイル中のメニューを表示させたい場所に<?php wp_nav_menu(); ?>を設置。

使用例

<?php wp_nav_menu( array(
    'theme_location'=>'header_menu') );
?>

functions.phpで付けたロケーション名を'theme_location'に指定すると設定完了です。
他にも初期値が色々と設定されているので、必要なら自分の好みに設定し直しましょう。
例えば下記のように出力したい場合

HTML

<nav class="global_menu">
  <ul>
    <li><a href="">menu01</a></li>
    <li><a href="">menu02</a></li>
    <li><a href="">menu03</a></li>
    <li><a href="">menu04</a></li>
  </ul>
</nav>

次のように設定します。

テンプレートファイル

<?php wp_nav_menu( array(
    'theme_location' =>'header_menu',
    'container'      =>'nav',
    'container_class'=>'global_menu',
    'items_wrap'     =>'<ul>%3$s</ul>') );
?>

デフォルトだと外側に<div>が付いてくるので、これを<nav>に変更、そこにさらにclassを追加。そして<ul>に付いてくるidやclassを削除する目的で'items_wrap'を再設定しました。

その他のオプションについてはこちらを参考に:テンプレートタグ/wp nav menu – WordPress Codex 日本語版


メニューをつくる

メニューに入れたい項目のカテゴリーやページはあらかじめ作成しておいてください。

custom_menu01

外観>メニューに進み、好きな名前を付けてメニューを新規作成します。


custom_menu02

左のリストからメニューに表示させたい項目を選んで追加。
最後に『テーマの位置』でさっき設置したメニューの場所を選択して『メニューを保存』。これでこのメニューがその場所に表示されるようになります!


さらにカスタマイズしてみる

メニュー項目に個別のクラスを付ける

custom_menu03

画面上部の『表示オプション』を開いて、『CSSクラス』にチェックを入れると、各項目にクラスを付ける事ができるようになります。

custom_menu04

クラス名を書き込んで保存すると出力された<li>タグにクラスが付きます。項目ごとにクラスが設定できるようになるので、これを利用してそれぞれ違ったアイコンを頭に付けてみたり、カスタマイズの幅が広がりましたね。


スポンサーリンク

公開日: