WordPressでナビゲーションメニューを作成する際にカスタムメニューを使うととても簡単に管理ができます。今回はカスタムメニューについて解説していこうと思います。

なぜカスタムメニューを使う必要があるのか?

なぜカスタムメニューを使う必要があるのか

まずはカスタムメニューをなぜ使う必要があるのかお話をしていこうと思います。メニューを設置する方法は2種類あり1つめの方法はテンプレートに直接HTMLを書き込む方法です

しかしこの方法は直接HTMLを書き込むので後々URLやメニューの文字を修正をする際はソースを見直して修正しなければなりません。

そこで2つめの方法のカスタムメニューを使う方法です。この方法なら複数メニューを管理することもできるので一度実装してしまえば修正が入っても管理画面から管理できるのでHTMLに触れることなくメニューを変更することができます。

カスタムメニューを導入する方法

カスタムメニューを導入する方法

いよいよカスタムメニューを導入して行きましょう。まずはテーマ内にカスタムメニューを定義する必要があるのでテーマ内のfunction.phpを開いて以下をコピペして貼り付けてください。※何かあった時の為に必ずバックアップを取りましょう。

//ナビゲーションを登録する
function register_my_menus() {
	register_nav_menus( array(
		//この中にカスタムメニューを定義する  '場所' => '説明'
		'header' => 'ヘッダーナビゲーション',
		'footer' => 'フッターナビゲーション'
	));
}
//アクションフックを追加
add_action( 'after_setup_theme', 'register_my_menus' );

カスタムメニューを定義するにはregister_nav_menuregister_nav_menusのどちらかを使って定義します。

名前の最後にsがついてるように、カスタムメニューを一つだけ定義するか複数定義するかの違いです。

複数定義できるregister_nav_menusも一つだけ定義できるので今回はこちらを使っていきます。

当サイトではヘッダー内に1つ、フッター内に1つメニューを置いているので2つ定義してみました。この辺はご自分のテーマの内容にあわせて変更してください。

カスタムメニューを表示

定義したカスタムメニューを早速呼び出してみてます。カスタムメニューを呼び出す関数はwp_nav_menuです。カスタムメニューを設置したい場所(header.phpsidebar.phpなど)に以下を記述します。


<?php 
$args = array(
	'theme_location'  => 'header' //register_nav_menusで定義した場所
);
wp_nav_menu( $args );
?>

theme_locationに先ほど定義した場所を指定することでカスタムメニューがwp_nav_menuにひも付きました。

サンプルとして当サイトのHTMLと出力内容を表示します。

<div class="menu-test-container">
    <ul id="menu-test-1" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
            <a href="wp-fan.com/privacy-policy/">プライバシーポリシー</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
            <a href="wp-fan.com/contact/">コンタクト</a>
        </li>
    </ul>
</div>
・プライバシーポリシー
・コンタクト

カスタムメニューの項目を編集

WordPressの管理画面にログインし、左サイドバーの「外観」>「メニュー」をクリックします。

メニューの編集画面が表示されるのでここからメニューを編集します。流れとしては、新規メニューを作成項目の追加メニューの設定保存となります。編集方法を詳しく別の記事に書いたのでお手数ですが、そちらを確認ください。

複数メニューを表示

複数メニューを表示する場合はtheme_locationの箇所をそれぞれ変更してあげればOKです。当サイトは先ほど2箇所定義したので以下のような記述になります。

<?php 
$args = array(
	'theme_location'  => 'header' 
);
wp_nav_menu( $args );
?>
<?php 
$args = array(
	'theme_location'  => 'footer'
);
wp_nav_menu( $args );
?>

まとめ

WordPressでカスタムメニューを導入する方法を紹介しました。PHPの内容が少し出てくるので導入は少し手間かもしれませんが、今後のメンテナンスが直でHTMLを編集するよりも圧倒的に楽になります。皆さんも是非実装してみてください!