広告

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

WordPress管理画面WEB
この記事は約6分で読めます。

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' );

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

上記の例で設定したメニュー
  • グローバルメニュー
  • フッターメニュー左1
  • フッターメニュー左2
  • フッターメニュー左3
  • フッターメニュー右1
  • フッターメニュー右2
  • フッターメニュー右3

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の関数で、管理画面>外観>メニューでメニューを設定できるようにします。

register_nav_menusは配列(連想配列)でメニューを定義します。

上記の例(4行目)では、globalという箱にグローバルメニューという値をいれています。

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

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

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

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

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

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

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

WordPress管理画面

メニューが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で1つだけというのも可能なので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_locationregister_nav_menusで設定したメニュー定義名(正確には識別子)を入れます。

最小限の設定

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

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

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

  • メニューが設定されていない場合、自動で固定ページ一覧がメニューになってしまう。
  • 日本語を使用している場合、idなどが長くなる

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

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

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