徹底解説!WordPressのメニュー機能を自作する方法や使い方(サンプルコード付き)

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressのメニュー機能を自作する方法や使い方について解説していきたいと思います。
メニュー機能とは、WordPressでメニューを設定するための標準機能のことを言います。
また、このメニュー機能は、Webサイトには欠かせないヘッダーやフッターにあるグローバルメニューなどを表示するための機能です。
サイトによってはメニューがHTMLで実装されている場合があり、その場合はソースコードを編集しなければなりません。
そんな時に、メニュー機能を実装することによって、管理画面から設定を操作するだけで簡単にメニューを実装できるようにすることができます。
当記事では、このメニュー機能の実装方法について解説いたします。
読み進めるだけで無理なく実装できるように構成して執筆しておりますので、よろしければお仕事などでご活用ください。
目次
WordPressのメニュー機能とは
WordPressのメニュー機能とは、WordPress自体にあらかじめ備わったメニューの機能のことをいいます。
Webサイトには必ずと言っていいほどヘッダーやフッターなどにメニューがあるかと思いますが、そのメニューを実装するための機能がこのメニュー機能です。
メニュー機能の設定ページをご確認いただくには、WordPress管理画面左メニューの「外観」→「メニュー」で進めていただければ設定ページをご確認いただけます。

メニュー機能の設定ページは以下になります。

当記事ではこのメニュー機能を自作する方法について解説いたしますが、実装方法の解説の前にこのメニュー機能のことについて色々知っておかなければなりません。
まずはサイトのヘッダーやフッターにメニューを表示するための設定方法について解説いたします。
基本的な設定方法の流れとしては以下になります。
- 画面右側「メニュー構造」の「メニュー名」に任意のメニュー名を入力し、下の「メニューを作成」ボタンをクリック。
- 画面左側「メニュー項目を追加」にある「固定ページ」「投稿」「カスタムリンク」「カテゴリー」にてメニューとして設定してページを選択し、「メニューに追加」ボタンをクリック。
- 画面右側「メニュー構造」の「メニュー設定」にある「メニューの位置」にあるいずれかのチェックボックスを選択し、「メニューを作成」ボタンをクリック。
これでメニューの設定することができます。
ちなみに手順3の「メニュー設定」の「メニューの位置」に関しては、ご自身が利用されているテーマによって内容が変わります。
例えば、テーマAでは下図のように項目が2つだったり…

テーマBでは下図のように5つだったりします。

このように、メニューを表示できる位置がテーマによって様々なパターンで設定できるようになっております。
当記事ではメニュー機能を自作しますが、実装の一つにこの「メニューの位置」を新規追加する工程が含まれてきます。
このあと解説する実装方法については、以下のようにヘッダーとフッターにグローバルメニューを表示するために「ヘッダーメニュー」と「フッターメニュー」という2つのメニューの位置を追加する予定です。

フロントページ上では下図のようなイメージを想定しております。
「ヘッダーメニュー」の場合は下図のようなイメージで…

「フッターメニュー」の場合は下図のようなイメージです。

このあとの章では、早速メニュー機能を実装していきたいと思います。
WordPressメニュー機能の実装メリット
WordPressメニュー機能を実装できることのメリットについて解説いたします。
メニュー機能を実装するかしないかを判断する際にメリットを知っておくことは重要です。
メニュー機能を実装するのも工数がかかります。クライアントの要望で「メニュー機能があった方が良いか?」を判断するための材料などにご活用いただけたらと思います。
- サイト運営者が簡単にメニューを設定できる
- SEO対策などカスタマイズされたメニューを実装できる
- 配布するテーマを作れる
それぞれ解説いたします。
サイト運営者が簡単にメニューを設定できる
WordPressのメニュー機能を自作することで、サイト運営者が管理画面から簡単にメニューを設定できるようになります。
運営者は、このメニュー機能を使用してドラッグ&ドロップなどの操作だけでメニュー項目を追加・削除したり、順序を変更したりすることが可能です。
この柔軟性により、HTMLやCSSの知識がなくても直感的に操作でき、更新作業の効率化が図れます。また、メニューの変更が即座に反映されるため、訪問者に常に最新の情報を提供することができるというメリットがあります。
SEO対策などカスタマイズされたメニューを実装できる
メニューを自作することで、SEOに特化したカスタマイズが可能になります。
例えば、特定のキーワードを含むリンクテキストを設定したり、検索エンジンがクロールしやすいHTML構造を採用したりできます。
また、nofollow属性やスキーママークアップを追加することで、検索エンジンの評価を高める施策も実現可能です。このようなカスタマイズにより、メニューが単なるナビゲーションの役割を超えて、SEO効果を最大化する重要な要素となります。
配布するテーマを作れる
WordPressのメニュー機能を自作することで、独自のテーマを開発し、配布することが可能になります。
テーマに独自のメニュー機能を組み込むことで、利用者が簡単にメニューを編集できる利便性を提供できます。
また、テーマに合わせたデザインや機能を持つメニューを実装することで、他のテーマとの差別化を図ることができます。これにより、ユーザーにとって使いやすく、魅力的なテーマを提供できるだけでなく、自身のテーマ開発者としてのスキル向上や収益化のチャンスを広げることも可能です。
WordPressメニュー機能の実装方法
それでは、WordPressメニュー機能の実装方法について解説したいと思います。
自作でメニュー機能を実装する手順としては以下になります。
- 「メニューの位置」を追加登録
- 「メニューの位置」ごとにPHPテンプレートの各箇所に表示機能を実装
- CSSでメニューの見た目をデザインする
それぞれ解説いたします。
「メニューの位置」を追加登録
まず「メニューの位置」を追加登録いたします。
「メニューの位置」を追加登録するとは、ヘッダーやフッターなどメニューを表示すべき位置を決めて、サイト運営者がメニューを設定するための枠を追加することをいいます。
当記事では「ヘッダー」と「フッター」に枠を用意することとします。
以下のコードをfunctions.phpにコピー&ペーストしてください。
<?php
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __('ヘッダーメニュー'),
'footer-menu' => __('フッターメニュー')
)
);
}
add_action('init', 'register_my_menus');
上記コードは、WordPressテーマで「ヘッダーメニュー」と「フッターメニュー」を登録するためのコードです。
独自のregister_my_menus()関数の中で、WordPressテンプレートタグであるregister_nav_menus()関数を使用しておりますが、register_nav_menus()関数は、WordPressに複数の「メニューの位置」を登録するための関数です。
このコードでは、array()を使用して以下の2つのメニュー位置を指定しています。
- header-menu:ヘッダー(上部)に表示するメニュー。
- footer-menu:フッター(下部)に表示するメニュー。
それぞれのキー(例: header-menu、footer-menu)は任意の名前で、プログラム内部で使用される識別名で、後ほどPHPテンプレートファイルでのメニュー表示実装で使用します。
また、値(例: __('ヘッダーメニュー')
)は管理画面に表示される名前を指定しています。
また、add_action()関数の部分は、register_my_menus()関数をWordPressのinitというアクションフックに追加しています。
initフックは、WordPressが初期化されるタイミングで呼び出されるため、このコードによりテーマが有効化される際にメニューが登録されるようになります。
上記コードをペーストして管理画面を更新していただくと、WordPress管理画面左メニュー「外観」に「メニュー」が追加されます。
「メニュー」をクリックしていただくと、下図のようにメニュー機能の設定画面が表示されます。

そして、画面右側にある「メニュー構造」の「メニュー設定」に、「ヘッダーメニュー」と「フッターメニュー」の2つが登録されていることがわかるかと思います。

以上で「メニューの位置」を追加登録が完了しました。
これにより、サイト運営者はドラッグ&ドロップでメニューを簡単に作成し、PHPテンプレートに表示機能を実装した位置に表示できるようになります。
PHPテンプレートに表示機能を実装
次に、PHPテンプレートにメニューを表示するための実装をしていきます。
まずは、ヘッダーメニューの表示機能を実装することとします。
以下のコードをheader.phpなどのヘッダーの役割のあるPHPファイルもしくはコードの場所にコピー&ペーストしてください。
<?php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'container' => 'nav',
'menu_class' => 'main-menu'
)
);
上記コードは、WordPressで登録されたナビゲーションメニューを表示するためのものです。
wp_nav_menu()関数のパラメーターである「theme_location」を「header-menu」で指定しているため、「ヘッダーメニュー」として登録されたメニューが表示されます。
「container」はメニュー全体を囲むHTML要素を指定し、この場合は<nav>タグが使用されます。
「menu_class」は、生成される<ul>タグに「class=”main-menu”」を付与し、スタイリングに利用できます。このコードを使うことで、登録済みのメニューを簡単に表示しつつ、HTML構造やデザインのカスタマイズが可能です。
ペーストしたら、今度は下図のように固定ページの投稿画面からいくつか動作テスト用のサンプルページを追加してください。

追加できたら、フロントページを更新して表示確認をしてみましょう。
すると、下図のようにリンクテキストが出力されていることと思います。

このように、メニュー機能設定ページで何の設定もしてなくてもwp_nav_menu()関数を使用することでデフォルトで公開された固定ページを表示する仕組みになっています。
次は、ちゃんと設定したメニューを表示するようにしてみましょう。
WordPress管理画面左メニュー「外観」→「メニュー」へ進んでいただき、メニュー機能の設定ページを開いてください。

設定ページを開いたら、下図のように「メニュー名」と「ヘッダーメニュー」にチェックを入れて、「メニューを作成」ボタンをクリックしてください。(今回はメニュー名に「header menu」として入力します)

完了すると、下図のように「位置を管理」のタブが追加され、投稿ページや固定ページ、カスタムリンクなどを自由に設定できるようになります。

下図のように、固定ページの任意のページにチェックを入れて、「メニューを追加」ボタンをクリックしてください。
これで、チェックを入れて選択したページが「ヘッダーメニュー」の位置に表示されるメニューとして追加されます。
ここでは例として固定ページを選択しておりますが、他の「投稿」や「カスタムリンク」、「カテゴリー」などから選択して表示することも可能ですので、お好きなページを設定してみてください。

すると、下図のように右側の「メニュー構造」にチェックを入れたページが追加されたのが視覚的にわかるかと思います。
確認できたら、「メニューを保存」ボタンをクリックしてください。

フロントページの表示を確認していただくと、下図のように選択したページのテキストリンクが表示されているのが確認できるかと思います。

これでメニュー機能の動き自体はご確認いただけたかと思います。
もし「フッターメニュー」にも表示させたい場合は、これまでのメニューの設定の手順に加え、以下のコードをfooter.phpなどのフッターの役割のあるPHPテンプレートにコピー&ペーストしてください。
<?php
wp_nav_menu(
array(
'theme_location' => 'footer-menu',
'container' => 'nav',
'menu_class' => 'main-menu'
)
);
上記コードはヘッダーと同様wp_nav_menu()関数を利用しており、パラメータの「theme_location」を「footer-menu」としております。
表示を確認していただくと、ヘッダーの時と同じように下図のように問題なくフッターとして設定したメニューが表示できるようになったかと思います。

CSSでメニューの見た目をデザインする
次に、表示したメニューをデザインするためのCSSコードを記述していきます。
ここではヘッダーメニュー用のCSSコードをご紹介したいと思います。
以下のコードをCSSファイル等にコピー&ペーストしてください。
.main-menu {
list-style: none; /* リストマーカーを非表示 */
margin: 0; /* 外側の余白をリセット */
padding: 0; /* 内側の余白をリセット */
display: flex;
justify-content: center;
text-align: center;
}
.main-menu li {
display: block;
width: 180px;
height: 60px;
position: relative;
}
.main-menu a {
position: relative;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
background-color: #333; /* ナビゲーションの背景色 */
color: #fff;
}
.sub-menu{
display: none;
position: absolute;
margin: 0;
width: 240px;
list-style: none;
padding: 0;
z-index: 99;
text-align: left;
}
.main-menu .sub-menu {
display: block;
}
.main-menu .sub-menu li {
visibility: hidden;
height: 0;
opacity: 0;
}
.main-menu li:hover > ul > li {
visibility: visible;
height: 60px;
opacity: 1;
}
.main-menu .sub-menu .sub-menu li {
display: none;
}
.main-menu .sub-menu li:hover > ul > li {
display: block;
}
.main-menu .sub-menu ul {
top: -60px;
left: 176px;
position: relative;
}
ペーストできたら、下図のようにメニューがデザインされているのが確認できるかと思います。

また、上図を見ていただくと分かる通り、上記CSSコードではメニューを入れ子にした場合にも対応しております。
メニューを入れ子にするとは、下図のように一つのメニュー項目に対して子メニューを設定することをいいます。
設定するときは、子メニューにしたいページを左側に余白を開ける形でドラッグ&ドロップして設定します。

すると、下図のようにCSSが適用されていない場合は下図のようにulタグの中のliタグの中に、さらにulタグが追加される形でHTMLが出力されます。

2段階以上入れ子メニューを設定したときは、下図のように枝葉のように分かれていくようになっております。

CSSコードに記述されている色や横幅は自由にカスタマイズ可能ですので、ぜひご自身のサイトに合うようにカスタマイズしてみてください。
ここで紹介したCSSコードはほんの一例になりますので、そもそもCSSの根本的なところから修正していただいても大丈夫です。
メニュー機能で出力されたメニューをCSSでデザインする場合は、基本的にWordPress側で出力するHTMLコードに沿ってCSSを記述する形になります。
カスタムウォーカークラスで高度にカスタマイズする方法
それでは応用編として、「カスタムウォーカークラス」でメニューのHTMLの出力を高度にカスタマイズする方法について解説いたします。
カスタムウォーカークラスとは、WordPressのメニュー出力を細かく制御し、HTML構造やクラス、属性などを自由にカスタマイズできる仕組みのことをいいます。
デフォルトのwp_nav_menu()関数は十分便利ですが、出力されるHTML構造が固定されているため、特定のデザインや機能を実現するには限界があります。
そこでカスタムウォーカークラスを利用することで、メニュー項目ごとのHTMLを自由に変更したり、追加のクラスや属性を付与したりすることができます。
例えば、特定の条件下でアイコンを追加したり、複雑な多階層メニューを実現したい場合、カスタムウォーカークラスを定義してメニュー構造を動的に生成できます。
それでは実装していきましょう。
まず、カスタムウォーカークラスでの実装をするには、以下のコードをfunctions.phpにコピー&ペーストしてください。
<?php
class My_Custom_Walker extends Walker_Nav_Menu {
public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
$output .= '<li class="custom-class">';
$output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
}
}
上記がいわゆる「カスタムウォーカークラス」になります。
このコードは、WordPressのメニューをカスタマイズするための「カスタムウォーカークラス」の一例です。
Walker_Nav_Menuクラスを拡張してMy_Custom_Walkerという新しいクラスを作成しています。
この中のstart_el()メソッドは、各メニュー項目のHTMLを生成する部分をカスタマイズするものです。
具体的には、メニューの各項目を<li>タグでラップし、その中にリンク(<a>タグ)を追加しています。「$item->url」はリンク先のURL、「$item->title」はリンクテキストを示します。
これにより、すべてのメニュー項目にカスタムクラス「custom-class」が追加され、デザインや機能を自由に拡張できます。このクラスをwp_nav_menu()関数の「walker」オプションに渡すことで有効化されます。
次に以下のコードを、メニューを表示させたいPHPテンプレート(header.phpなど)の表示箇所にコピー&ペーストしてください。
<?php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'walker' => new My_Custom_Walker()
)
);
このコードでは、パラメーターに「’walker’ => new My_Custom_Walker()」が指定されており、WordPressのデフォルトのメニュー出力ではなく、My_Custom_Walkerクラスで定義されたカスタマイズされたHTML構造を使ってメニューが生成されます。
これにより、メニューのHTMLタグやクラス、スタイルを自由に変更でき、独自のデザインや機能を簡単に実装できます。
このカスタムウォーカークラスを利用して、ご自身のサイトに適した形でカスタマイズしましょう。
get_theme_mod(‘nav_menu_locations’)関数は、WordPressでテーマに登録されたメニューの位置(ロケーション)と、各ロケーションに割り当てられたメニューIDの情報を取得するための関数です。
この関数は、register_nav_menus()関数等で定義されたメニュー位置と、それに関連付けられたメニューの設定値を取得する際に使われます。
それでは早速、get_theme_mod(‘nav_menu_locations’)関数がどういう形でデータを取得しているのかを確認してみましょう。
以下のコードをheader.phpなどのPHPテンプレートファイルにコピー&ペーストしてください。
<?php
// 'nav_menu_locations' の値を取得
$menu_locations = get_theme_mod('nav_menu_locations');
// 結果を画面に表示
echo '<pre>';
print_r($menu_locations);
echo '</pre>';
上記の出力結果としては、例えば以下のように出力されているのがわかります。
Array
(
[header-menu] => 7
[footer-menu] => 8
)
上記データを踏まえて、以下のようにも取得できます。
<?php
$locations = get_theme_mod('nav_menu_locations');
foreach ($locations as $location => $menu_id) {
echo 'Menu location: ' . $location . ' - Menu ID: ' . $menu_id . '<br>';
}
表示を確認すると、下図のように表示できているかと思います。

このget_theme_mod(‘nav_menu_locations’)関数の使い道としては本当にさまざまですが、例えば取得したメニューIDを使い、そのメニューの項目を取得して表示したりできます。
<?php
$locations = get_theme_mod('nav_menu_locations');
$header_menu_id = $locations['header-menu'];
if ($header_menu_id) {
$menu_items = wp_get_nav_menu_items($header_menu_id); // メニュー項目を取得
foreach ($menu_items as $item) {
echo '<a href="' . $item->url . '">' . $item->title . '</a>'; // メニューリンクを出力
}
}
また、テーマのアップデート時のマイグレーションの処理だったり、まだまだ高度にカスタマイズできる可能性を秘めた関数となるため、ここで解説いたしました。
まとめ
今回は、WordPressのメニュー機能を自作する方法やの使い方について解説しました。
メニュー機能は、Webサイトには欠かせないヘッダーやフッターにあるグローバルメニューを簡単に設定・管理するための便利な機能です。ソースコードを直接編集する必要がなく、管理画面から手軽に操作できるため、効率的なサイト運営に役立ちます。
この記事を通じて、メニュー機能の基本的な使い方からカスタマイズ、自作までのポイントを網羅しました。
ぜひこの記事を参考にして、より魅力的で使いやすいWebサイトを構築してください。お仕事やプロジェクトの中でお役立ていただければ幸いです。
お気軽に皆さんのご要望をお聞かせください!
どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!
例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など