カスタムメニューを追加する【WordPress】

カスタムメニュー設定方法

ヘッダーやフッターのナビメニューをWordPressの管理画面で設定し、それを動的に表示させる。

これはカスタムメニューを設定することで解決できます。

カスタムメニューを設定をすることでサイトのナビゲーションメニューなどに変更があった場合でも、コードを書かずともメニューを動的に表示させるようにできます。

設定方法の手順としては以下のようになります。

  1. カスタムメニューを有効化する
  2. メニューを作成する
  3. メニューを表示したいに箇所にテンプレートを記述

この記事ではカスタムメニューを設定し表示する方法を解説しています。

それでは早速やっていきましょう!

カスタムメニューを有効化

カスタムメニューを有効化するにはfunctions.phpに下記コードを記述します。

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

register_nav_menus()関数を読み込み、カスタムメニューが有効化されました。

メニューの作成

次にメニューを作成します。

「外観」に先程追加された「メニュー」をクリックします。

外観→メニュー

メニュー名を入力して「メニューに作成」をクリックします。

メニュー作成

表示させる項目にチェックを入れて「メニューに追加」をクリックしてメニューを選びます。
メニューの位置に☑チェックを入れて「メニューを保存」しましょう。

メニュー内容

これでメニューの作成は終わりました。

メニューを表示したいに箇所にテンプレートを記述

次に先程作ったメニューを表示させましょう。

どのようにするかというと、メニューを表示させたい箇所にテンプレートタグを記述します。

<?php
wp_nav_menu(
	array(
		'theme_location' => 'footer-navigation',
		'container' => false,
	)
);
?>
フッターナビ

以上でメニューを表示させることができました。

他にも指定できるパラメータがあるので、設定をもっとカスタマイズしたい場合は WordPress Codex を参照してください

これでナビゲーションメニューに変更があった場合に、コードを書かずともメニューが動的に変更されるようになりました。

テーマを作成するときは、HTML などを知らない人でも簡単に管理、カスタマイズできるように、カスタムメニューの設定は必須かと思います。

以上、カスタムメニューの設定方法でした(^O^)/

この記事を書いた人

けーた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。