2013年09月10日 追記・変更

そもそもカスタムメニューとは?

カスタムメニューを使うと、ページ上部のナビゲーションメニューを効率的に活用出来る。
通常のナビゲーションメニューの場合、固定ページが左から順番に並べられるだけだ。
カスタムメニューを使う事で、WordPressの管理画面上からサイト上部に表示されるリンク内容を変更する事が出来る。
custommenu1

まず、テーマをカスタムメニューが利用出来るようにfunctions.phpを編集

「register_nav_menus()」関数を使い、functions.phpにカスタムメニューを使う宣言を書く。
もしまだfunctions.phpがテーマ内に存在しないならば、下記を記述してファイル名を「functions.php」で保存する。
<?php
register_nav_menus(array(
		'main_navigation' => 'Primary Navigation'
	)
);
?>
・「main_navigation」はロケーション名(ID)
ここで設定したロケーション名(ID)を実際の呼び出し箇所で使用する。
※管理画面上には表示されないので注意。
・「Primary Navigation」はロケーションの説明
管理画面の「外観」→「メニュー」で、カスタムメニューの説明テキストとして使われる。
詳しくは、下記の管理画面のキャプチャー画像を見てもらいたい。

カスタムメニューの設定は、管理画面上から可能

custommenu21
管理画面上から、「メニューの名前」(今回はトップメニュー)を入力して「メニューを保存」を押すと、新規のカスタムメニューが作成される。
作成後、「テーマの場所」で「ロケーションの説明(今回はPrimary Navigation)」の項目のプルダウンメニューで「トップメニュー」を選択する。
最後に「保存」を押す事でカスタムメニューの設定が完了する。

作成したカスタムメニューを表示したい場所にwp_nav_menu()で呼び出し出力

theme_locationは、ロケーション名(ID)を指定する

<?php
wp_nav_menu(array('theme_location' => 'main_navigation'));
?>

更に出力内容を変えたい場合は詳細指定する事で可能

<?php wp_nav_menu( array(
    'theme_location'=>'main_navigation', 
    'container'     =>'', 
    'menu_class'    =>'',
    'items_wrap'    =>'<ul id="main_navigation">%3$s</ul>'));
?>
containerは空欄にする事で、自動出力されるdivタグを消した。
items_wrapはulのidのクラス名を「main_navigation」に変更してみた。

wp_nav_menuの引数については、下記を参照。
http://codex.wordpress.org/Function_Reference/wp_nav_menu
テンプレートタグ/wp nav menu

この記事が気に入ったら下のボタンをクリック

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る


One Response so far.

Leave a Reply