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' )); ?>
といった感じです。