カスタムメニューを使ってWordPressの複数メニューを表示する方法

公開日 :

最終更新日 :

カテゴリー :

最近Young Flavorで使っているWordPressテーマをリニューアルしました。前のテーマから新たにカテゴリー以外にもちょっとしたメニューを追加したいなぁと思って調べたら簡単に出来たので紹介します。

メニューを登録する

WordPressのメニューはWordPressのテーマに依存しています。WordPressをインストールするときについてくる標準テーマのTwenty Thirteen/Twenty Twelve/Twenty Elevenといったテーマでは1つのメニューしかありませんが、WordPressでは独自にメニューを追加することができます。
WordPressのメニューを追加するには、functions.phpのregister_nav_menu()からregister_nav_menus()に変更してメニューを追加します。これから編集するコードは、Twenty Thirteenをベースにしています。

functions.php/* register_nav_menu( 'primary', __( 'Navigation Menu', 'twentythirteen' ) ); */
register_nav_menus ( array (
'primary' => __( 'Navigation Menu', 'twentythirteen' ), /* もとからあるメニュー */
'secondary' => __( 'Sub Menu', 'twentythirteen' ) /* 追加したメニュー */
));

これでメニューの登録が完了しました。register_nav_menu()とregister_nav_menus()は、引数でメニュー登録するか配列でメニュー登録するかの違いだけです。ただregister_nav_menu()は1つしか登録出来なくて自由度が低いのでregister_nav_menus()のほうがいいです。register_nav_menus()でregister_nav_menu()と同じ動作をさせるためには、 'secondary' => __( 'Sub Menu', 'twentythirteen' ) をまるごと1行消せば同じ動きになります。

メニューを配置する

次にメニューを好きなところに表示させます。メニューを表示させたいところにwp_nav_menu()を使えば、メニューが表示されます。Twenty Thirteenの場合、header.phpの45行目にwp_nav_menu()が書かれています。

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );

これに追加したメニューを表示させるには、wp_nav_menu()のprimaryをsecondaryに変更して好きな場所に追加すればOKです。

wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) );

上の画像は、Twenty Thirteenのfooter.phpに追加した画像です。追加したメニューはヘッダーにあるメニューと同じものを表示することが出来ますし、別のメニューとして表示させることが出来ます。メニューの管理画面で「位置の管理」タブをクリックした場合でメニューが複数あるときはこんな感じにでるはずです。

Twenty Thirteenの標準メニューのみのとき

Twenty Thirteenにフッターメニューを追加したとき

まとめ

これでカスタムメニューを使った複数メニューが表示されました。WordPressでメニューを追加するためにテーマのfunctions.phpをちょっといじる必要がありますが、そんなに大変じゃありません。表示させるのも簡単にできて管理がしやすいです。WordPressのテーマを改造してみたい方のはじめの一歩としておすすめのカスタマイズです。

参考URL

+1 Pocket はてブ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress