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

ナビゲーションメニュー表示方法解説ページのアイキャッチ

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

ナビゲーションメニューの例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューとメニューエリアの関係

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

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

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

メニューとメニューエリアの関連付け

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

ウィジェットエリアの表示

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

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

メニューエリアがなくて関連付けできない様子

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

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

メニューエリアが表示されない様子

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

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

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

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

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

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

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

メニューエリア作成

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

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

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

これらの処理を、テーマを構成する PHP ファイルの一つである functions.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

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

作成したメニューエリアがメニュー設定画面に表示される様子2

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

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

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

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

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

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

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 はメニュー設定画面表示されるメニューエリアの説明文になります。

descriptionにより表示される文字列

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

add_theme_support( 'menus' );

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

スポンサーリンク

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

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

メニューの表示

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

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

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

これだけです。

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

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

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 の1つです。この $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’

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

参考 テンプレートタグ/wp nav menuWordPressCodex日本語版

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

◼️ ‘theme_location’

これは「表示するメニューエリアの識別子」の設定値になります。

 

これが指定されないと、デフォルトのメニューエリアが表示されてしまって表示したいメニューが表示されなくなってしまいます。

 

表示したいメニューエリアの識別子を指定しておいた方が良いです。

 

◼️ ‘fallback_cb’

これは「表示するメニューがない場合に実行する関数の名前」の設定値になります。

 

ですので、表示するメニューがない(表示しようとしているメニューエリアにメニューが関連付けられていないなど)場合、これに設定された関数が実行されることになります。

 

デフォルトで ‘fallback_cb’ に設定される関数名は wp_page_menu という関数であり、この関数は新しい固定ページのリストを表示するものになります。

 

したがってテーマ使用者がメニューエリアにメニューを関連付けていないと、メニューエリア表示部分に勝手に固定ページのリストが表示されてしまいます。

 

個人的には、表示するメニューがない場合は「何も表示しない」のが普通かなぁと思いますので、ちょっと固定ページのリストが表示されてしまうのはおせっかいかなぁと…。

 

同じ考えで、表示するメニューがない場合は「何も表示しない」ようにしたい方は、’fallback_cb’ には下記を設定すると良いと思います。

  • 存在しない関数の名前
  • 何も行わない関数の名前

具体的な wp_nav_menu 呼び出し部分のソースコードは下記のようになります(存在しない関数の名前を指定)。これで表示するメニューがない場合は何も表示されないようになります。

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

まとめ

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

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

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

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

  • register_nav_menu
  • wp_nav_menu

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

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

コメントを残す

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

ワードプレスの処理時間は約 0.183 秒です