WordPressで任意の位置にオリジナルのメニューを作る方法

今回はWordPressに任意の場所にオリジナルのメニューを追加する方法を紹介します。

WordPressではデフォルトではメニューの設定はありません。今回紹介するコードによってメニューが有効化されます。そのメニューは独自に作成出来るため、配置とclassを自由に設定する事が出来ます。テーマ作成では必ず必要な要素なので覚えておきましょう。

WordPressで任意の位置にオリジナルのメニューを作る方法

メニューを追加するには、 function.phpに以下の記述をします。
この場合「Main Menu」「about menu」「tab menu」の3つを作成している事になります。

// メニューの設定
function register_my_menus()
{
    register_nav_menus(array(
'main-menu' => 'Main Menu',
'about-menu' => 'about menu',
'tab-menu' => 'tab menu',
));
}
add_action('after_setup_theme', 'register_my_menus');

すると以下の外観→メニューのページにメニューの位置が追加されています。
そのページで実際に入れるメニュー項目をドラック&ドロップで作成していきます。

メニュー作成管理画面の操作については以下で説明しています。

メニューが完成したら以下の記述を表示させたいファイルに記述して完成です。

<?php
 // メインメニューを表示
 if ( has_nav_menu( 'main-menu' )){
  $mainMenu = array(
  'theme_location' => 'main-menu',
  'menu_id' => 'main-menu',
  'menu_class' => 'menu',
  'container' => false,
  'link_before' => '<span>',
  'link_after' => '</span>',
  'depth' => 0,
  );
 wp_nav_menu( $mainMenu ); 
 };
?>

後は、CSSで見た目を整えたり、drawer.jsなどでドロップダウン化するなりすれば完成です。