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

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら