WordPressでテーマにメニューを追加する（カスタムメニュー）

WordPressでテーマにメニューを追加するには、functions.phpと、メニューを挿入したい部分のテンプレートファイル（header.phpやsidebar.phpなど）に書き込む必要があります。

functions.phpに書き込む内容

メニューが複数の場合

if ( ! function_exists( 'menus_1' ) ) : 
 function menus_1() {
     register_nav_menus( [
         'global' => 'グローバルメニュー', 
         'footer_l1' => 'フッターメニュー左1',
         'footer_l2' => 'フッターメニュー左2',
         'footer_l3' => 'フッターメニュー左3',
         'footer_r1' => 'フッターメニュー右1',
         'footer_r2' => 'フッターメニュー右2',
         'footer_r3' => 'フッターメニュー右3',
     ] );
 }
 endif;
add_action( 'after_setup_theme', 'menus_1' ); 

上記の例では、メニューを複数設定しています。

１行目　if ( ! function_exists( 'menus_1' ) ) :

if ( ! function_exists( 'menus_1' ) ) :はmenus_1が設定されているかどうかをチェックしています。

もしmenus_1が存在していれば強制終了（メニューが設定できない）しますので、menus_1の名前を変更しましょう。

3行目　WordPress関数　register_nav_menus

3行目のregister_nav_menusはWordPressの関数で、管理画面＞外観＞メニューでメニューを設定できるようにします。

4行目　'global' => 'グローバルメニュー',

4行目のglobalはメニュー定義名（正確には識別子）

グローバルメニューはダッシュボードでメニューを識別するのに使用します。

最終行　アクションフックの設定

最終行のadd_action( 'after_setup_theme', 'menus_1' );で実行するタイミングを設定します。

「menus_1をテーマがロードされたときに実行」という指示をしています。

上記の例で設定すると管理画面に次のように表示されます

メニューが１つで良い場合は次のように設定することもできます

if ( ! function_exists( 'menus_1' ) ) : 
 function menus_1() {
     register_nav_menu( 'global' , 'グローバルメニュー' ); 
 }
 endif;
add_action( 'after_setup_theme', 'menus_1' ); 

複数の場合は、register_nav_menus

1つで良い場合は、register_nav_menu を使います。

末尾にsが付いているかどうかで、使い方が変わりますので注意しましょう。

もし、将来メニューを増やすことを考えているのなら、register_nav_menusで１つだけというのも可能なのでregister_nav_menusを使った方が良いと思います。

テンプレートファイル（header.phpやsidebar.phpなど）に書き込む内容

メニューを表示させたい位置に該当するテンプレートファイルに下記を書き込みます。

グローバルメニューならheader.php、サイドバーならsidebar.php、フッターならfooter.phpになると思いますが、テーマによって異なります。

exp.php（下側）が実際に挿入した例で、default.php（上側）が初期設定です。

使い方は、WordPress Codex https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu　をご覧になるとわかりますが、ポイントは

theme_locationにregister_nav_menusで設定した値を入れる

最低限、設定すべきなのが、theme_locationにregister_nav_menusで設定したメニュー定義名（正確には識別子）を入れます。

最小限の設定

wp_nav_menu( [
 'theme_location' => 'global',
] ); 

最小限の設定のときに問題となる点

最小限の設定だけで、メニューを設定すれば表示されますが、問題点があります。

fallback_cbを設定

メニューが設定されていない場合、自動で固定ページ一覧がメニューになってしまう原因は初期設定で、'fallback_cb' => 'wp_page_menu',となっているからです。

そこで、'fallback_cb' => '',とすると、何も出力されなくなります。

idやclassを設定

日本語を使用している場合、idなどが長くなってしまうので、下記のように設定します。

wp_nav_menu( [
 'menu_class' => 'global-menu',
 'menu_id' => 'global-navi',
 'container_class' => 'menu-global-navi-container',
 'theme_location' => 'global',
] ); 

場合によっては、menu_idを空欄にしても良いかと思います。

また、containerを使わない設定'container' => 'false',の場合、'container_class' => 'menu-global-navi-container',は不要です。

参考　exp.php

これで、メニューが表示できるようになります。

もし、ご不明な点があったら、下記からお問い合わせください。