ワードプレスの自作テーマを作っていて、

ヘッダーメニューを、設定画面のメニューで指定したものを表示して、カスタマイズできるようにしたいと思いました。

下記のようなHTMLの構造で、動的にメニューを作りたい、そのやり方を書きます。

とはいえ、やり方は簡単です。

まず、上記のようにfunctions.phpに追記してください。これで、設定画面でメニューを選択できるようになります。今回は、二つのメニューを設定してるのが分かりますね。

画像のように、表示されるようになります。

次に、my-custom-menuというメニューを、header.phpに表示してみましょう。

上記のように書けばいいです。こうすれば、WordPress設定画面で、my-custom-menuに対して作ったメニューが、header.phpに表示されるようになります。

my-custom-menuという名前は、なんでもいいので、header-menuとかにしてもいいですし、なんでもokです。

いい感じですねー。

参考

CSS-Tricks

 

1 User

29 Pockets

Remove LI Elements From Output of wp_nav_menu

https://css-tricks.com/snippets/wordpress/remove-li-elements-from-output-of-wp_nav_menu/

You can remove or change the container that you get by default with wp_nav_menu (codex) through parameters, but you can't remove the elements that wrap