【WordPress化】ナビゲーションメニューを作成する【register_nav_menu】

こばゆた

ヘッダーやフッタなどに使われるナビゲーションメニュー(以下ナビメニュー)を作成します

オリジナルテーマでナビメニューをわざわざ作る必要もないかと思う方もいるかと思いますが、クライアント様やパソコン操作にあまり詳しくない方でも感覚的に操作・編集できるので一手間はかかりますができる様にしておくと良いと思います。

1.functions.phpにコードを記入する

WordPressでヘッダーメニューやフッターメニューを作成するには「ダッシュボード」→「外観」から作成しますが、自作テーマですと設定画面には「メニュー」の項目はありません。

そこでナビメニューを編集できる様にするには以下のコードをfunctions.phpへ書きます。
これでナビメニューがカスタマイズできるようになります。

register_nav_menu('main-menu', 'ヘッダーメニュー');

またフッターやサイドバーにもメニューを作成する場合や将来的に増やす場合は以下のコードを使用します。

register_nav_menus(array(
  'main-menu'=> 'メインメニュー',
  'footer-menu'=> 'フッターメニュー',
  'side-menu'=> 'サイドメニュー',
));

単一ではmenu,複数ではmenusになっていることに注意してください。

コードを記述して再びダッシュボードに戻ってみると「外観」の中に「メニュー」の欄ができています。

こばゆた

これでメニューを作成できるようになりました！

2.メニューをカスタマイズする

メニューをアレンジできるようになったので早速作成していきます。

以上でメニューができましたのでサイトの方に反映をしていきます。

3.ナビメニューを入れたい場所にコードを記入する

ナビを入れたい箇所に以下のコードを記入します。

<?php wp_nav_menu(); ?>

上記のコードを入れるとデフォルトで以下のようなコードが入ります。

<div class="menu-メニュー名-container">
  <ul class="menu">
    <li class="menu-item"><a href=""></a></li>
    <li class="menu-item"><a href=""></a></li>
    <li class="menu-item"><a href=""></a></li>
  </ul>
</div>

なお余談ですがdivのクラス名の”menu-メニュー名-container”のメニュー名の箇所はメニュー作成時にメニュー名を日本語にすると文字化けするようです。
ですので今回の例ですと文字化けしておりますw

余談終了

そしてこちらにCSSを適用して完成です。

また一応できましたが今回の完成版にはリンクの下に小さいタイトルが入っています。

そちらについてはこちらの記事で解説しています。

【WordPress】ナビゲーションメニューを使った時に２列にする方法

リンクの下に小さいタイトルが入っている、ナビメニューもよく見かけると思います。その作成方法を解説しています。

kbyt-programming.com

2021年10月03日

またもっと柔軟に作成したい場合はこちらも参照してみてください↓

【WordPress】ナビメニューをパラメータでカスタマイズする【wp_nav_menu】

wp_nav_menuを使用した時のパラーメータについて解説しております。これで柔軟なナビメニューが作成できるでしょう。

kbyt-programming.com

2025年03月28日

4.まとめ

register_nav_menu('main-menu', 'ヘッダーメニュー');

<?php wp_nav_menu(); ?>