WordPress

WordPressサイトをオリジナルテーマで制作する際のナビゲーションメニュー設定

March 9, 2018
WordPressサイトをオリジナルテーマで制作する際のナビゲーションメニュー設定


テーマによっては最初から設定されているメニューですが、オリジナルテーマを作成する際、使用する機会もある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.phpfooter.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を参照してください。

メニュー


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

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

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

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

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