【WordPress】メニューの使い方と作成方法を解説【コードあり】

今回は、WordPressでメニューを作成する方法と、使い方について解説していきます。

#wordpressテーマ制作

3日くらい試行錯誤してようやくハンバーガーメニューを実装できました。

疲れた・・・。

ちなみに、使用したのはdrawer.jsです。 pic.twitter.com/RMaOvBAW1K

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) January 21, 2020

メニューの使い方がわからない・・・

サイトにメニューを表示したい

という方は、本記事が参考になるはずです。

【WordPress】メニューの使い方と作成方法を解説【コードあり】

具体的な手順は、以下の通りです。

1. 管理画面にログインして「外観 → メニュー」に移動
2. 新規メニューを作成
3. メニューの名前を入力する
4. メニューに表示したいコンテンツを選ぶ
5. メニューの位置を設定する

順番に解説していきます。

管理画面にログインして「外観 →メニュー 」に移動

まず、管理画面にログインして「外観 → メニュー」に移動します。

新規メニューを作成

次に、新しいメニューを作成します。

「新しいメニューを作成しましょう。」をクリックして、メニュー作成画面に移動します。

メニューの名前を入力する

メニューの名前を入力して、「メニューを作成」をクリックします。

メニューに表示したいコンテンツを選ぶ

メニューに表示したいコンテンツを選びます。

選べるコンテンツは、

• 投稿記事
• 固定ページ
• カテゴリー
• カスタムリンク

です。

カスタムリンクはリンク先を自由に決められるので、記事、固定ページ、カテゴリー以外にもリンク先を指定できます。

また、メニューとしてサイトに表示されるリンク名も自由に決めることができます。

メニューの位置を設定する

「メニューの位置」から、表示したい位置を選びます。

メニューの位置は、使っているテーマによって変わりますが、例えばWordPressテーマ「SIMPLE」では以下の4つの位置を選択できます。

• ハンバーガーメニュー
• ヘッダースライドメニュー
• ピックアップコンテンツ
• スマートフォン下部メニュー

「メニューを保存」をクリックすると、選択したメニューの位置に作ったメニューが表示されます。↓は、「ハンバーガーメニュー」を選択した場合の例になります。

サイト内の任意の位置にメニューを表示させるには？

前述しましたが、メニューの位置は使っているテーマによって決まってしまいます。

そのため、このままの状態だと、あらかじめ決められた位置にしかメニューを表示することができません。

ですが、テーマのphpファイルを少しいじれば、任意の位置にメニューを表示させることが可能になります。

そのため

サイトのここにメニューを表示させたいけど、テーマが対応していない・・・

といった問題も解決できます。

では、さっそく解説していきます。

新しい「メニューの位置」を登録する

まずは、新しい「メニューの位置」を登録します。

テーマディレクトリ直下に「functions.php」があるので、このファイルに下記のコードを追加します。

<?php

register_nav_menus(array(
		'new-menu' => '新しいメニューの位置'
	)
);

この時点で、WordPress管理画面の「外観→メニュー」ページに行くと、メニューの位置が増えているはずです。

メニューを表示したい場所にコードを追加する

次に、メニューを表示したい場所に下記のコードを追加します。

<?php

<nav class="new-menu">
	<?php wp_nav_menu( array( 'theme_location' => 'new-menu' , 'fallback_cb' => 'false' ) ); ?>
</nav>

ヘッダーに表示したいなら「header.php」、投稿記事内なら「single.php」にコードを追加する感じです。

あとは、WordPress管理画面でメニューを作成して「新しいメニューの位置」のチェックボックスにチェックを入れれば、メニューが表示されます。

以上になります。本記事を参考にして、メニューを最大限活用してみてください。