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

こばゆた

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

1.ナビメニューを作る前に

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

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

機能を増やすのはこちらでも見ましたが”add_theme_support”をfunctions.phpへ書くことでナビメニューがカスタマイズできるようになります。

add_theme_support('menus');

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

こばゆた

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

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

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

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

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

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

<?php wp_nav_menu(); ?>

ちなみにこのコードを入れるとデフォルトで以下のようなコードが入ります。(idとクラス名は省いてあります)

<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

これにCSSを適用してもいいですがややこしくなるのでパラメータを変更してからいじる方が良いと思います。

こちらも参照してみてください↓

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

通常のナビメニューなら以前の記事で書いた方法で作成できますが、CSSを使ったりして機能を細かくカスタマイズすることでさらに拡張性を上げることができます。

kbyt-programming.com

2021年10月03日

今回はヘッダーのナビのある場所に入れますが場所を間違うとスタイルが効かないのでよく見て入れましょう。(自分で作ったサイトなら迷うことは少ないですが他の人が作ったサイトだとたまにわかりにくいかも…)

<nav id="mainNav">
  <div class="inner">
    <a class="menu" id="menu"><span>MENU</span></a>
    <div class="panel">

      <!-- ここに入れる -->
      <?php wp_nav_menu(); ?>

    </div>
  </div>
</nav>

今回の場合は少しCSSを修正して完成です。

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

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

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

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

kbyt-programming.com

2021年10月03日

6.まとめ

add_theme_support('menus');

<?php wp_nav_menu(); ?>