WordPressにカスタムメニュー用の「メニューの位置」を追加する方法

WordPressにはメニューを自由に設定して表示させることができるカスタムメニューという機能があります。管理画面で[外観] – [メニュー]にアクセスすると、メニューを設定することができます。

メニュー設定の中に「メニューの位置」という項目があり、ここでメニューを表示する位置を指定することができます。メニューの位置は、使っているテーマによって選択できる数や場所が異なります。例えばTwenty Seventeenであれば、以下のように2つの表示位置から選択することができます。

今回は、この「メニューの位置」を自分で追加して、好きな場所にカスタムメニューを表示させる方法を紹介したいと思います。

WordPressにカスタムメニュー用の「メニューの位置」を追加する方法

まずはfunctions.phpに以下のようなコードを追加して、管理画面上にメニューの位置を定義します。

register_nav_menus(
  array(
    'headnav' => 'ヘッダーナビゲーション',
    'sidebarnav' => 'サイドナビゲーション',
    'bottomnav' => 'ボトムナビゲーション',
    'footernav' => 'フッターナビゲーション左',
    'footernav2' => 'フッターナビゲーション右'
  )
);

「headnav」などの部分は、メニューを出力する時の識別用の名前です。「ヘッダーナビゲーション」の部分は、管理画面上での表示名です。それぞれ、自サイトに合わせて設定してください。

すでにfunctions.php内でregister_nav_menusが記述されている場合は、配列の中身だけを追加するようにしてください。例えば、Twenty Seventeenの場合は、以下のように追加しました。

register_nav_menus( array(
  'top' => __( 'Top Menu', 'twentyseventeen' ),
  'social' => __( 'Social Links Menu', 'twentyseventeen' ),
  'headnav' => __( 'ヘッダーナビゲーション', 'twentyseventeen' ),
  'sidebarnav' => __( 'サイドナビゲーション', 'twentyseventeen' ),
  'bottomnav' => __( 'ボトムナビゲーション', 'twentyseventeen' ),
  'footernav' => __( 'フッターナビゲーション左', 'twentyseventeen' ),
  'footernav2' => __( 'フッターナビゲーション右', 'twentyseventeen' ),
) );

続いて、カスタムメニューを表示させたい場所に、以下のようなコードを追加します。

<?php wp_nav_menu( array('container' => 'nav','theme_location' => 'headnav' ) ); ?>

「theme_location」にて、functions.phpで追加したメニューを指定します。

上記の場合は、「headnav(ヘッダーナビゲーション)」に設定されたカスタムメニューが表示されます。

あとは、[外観] – [メニュー]でカスタムメニューを設定してあげれば完了です。

このように、「メニューの位置」が追加されているかと思いますので、カスタムメニューを表示させたい位置を選択します。

あとがき

テーマを制作する際は、この辺りは必ずといっていいほど使いますので、ぜひ覚えておきましょう。参考になれば幸いです。