WordPressにカスタムメニューを表示するための機能追加方法

WordPressにはカスタムメニューという機能があります。カスタムメニューはナビゲーションメニューとも呼ばれていますが、WordPressではどちらもメニュー機能のことを言います。

WordPressテーマを自作した場合は、自分でカスタムメニューをテーマに機能追加する必要がありますし、使用するWordPressテーマによってはカスタムメニュー機能が追加していない場合があります。

どちらにしてもカスタムメニューに必要な関数やテンプレートタグを使用して追加と表示ができるのでカスタムメニューの機能追加と表示方法を紹介します。

WordPressのカスタムメニューを表示するまでの流れ

WordPressのカスタムメニューを表示するまでの流れをはじめにざっくりと把握してみてください。

カスタムメニューをWordPressに表示するには、カスタムメニューのテーマ機能を有効にする必要があります。これがカスタムメニューの追加です。

そのために必要な流れが以下です。

• register nav menuまたはregister nav menusというWordPressの関数でカスタムメニューの機能を有効にする

そして

• wp_nav_menuでWordPressサイトにカスタムメニューを表示する。

カスタムメニュー機能の追加も表示もどちらもWordPressの関数とテンプレートタグを使用してパラメータでカスタムメニューを自サイトに合わせてカスタマイズしていきます。

WordPressに表示するカスタムメニューの機能追加方法

WordPressにカスタムメニューを表示するために必要になるカスタムメニューのテーマ機能を追加する方法は、先述したように「register nav menu」または「register nav menus」というWordPressで用意されている関数を使用します。

2つの関数のどちらかを使うことにより、まだカスタムメニューが有効になっていなく使用できていないWordPressテーマの管理画面の外観には「メニュー」が追加できます。

以下から「register nav menu」と「register nav menus」でカスタムメニューの追加をしていく方法を一つずつ説明していきます。

カスタムメニューをregister nav menuで追加

WordPressにカスタムメニューを追加できる関数の「register nav menu」は1つのカスタムメニューを管理画面のメニューで設定できるように登録できます。

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

上のコードはサイトのヘッダーにグローバルメニューの実装を目的としたカスタムメニューに追加をする場合の方法です。

WordPressテーマのfunctions.phpに記述し保存することで、ワードプレスの管理画面の外観には「メニュー」が追加されているのが確認できます。

「register nav menu」はカスタムメニューを一つしか登録できないので、ヘッダー以外、フッターやサイドバーにもカスタムメニューを複数追加したい場合は以下のようにコードを記述してfunctions.phpに貼り付けます。

register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav', ' フッターナビゲーション ' );
register_nav_menu( 'side-nav', 'サイドナビゲーション');

もしくはafter_setup_theme() にフックしてカスタムメニューの呼び出すタイミングにする方法でも大丈夫です。そのコードが以下のコードです。

function sample_setup_theme() {
register_nav_menu( 'header-navi', 'ヘッダーナビゲーション' );
}

add_action( 'after_setup_theme', 'sample_setup_theme' );

「register nav menu」をafter_setup_themeにフックしてafter_setup_themeが処理を実行するタイミングでカスタムメニューの処理が始まります。

initでフックすることもできるようですがafter_setup_themeアクションはfunctions.phpが呼び出された直後に実行され、その後でinitアクションが実行されるので順番からするとafter_setup_theme()でフックした方法のほうが良いかと思います。

register nav menuのパラメータの使い方

次に「register nav menu」でカスタムメニューを追加するときに使うパラメータの使い方も説明します。

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

「register nav menu」はカスタムメニューを一つしか登録できないため、ヘッダーとフッターの2つのカスタムメニュー(複数)を追加したい場合は、以下のコードのようにパラメータもそれぞれの$locationと$descriptionにします。

register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav', ' フッターナビゲーション ' );

WordPressのカスタムメニューを「register nav menu」関数でヘッダーとフッターに表示できるように機能追加した後に管理画面の外観からメニューを開くと、無事にWordPressのテーマ機能としてカスタムメニューの追加ができていることが確認できます。

カスタムメニューをregister nav menusで追加

WordPressにカスタムメニューを表示するための方法として「register nav menus」関数を使うことでもテーマ機能の追加ができます。

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

カスタムメニュー機能の追加方法としては上記のコードのようにregister_nav_menusを配列にして$locationと$descriptionのパラメータを渡します。

「register nav menus」はregister nav menuと違い配列形式で複数のナビゲーションメニューをまとめて機能追加ができるので管理も楽かもしれませんね。

register_nav_menu()の場合は引数でメニュー登録するのに対して

register_nav_menus()は配列でメニュー登録する

上記の違い以外に何かあるとしたら2つの関数名の最後がmenu(単一)かmenus(複数)かの違いだけかと思います。

register nav menusのパラメータの使い方

あまり難しいと思うことなくパラメータを扱えると思いますが、register nav menusのパラメータの使い方も紹介します。

連想配列にしているのでregister_nav_menusのパラメータは「$locationをキー」「$descriptionを値」のペアで、それぞれのナビゲーションメニューの「メニューの位置」の情報を指定します。

register_nav_menus( array(
　'キー' => '値',
) );

• キー：「メニューの位置」の識別子になる文字列
• 値：メニューの説明のための文字列（日本語可）

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

例えば、カスタムメニューでヘッダーメニューとフッターメニュー、そしてサイドメニューを追加したい場合にはキーと値をそれぞれのメニューセットとして追加しパラメータを増やすことで、簡単に機能の追加ができます。

コードだけを見ると分かりづらいかもしれませんが、コードをfunctions.phpに記述して管理画面のメニューを開くと上記画像のようにdescriptionが表示されるので出力されて表示するカスタムメニュー追加のイメージが理解しやすくなります。

WordPressに追加したカスタムメニューの表示方法

WordPressの関数、register_nav_menuかregister_nav_menusでカスタムメニューを管理画面にテーマ機能として追加したあとには、使用してるWordPressテーマにカスタムメニューを表示します。

カスタムメニューを表示する方法はWordPressのテンプレートタグのwp_nav_menuを使用します。

<?php wp_nav_menu( $args ); ?>

wp_nav_menuを使用することでサイトのヘッダーやフッター、サイドバーや任意の場所に設定したメニュー表示ができるようになります。

wp_nav_menuの詳しい使い方を以下から紹介します。

カスタムメニューをwp_nav_menuで表示

register_nav_menuかregister_nav_menusでセットしたカスタムメニューを表示できるようにするには以下のようにwp_nav_menuでキーと値をセットにして記述します。

<?php
　wp_nav_menu( array(
　'キー' => '値',
　) );
?>

キーにはwp_nav_menuのtheme_locationの値にregister_nav_menusやregister_nav_menu側で登録したtheme_locationのキーと合わせます。

例えばカスタムメニューの機能を追加したときにヘッダーメニューとしてセットしたキーを使う場合

<?php wp_nav_menu( array(
　'theme_location' => 'header-nav',
) ); ?>

上のコードでキーはwp_nav_menuのパラメータの’theme_location’を指定して、値には’header-nav’を指定します。

//カスタムメニュー追加側
register_nav_menus( array(
　'header-nav' => 'ヘッダーナビゲーション',
　'footer-nav' => 'フッターナビゲーション',
) );

このとき指定した’header-nav’の指定というのはregister_nav_menusやregister_nav_menu側で登録してあるtheme_location(位置)です。

そしてwp_nav_menuのコードはカスタムメニューを表示したいテンプレートファイルに貼り付けます。ヘッダーメニューならテーマのheader.phpに、フッターメニューならテーマのfooter.phpに記述します。

「register nav menu」と「register nav menus」でカスタムメニューの追加をして、wp_nav_menuでカスタムメニューを表示する位置にコードを記述したら、WordPress カスタムメニューの設定を管理画面で操作する手順の記事で紹介している設定の流れでカスタムメニューの構造を作成します。