WordPressには管理画面から任意の場所にメニューを追加することができる、カスタムメニューという機能があります。

Contents

  1. カスタムメニューを使用する方法
  2. カスタムメニューで使用できるパラメータ

カスタムメニューを使用する方法

カスタムメニューを使用するには、functions.phpに以下を記述して「有効化」させる必要があります。

functions.php

function register_my_menu() {
  register_nav_menus( array( // 複数のナビゲーションメニューを登録する関数
  'header-nav' => 'ヘッダーナビ', 
  'footer-nav' => 'フッターナビ,
  ));
}
add_action( 'after_setup_theme', 'register_my_menu' );

カスタムメニューを有効化されると管理画面の「外観」に「メニュー」という項目が追加され、カスタムメニューが使えるようになります。

「header-nav」という名前で登録した、カスタムメニューを表示したい場合は、任意の場所に下記のように記述します。

ここでは、header.php内のグローバルナビを表示させたい場所に、追加します。

// メニューを表示したい場所に記述します
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'main-menu' 
  ) ); 
?>

カスタムメニューで使用できるパラメータ

先に記述指定た、カスタムメニューを表示する位置を指定するtheme_location以外にも下記のパラメータを使用して、カスタムメニューを囲う要素に任意のIDやクラス名を指定することができます。

<?php wp_nav_menu( array(
	'menu'            => '', 
	'menu_class'      => 'menu_class', // メニューを構成するul要素につけるクラス名
	'menu_id'         => 'menu_id', // メニュを構成するul要素につけるID名
	'container'       => 'nav', // ulを囲う要素を指定。無しの場合にはfalseを指定 
	'container_class' => 'container_class', // コンテナに適用するクラス名
	'container_id'    => 'container_id', // コンテナに適用するID名
	'fallback_cb'     => 'wp_page_menu', // メニューが存在しない場合にコールバック関数を呼び出す
	'before'          => '[before]', // リンクの前に挿入するテキスト
	'after'           => '[after]', // リンクの後に挿入するテキスト
	'link_before'     => '[link_before]', // リンク内の前に挿入するテキスト
	'link_after'      => '[link_after]', // リンク内の後に挿入するテキスト
	'echo'            => true, // メニューをHTML出力する（true）かPHPの値で返す（false）か
	'depth'           => 1, // 何階層まで表示するか。0は全階層 
	'walker'          => '', // カスタムウォーカーを使用する場合
	'theme_location'  => '', // メニューの位置を指定
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', // %1$sには'menu_id'のパラメータ展開、%2$sには'menu_class'のパラメータ展開、%3$sはリストの項目が値として展開されます
)); ?>