本ページにはプロモーションが含まれています。
WordPressのメニューの作り方やカスタマイズ方法を解説
![WordPressのメニューの作り方や設定方法を解説](https://plusoneweb.net/wp-content/uploads/2024/06/wordpress-menu-customize.jpg)
WordPressでは、固定ページを作成しただけではヘッダーにメニューが表示されません。
ヘッダーにナビゲーションメニューを追加したり、フッターメニューを追加したいとなった場合、追加で設定が必要です。
今回はWordPressのメニューの作り方・設定方法を詳しく解説します。
WordPressメニューの作成・設定方法
WordPressメニューの作成の流れは以下の通りです。
本例では、ヘッダーメニューを作成・設定する流れで解説していきます。
![本例で表示させたいヘッダーナビゲーションの例](https://plusoneweb.net/wp-content/uploads/2024/06/header-navigation-1024x592.jpg)
- STEP. 1:メニューに追加したいページを事前に作成する
- STEP. 2:メニューを作成し表示位置を設定する
- STEP. 3:メニューに含めたい項目を設定する
STEP. 1:メニューに追加したいページを事前に作成する
まずはメニューに追加したいページを事前に作成しておきましょう。
ここでは「会社概要」「ブログ」「お問い合わせ」の固定ページを準備しておきました。
![](https://plusoneweb.net/wp-content/uploads/2024/06/page-lists-1024x599.jpg)
固定ページの詳しい使い方については以下の記事をご覧下さい。
![](https://plusoneweb.net/wp-content/uploads/2024/06/wordpress-page-300x200.jpg)
STEP. 2:メニューを作成し表示位置を設定する
次に、メニューを作成しましょう。
「外観>メニュー」をクリックします。
![](https://plusoneweb.net/wp-content/uploads/2024/06/exterior-menu.jpg)
任意のメニュー名を設定し、メニューの表示位置を設定してから「メニューを作成」をクリックします。
![](https://plusoneweb.net/wp-content/uploads/2024/06/create-new-menu-1024x619.jpg)
以上で、メニューが作成できました。
STEP. 3:メニューに含めたい項目を設定する
最後にメニューに含めたい項目を追加しましょう。
現時点では、ヘッダーに表示させたいメニューの箱はできているものの、含めたい項目が設定されていないため、依然としてヘッダーには何も表示されていません。
![](https://plusoneweb.net/wp-content/uploads/2024/06/header-menu-box-1024x630.jpg)
そこで、この箱の中に追加したいメニュー項目を左から追加していく必要があります。
「固定ページ」のところで「すべて表示」タブに切り替え、追加したい固定ページにチェックを入れたら「メニューに追加」をクリックします。
![](https://plusoneweb.net/wp-content/uploads/2024/06/add-to-menu-1024x577.jpg)
これで「ヘッダーメニュー」にメニュー項目が追加されました。
あとは、メニューを保存すると、追加されたメニュー項目がヘッダーに表示されます。
![](https://plusoneweb.net/wp-content/uploads/2024/06/menu-item-added-2-1024x680.jpg)
![](https://plusoneweb.net/wp-content/uploads/2024/06/header-menu-1024x592.jpg)
なお、本例では固定ページのみメニューに追加していますが、他にも投稿やカテゴリー、カスタムリンクなどが追加できます。
固定ページ | 公開中の固定ページへのリンクが追加できます。 |
---|---|
投稿 | 公開中の投稿へのリンクが追加できます。 |
カスタムリンク | 任意の文字列のリンクが追加できます。 |
カテゴリー | 投稿に紐づいたカテゴリー一覧へのリンクが追加できます。 |
WordPressメニューのカスタマイズ方法
作成したメニューのカスタマイズ方法は以下の通りです。
- ドロップダウンメニューを作成する方法
- メニュー項目がクリックされると別タブで表示させる方法
ドロップダウンメニューを作成する方法
メニュー項目を階層化することで、ヘッダーであればドロップダウン形式でメニューを表示させることができます。
![](https://plusoneweb.net/wp-content/uploads/2024/06/dropdown-menu-1024x605.jpg)
まずは、メニュー項目を全て追加します。
![](https://plusoneweb.net/wp-content/uploads/2024/06/add-all-menu-items-1-1024x680.jpg)
次に、ドロップダウン形式で表示させたいメニューをドラッグ操作で一段ずらして階層化します。
![](https://plusoneweb.net/wp-content/uploads/2024/06/make-sub-menu-1024x679.jpg)
これで一段ずらしになったところがドロップダウンメニューとして表示されます。
メニュー項目がクリックされると別タブで表示させる方法
カスタムリンクで追加した外部サイトへのリンクのみ、別タブで表示させたいという場合があるかもしれません。
その場合は、まず「表示オプション」を開き、「リンクターゲット」にチェックを入れます。
![](https://plusoneweb.net/wp-content/uploads/2024/06/link-target-1024x576.jpg)
そうすると、「リンクを新しいタブで開く」のチェックボックスが表示されるので、こちらにチェックします。
![](https://plusoneweb.net/wp-content/uploads/2024/06/target-blank-setting-1024x649.jpg)
これでリンクがクリックされると別タブが開くようになります。
ヘッダー・フッターごとに異なるメニューを表示させる方法
複数のメニューを作成し、ヘッダーやフッター毎に異なるメニューを表示させることができます。
すでにメニューを1つ以上作成している場合は、「新しいメニューを作成しましょう」のリンクから新しいメニューが作成できます。
![](https://plusoneweb.net/wp-content/uploads/2024/06/create-new-menu-1-1024x651.jpg)
新規で作成するメニューの名前を「フッターメニュー」とし、今回は「メニューの位置」を「Footer Navigation」にしておきましょう。
![](https://plusoneweb.net/wp-content/uploads/2024/06/footer-menu-1024x624.jpg)
ヘッダーメニューのときと同様、メニュー項目を追加し「メニューを保存」をクリックします。
![](https://plusoneweb.net/wp-content/uploads/2024/06/footer-menu-added-1024x697.jpg)
以上で、ヘッダーにはヘッダーメニュー、フッターにはフッターメニューを表示させることができました。
![](https://plusoneweb.net/wp-content/uploads/2024/06/footer-menu-1-1024x633.jpg)
なお、各メニュー位置でどのメニューが選択されているかの確認は、「外観>メニュー」の「位置を管理」タブから確認できます。
![](https://plusoneweb.net/wp-content/uploads/2024/06/manage-menu-location-1024x642.jpg)
WordPressメニューに関するよくある質問
まとめ
今回はWordPressのメニューの作り方やカスタマイズ方法を詳しく解説しました。
WordPressで固定ページを作成した後は、ぜひ本記事を参考にヘッダーやフッターにメニューを表示させてみて下さい。
今回は以上になります。最後までご覧頂き、ありがとうございました。