![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/cb9962b18ce5bdfe4262a735a668bd70-150x150.jpg)
こばゆた
ヘッダーやフッタなどに使われるナビゲーションメニュー(以下ナビメニュー)を作成します
![ナビメニュー編集前](https://kbyt-programming.com/wp-content/uploads/2021/05/2a693f48e186c99330a9af739db466dd-e1620908528267-1024x92.png)
1.ナビメニューを作る前に
WordPressでヘッダーメニューやフッターメニューを作成するには「ダッシュボード」→「外観」から作成しますが、自作テーマですと設定画面には「メニュー」の項目はありません。
![メニュー作成前](https://kbyt-programming.com/wp-content/uploads/2021/03/ab8aba82582850cf54c874c68f7f09c9.png)
2.functions.phpにコードを記入する
機能を増やすのはこちらでも見ましたが”add_theme_support”をfunctions.phpへ書くことでナビメニューがカスタマイズできるようになります。
add_theme_support('menus');
再びダッシュボードに戻ってみると「外観」の中に「メニュー」の欄ができています。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/cb9962b18ce5bdfe4262a735a668bd70.jpg)
こばゆた
これでメニューを作成できるようになりました!
![メニュー作成後](https://kbyt-programming.com/wp-content/uploads/2021/03/78d2a2ae96d2e3c575fe196b8c1a0485-e1615611945226.png)
3.メニューをカスタマイズする
メニューをアレンジできるようになったので早速作成していきます。
メニューのカスタマイズの仕方
- STEP1メニューをカスタマイズする
メニューの名前をつけて、「メニューを作成」をクリックします。
今回は「ヘッダーメニュー」という名前をつけました。 - STEP2メニューを作成するメニューに入れたい項目を選んで「メニューに追加」→「メニューを保存」をクリックします。
ドラッグで順番を変えられます。
以上でメニューができましたのでサイトの方に反映をしていきます。
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を適用してもいいですがややこしくなるのでパラメータを変更してからいじる方が良いと思います。
こちらも参照してみてください↓
今回はヘッダーのナビのある場所に入れますが場所を間違うとスタイルが効かないのでよく見て入れましょう。(自分で作ったサイトなら迷うことは少ないですが他の人が作ったサイトだとたまにわかりにくいかも…)
<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を修正して完成です。
![ヘッダーナビの完成画像](https://kbyt-programming.com/wp-content/uploads/2021/05/0393d1f7405b17f385191261ac3c7a3f-1024x94.png)
また一応できましたが今回の完成版にはリンクの下に小さいタイトルが入っています。
![ナビメニュー編集前](https://kbyt-programming.com/wp-content/uploads/2021/05/2a693f48e186c99330a9af739db466dd-e1620908528267-1024x92.png)
そちらについてはこちらの記事で解説しています。
6.まとめ
ナビメニューまとめ
1.「ダッシュボード」に「メニュー」を表示させるためにfunctions.phpにコードを記入
add_theme_support('menus');
2.メニューを作成する
3.メニューを入れたい場所にタグを入れる
<?php wp_nav_menu(); ?>
コメント