WordPress : 独自のカスタムメニューを追加する方法

WordPressのテーマにはカスタムメニューに対応しているものが多くあります。

ですが、

お気に入りのテーマがカスタムメニューに対応していない時
カスタムメニューを増やしたい時
独自の位置にカスタムメニューを置きたい時
独自のテーマを作る時

このような時はfunctions.phpにカスタムメニューのコードを足して追加する必要があります。その方法を紹介します。

カスタムメニューを追加する

functions.phpへカスタムメニューを準備するコードと、メニューを表示したい箇所へカスタムメニューを表示するためのコードを追加します。

functions.php へ

function menu_setup() {  
  register_nav_menus( array(
    'global' => 'グローバルメニュー',
    'side'   => 'サイドメニュー',
    'footer' => 'フッターメニュー',
  ) );
}
add_action( 'after_setup_theme', 'menu_setup' );

このコードでWordPressのメニュー画面に3つのメニューが追加されます。

表示したいテーマファイル

header.phpやfooter.phpなど、全ページ共通のテーマファイルの表示したい箇所へ以下のコードを加えます。

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

上記のコードで設定したグローバルメニューが表示されます。

最低限表示するには上記のようにメニュー名の指定のみでOKですが、wp_nav_menu()には後述の多くの設定があります。

カスタムメニューの設定

WordPress Codexからの引用ですが、以下の設定ができます。

<?php wp_nav_menu( array(
  'theme_location'  => 'global',
  'menu'            => '',
  'menu_class'      => 'menu',
  'menu_id'         => '',
  'container'       => 'div',
  'container_class' => 'div-class',
  'container_id'    => 'div-id',
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'echo'            => true,
  'depth'           => 0,
  'walker'          => '',
  'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)); ?>

主に出力されるHTMLについての設定です。Codexにも掲載されているため説明は省きますが、実際に試した方が分かりやすいです。

出力HTMLをさらにカスタマイズする方法も紹介していますので、ぜひご参考に！