March 9, 2018

テーマによっては最初から設定されているメニューですが、オリジナルテーマを作成する際、使用する機会もあるWordPressのメニュー機能。簡単に複数のメニューを作成したり、自動的に追加したり、並び替え、サブメニュー設定など充実した機能が揃っています。

functions.phpに以下の記述を追加します。

register_nav_menu( 'header-navigation', 'ヘッダーナビゲーション' );

複数のナビゲーションの場合

register_nav_menus( array(
  'header-navigation' => 'ヘッダーナビゲーション',
  'footer-navigation' => 'フッターナビゲーション',
) );

<?php register_nav_menu( $location, $description ); ?>

詳しくは関数リファレンス/register nav menuを参照してください。

header.phpやfooter.phpなどの表示させたいテンプレートに記述します。
Header Example:

<header>
  <?php wp_nav_menu( array( 
    'container'     => 'nav',
    'theme_location'=> 'header-navigation',
    'items_wrap'    => '<ul class="responsive-nav">%3$s</ul>'));
  ?>
</header>

<?php wp_nav_menu( $args ); ?> 

デフォルト値

<?php
$defaults = array(
	'menu'            => '',
	'menu_class'      => 'menu',
	'menu_id'         => '{メニューのスラッグ}-{連番}',
	'container'       => 'div',
	'container_class' => 'menu-{メニューのスラッグ}-container',
	'container_id'    => '',
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'echo'            => true,
	'depth'           => 0,
	'walker'          => '',
	'theme_location'  => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

詳しくはテンプレートタグ/wp nav menuを参照してください。

外観 > メニューと進みます。

「新規メニューを作成」をクリックします。

メニュー名を入力し、「メニューを作成」をクリックします。

左のカラムからメニュー項目を追加します。

並び替えもドラッグアンドドロップで簡単に行え、サブメニューの設定も上記画像のように親よりも左から少し離してドラッグアンドドロップします。
最後に「メニューを保存」をクリックします。