【ワードプレス】テーマの作り方⑧：ナビゲーションメニューを表示する

ウェブサイトに設置しておくと便利なのが「ナビゲーションメニュー」です。

このナビゲーションメニューがあれば、ウェブサイトにどんな種類のコンテンツのページがあるのかをウェブサイト訪問者に一目で伝えることができます。

またこのメニューからそれらのページに飛ぶこともできますのでウェブサイト閲覧者の利便性も向上させることができます。

テーマを自作するのであれば、やっぱりこのナビゲーションメニューは表示できるようにしておきたいですよね！

ただし、特に０からテーマを自作している場合、このナビゲーションメニューは表示されません。表示できるようにテーマを開発していく必要があります。

このページでは、テーマの開発においてナビゲーションメニューを表示する手順について解説します。

自作テーマにメニューを表示する手順

ここからはナビゲーションメニューを単に「メニュー」と呼ばせていただきます。自作テーマでメニューを表示するために必要な手順は下記の２つになります。

• メニューエリアを作成する
• メニューエリアを表示する

ちなみに「メニューエリア」という言葉は私が自作したものです。普通は「カスタムメニュー」や「メニューの位置」と言ったりするのですが、「メニューエリア」と呼んだ方が直感的に分かりやすいかと思って「メニューエリア」という言葉を用意しました。多分周りの人にメニューエリアと言っても通じないので気をつけてください…。

このページで言うメニューエリアとは、メニューを登録＆表示するエリアのことです。

下のページの「テーマの作り方⑤：ページにウィジェットを表示する」で、ウィジェットエリアを作成し、ウィジェットエリアを表示することで、ウィジェット自体を表示する方法を解説しました。

【ワードプレス】テーマの作り方⑤：ページにウィジェットを表示する

このウィジェットエリアと概念的には似てます。ただしメニューエリアは、ウィジェットではなく、メニューそのものを登録し、表示するエリアです。

ナビゲーションメニューが表示可能なテーマの場合、メニュー設定画面（ダッシュボードの「外観」→「メニュー」で表示できる設定画面）では下のような画面が表示されます。

この緑枠で囲った部分が「メニューそのもの」です。左側の「メニュー項目を追加」から表示する項目を追加することができます。

そしてオレンジ枠で囲った部分の各項目が「メニューエリア」です。画面には「メニューの位置」と表示されてますね。

テーマ使用者は、「メニューそのもの」を作成・設定し、このメニューエリアにチェックをつけることで、「メニューそのもの」を「メニューエリア」に関連付けすることが可能です。

そして、その「メニューエリア」をページに表示することで、関連付けられた「メニューそのもの」も表示されることになります。通常のテーマであれば、メニューエリアごとに表示される場所が異なるように作られています。

ただし、ワードプレス本体（ワードプレスのコア部や管理画面生成部）は「メニューエリア」を作成したり「メニューエリア」を表示するようなことは行ってくれません。

ですので、特に０からテーマを自作で開発している場合、「メニューエリア」も　はひとつも存在しません。そしてこのようなテーマの場合、メニュー設定画面にはメニューエリアが表示されません（メニューエリアが無いので）。そのためメニューそのものを作成したとしても、そのメニューを関連付けるメニューエリアが選べません。

テーマ開発者は、まずはこのメニューエリアを作成し、テーマ使用者がメニューそのものを関連付けるメニューエリアを選択できるようにしてあげる必要があります。

また、メニューエリアを作成したとしても、そのメニューエリアを表示する処理がテーマ内で行われていないと、そのメニューエリア（に関連づけられたメニューそのもの）は表示されることはありません。

テーマ開発者は、作成したメニューエリアを表示するようにテーマを作る必要があります。例えばヘッダーに表示する場合は、メニューエリアを表示するように header.php を作成する必要があります（メニューエリアを表示するプログラムを記述する）。

こういった理由から、自作テーマでメニューを表示するために、テーマ開発者は下記の２つのことを行う必要があります。

• メニューエリアを作成する
• メニューエリアを表示する

メニュー設定画面からメニューそのものを作成したり、メニューエリアにメニューそのものを関連付けるのはテーマ使用者ですので、テーマ開発者はこの作業は行う必要はないです。

メニューエリアを作成する

それでは具体的にメニューを表示する方法を解説していきたいと思います。

まずはメニューエリアを作成します。

スポンサーリンク

メニューエリアを作成する方法

メニューエリアは下記の３つの手順により作成することが可能です。

1. メニューエリアを作成する関数を作成
2. その関数の中で register_nav_menu 関数を実行
3. その関数をアクションフック “after_setup_theme” にフック

これらの処理を、テーマを構成する PHP ファイルの一つである functions.php に記載します。

メニューエリアを作成するプログラム

以下にメニューエリアを作成するプログラムの例を示します。functions.php に下記を記述します。

<?php
function create_menu_area() {
	register_nav_menu( 'header_menu', 'ヘッダー表示メニュー' );
	register_nav_menu( 'footer_menu', 'フッター表示メニュー' );
}

add_action( 'after_setup_theme', 'create_menu_area' );
?>

このプログラムにより、メニュー設定画面のメニューの位置として作成したメニューエリアが表示されるようになります。

またメニュー設定画面に「位置の管理」というタブが現れ、そこにも作成したメニューエリアが表示されます。

前述の各手順に対応する部分は下記の通りです。

1. メニューエリアを作成する関数を作成

まずはメニューエリアを作成する関数を作成します。

function create_menu_area(){
	/* 〜略〜 */
}

2. その関数の中で register_nav_menu 関数を実行

そしてメニューエリアを作成する関数の中で register_nav_menu 関数を実行します。このプログラムでは $location がそれぞれ ‘header_menu’ と ‘footer_menu’ の２つのメニューを作成しています。

register_nav_menu( 'header_menu', 'ヘッダー表示メニュー' );
register_nav_menu( 'footer_menu', 'フッター表示メニュー' );

3. その関数をアクションフック “after_setup_theme” にフック

最後に作成した関数を after_setup_theme フックにフックします。これによりフックした create_menu_area 関数がワードプレス起動の途中（テーマセットアップ直後）に実行され、そこでメニューエリアが作成されることになります。

add_action( 'after_setup_theme', 'create_menu_area' );

フックについては詳しく知りたい方は是非下のページも読んでみてください。

ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

メニューエリアの作成に使用する関数

メニューエリアの作成に使用した関数についても説明しておきます。

register_nav_menu 関数

register_nav_menu 関数はメニューエリアを作成する関数です。

register_nav_menu 関数の使い方は下記のようになります。

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

register_nav_menu 関数の引数の説明は下記のとおりです。

• $location：メニューエリアの識別子（必須）
• $description：メニューエリアの説明文（必須）

$location はメニューエリアの識別子であり、実際にメニューエリアを表示する際には、この識別子を指定して表示することになります。

また $description はメニュー設定画面表示されるメニューエリアの説明文になります。

ちなみにですが、テーマでメニューをサポートするためには、本当は下記の関数実行が必要です。

add_theme_support( 'menus' );

この関数実行も register_nav_menu の中で行われますので、テーマの functions.php で上記の関数実行を行う必要はないです。

スポンサーリンク

メニューエリアを表示する

メニューエリアは作成するだけだと表示されません。ここではその表示方法について解説していきます。

メニューエリアを表示する方法

メニューエリアを表示するために必要な手順は下記です。

• 表示したい位置で wp_nav_menu 関数を実行して表示

これだけです。

メニューエリアを表示するプログラム

以下にメニューエリアを作成するプログラムの例を示します。今回はヘッダーにメニューを表示させるため、header.php に下記を追記します。

<?php
$setting = array(
	'theme_location'  => 'header_menu',
);
wp_nav_menu( $setting );
?>

表示したい位置にメニューが表示されるように上記を追記します。header.php の作り方にもよりますが、基本的に <div id=”header”> 〜 </div> の間に記載するので良いと思います。

一応参考になるように私がテスト用に作っているテーマの header.php の <div id=”header”> 〜 </div> の部分を載せておきます。

<div id="header" role="banner">
	<div id="headerimg">
		<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo( 'name' ); ?></a></h1>
		<div class="description"><?php bloginfo( 'description' ); ?></div>
	</div>
	<?php
	$menu = array(
		'theme_location' => 'header_menu',
	);
	wp_nav_menu( $menu );
	?>
</div>

‘theme_location’ には、メニューエリアを作成するで register_nav_menu 関数の引数 $location に指定した識別子を指定します。

これにより、ページ表示を行った際に、ヘッダー部分にメニューが表示されるようになります（実際に動作確認する前に、メニューエリアの設定や関連づけを行っておいてください）。

全然かっこよくないナビゲーションメニューですが、これは sytle.css でスタイル設定を行っていないためです。スタイル設定さえ行えば、自分好みのメニュー表示を行うことが可能です。

スポンサーリンク

メニューエリアの表示に使用する関数

メニューエリアの表示に使用した関数についても説明しておきます。

wp_nav_menu 関数

wp_nav_menu 関数はメニューエリアを表示する関数です。

wp_nav_menu 関数の使い方は下記のようになります。

<?php wp_nav_menu( $args ); ?>

wp_nav_menu 関数の引数は連想配列 $args の１つです。この $args の各キーには下記の値を格納し、表示するメニューの設定を行うことが可能です。

• ‘menu’
• ‘menu_class’
• ‘menu_id’
• ‘container’
• ‘container_class’
• ‘container_id’
• ‘fallback_cb’
• ‘before’
• ‘after’ ‘link_before’
• ‘link_after’
• ‘echo’
• ‘depth’
• ‘walker’
• ‘theme_location’
• ‘items_wrap’

すごく多いですが、全てオプションですので、指定しなくても動作させることは可能です。デフォルトの値が適用されてメニューが表示されます。具体的なデフォルトの値は下記ページが参考になります。

全てオプションですが、下記に関しては設定しておいた方が良いと思います。

<?php 
$setting = array(
	'theme_location'  => 'header_menu',
	'fallback_cb' => 'nofunc',
);
wp_nav_menu( $setting );
?>

まとめ

このページでは自作のテーマでナビゲーションメニューを表示する手順について解説しました。

表示するためには下記の２つを行う必要があり、

• メニューエリアを作成する
• メニューエリアを表示する

それぞれは下記の関数を実行することで行えます。

• register_nav_menu
• wp_nav_menu

ナビゲーションメニューはユーザーに自分のサイトのコンテンツを見つけやすくするのために非常に便利です。

是非このページを参考にして、あなたの作成するテーマでもナビゲーションメニューを表示するようにしてみてください！