WordPressでカスタムメニューを設置する方法

2017.12.13 WordPress
WordPressでカスタムメニューを設置する方法

ほぼ自分用のメモですが、WordPressでカスタムメニューを使う方法。

流れとしては、テーマのfunctions.phpにてカスタムメニューを有効化→テーマの任意の位置にカスタムメニューを表示するためのソースを表示という感じです。

functions.phpでカスタムメニューを有効化

まず、テーマにあるfunctions.phpにてカスタムメニューを有効化します。

/* カスタムメニュー
---------------------------------------------------------- */
register_nav_menus(array(
'global'    => 'グローバルナビゲーション',
'category'  => 'カテゴリーリスト',
'footer'    => 'フッターナビゲーション',
));

このソースでは、以下の3つのメニューを使えるようにしています。

  1. グローバルナビゲーション
  2. カテゴリーリスト
  3. フッターナビゲーション

もっと増やしたい場合には、以下のような要領で追加していけば大丈夫です。

'global'    => 'グローバルナビゲーション',
'category'  => 'カテゴリーリスト',
'footer'    => 'フッターナビゲーション',
'menu_01'   => 'メニュー01',
'menu_02'   => 'メニュー02',
'menu_03'   => 'メニュー03',
'menu_04'   => 'メニュー04',
.
.
.

メニューを表示したい箇所にwp_nav_menuでメニューを表示

メニューを表示するには、テンプレートタグwp_nav_menuを使用します。

テーマ内のカスタムメニューを表示したい箇所に、下記のような感じで記述します。

<div id="global_nav">
<?php wp_nav_menu( array(
'theme_location' => 'global', 
'container'      => false
)); ?>
</div>

詳細な設定方法は参考ページで確認して頂ければと思います。ここでは、よく使いそうな設定だけ簡単に紹介します。

<div id="global_nav">
<?php wp_nav_menu( array(
'menu_class'      => 'menu', //メニューのul要素に付加されるクラス名
'menu_id'         => '{メニューのスラッグ}-{連番}', //メニューのul要素に付加されるID名
'container'       => 'div', //メニューのul要素を囲む要素。divかnav。なしの場合はfalse。
'container_class' => 'menu-{メニューのスラッグ}-container', //メニューのul要素を囲む要素に付加するクラス名
'container_id'    => '', //メニューのul要素を囲む要素に付加するID名
'before'          => '', //リンクテキストの前に挿入するテキスト(aタグ外)
'after'           => '', //リンクテキストの後に挿入するテキスト(aタグ外)
'link_before'     => '', //リンク内のテキストの先頭に挿入するテキスト(aタグ内)
'link_after'      => '', //リンク内のテキストの最後に挿入するテキスト(aタグ内)
'depth'           => 0, //表示するメニュー項目の階層数。0ですべて表示、1で親メニューのみ。
'theme_location'  => '', //register_nav_menuで登録したメニューのうち、どれを表示するか
)); ?>
</div>

参考ページ:テンプレートタグ/wp nav menu

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら