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

WordPressでカスタムメニューを使う方法。

流れとしては、

1. テーマのfunctions.phpにてカスタムメニューを有効化
2. テーマの任意の位置にカスタムメニューを表示するためのソースを追記

という感じです。

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

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

functions.php

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

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

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

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

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

wp_nav_menuでメニューを表示

メニューを表示するには、テンプレートタグwp_nav_menuを使用します。
テーマ内のカスタムメニューを表示したい箇所に、下記のような感じで記述します。

PHP

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

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

PHP

<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>

WordPressに「この記事が気に入ったらいいね！しよう」...

WordPressにページ送り(前後の記事へのリンク)を設置...