WordPressのカスタムメニュー【1】有効化と表示方法

カスタムメニュー
WordPressカテゴリー
Pocket

WordPressのカスタムメニュー機能をつかえば、ナビゲーションメニューの表示内容を管理画面で簡単に編集できるようになります。
この便利なカスタムメニューの活用方法をご紹介します。

準備その1:カスタムメニューの有効化

まずは使いたいテーマでカスタムメニューが使えるようにします。
テーマのfunctions.phpに次の関数が記述がされているか確認します。

register_nav_menu();

または

register_nav_menus();

関数の違いは、カスタムメニューを1つだけ設置するか(上)、複数設置できるようにするか(下)の違いです。

もしどちらもなければfunctions.phpの最後に新たに記述して更新します。
柔軟に対応できるので複数設置できるregister_nav_menus();を利用します。

register_nav_menus( array(
 'primary' => 'メニュー',
 ) );

‘primary’‘メニュー’は任意の文言に変更できますので、管理しやすい文言にしましょう。
‘primary’は、カスタムメニューを表示したい場所を指定し、’メニュー’は管理画面上の表示に使用されます。

これで管理画面>外観の中にメニューの項目が表示され、カスタムメニューの管理が行えるようになります。

準備その2:カスタムメニューの表示

続いてカスタムメニューを表示するための関数はこちらです。

wp_nav_menu();

これをテンプレートphpの表示したい場所に記述します。

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

これで、primary に設定したカスタムメニューが表示されるようになります。

複数のカスタムメニューを設定する

準備その1,2の手順を繰り返すことで、ヘッダーやフッターにもカスタムメニューを追加することができます。

function.phpには次のように設置したい数のメニューを記述します。

register_nav_menus( array(
 'primary' => 'グローバルメニュー',
 'header' => 'ヘッダーメニュー',
 'footer' => 'フッターメニュー'
 ) );

そして表示したい場所のテンプレートphpには下記のような感じで wp_nav_menu() を設定して記述していきましょう。

例:グローバルメニューを表示

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

例:ヘッダーメニューを表示

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

例:フッターメニューを表示

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

といった感じです。