fbpx
WordPressの使い方
WordPressの使い方『メニューの作り方』

WordPress『メニュー』の作り方と編集する方法

様々なサイトの画面上部や下部にメニューが表示されていますよね。
メニューでは主にサイトの主要なコンテンツを配置することが多いかと思います。
こちらの記事ではサイトに表示されるメニューをどの様に設定、編集するのかを詳しく説明していきます。

WordPressのことをもっと知りたい場合はWordPressの使い方の記事を見てください。

ここで言うメニューとはどの部分をさすのか

メニュー編集ページへの行き方

メニュー編集のページへの行き方

画面左側のバーの中の『外観』にカーソルを当て、出て来たボックスの中の『メニュー』をクリックします。

サイトのメニューが何も設定されていない状態の時のメニュー編集画面

するとこの様な画面表示になります。
この表示の状態は、まだサイトにメニューが無い状態です。

メニューの設定をしないと固定ページが自動で表示される

デフォルトでは固定ページがメニューに表示されている説明

こちらは固定ページ一覧の画面です。
※現在まだメニューの編集は行なっていない状態です。

固定ページがメニューの場所に表示されている時のサイト画面

メニューの設定をしていないので固定ページが自動でサイトの上部に表示されています。
※テーマは『Astra』を使用しています。

メニューを作成する

メニューの編集

『メニュー構造』のセクションの『メニュー名』の右のテキストバーにメニュー名を入力します。
こちらのサンプルではメニュー名を『main』としました。
入力したら『メニューを作成』をクリックします。

メニューにページを追加する

メニューにページを追加する方法

こちらはメニュー作成をクリックした後の表示画面です。
『左カラムからメニューの項目を追加してください。』と表示され、『メニュー項目を追加』(左のカラム)がアクティブになります。

固定ページからメニューを追加する方法

固定ページからメニューを追加する方法
  1. 固定ページの項目から、メニューに追加したいページ名にチェックを入れます。
  2. 『メニューに追加』をクリックします。

※こちらのサンプルでは『Sample Page』を選択し、メニューに追加しました。

参考としてSample Pageをメニューに追加した時の表示画面

すると、左のカラム(メニュー構造)に『Sample Page』が追加されました。

投稿からメニューに追加する方法

投稿からメニューに追加する方法
  1. 『投稿』の横の▽をクリックしタブを開きます。
  2. 投稿の項目から、メニューに追加したい投稿名にチェックを入れます。
  3. 『メニューに追加』をクリックします。

投稿のメニューへ追加の仕方も固定ページの時とやり方は全く同じです。
※こちらのサンプルでは『きのこ狩り』を選択し、メニューに追加しました。

参考として投稿から「きのこ狩り」をメニューに追加した時の表示画面

すると、左のカラム(メニュー構造)の『Sample Page』の下に『きのこ狩り』が追加されました。

カスタムリンクの使い方

カスタムリンクは、メニューに外部サイトなどのリンクを貼りたい時に使います。
そのメニュー名をクリックすれば、そのリンクに飛ぶということです。

※こちらのサンプルではメニュー名を『Google』にし、Googleのリンク(URL)を貼ります。

カスタムリンクの使い方の説明・参考としてgoogleのリンクを貼る
  1. 『カスタムリンク』の横の▽をクリックしタブを開きます。
  2. 『 URL』の横のテキストバーには貼りたいリンクのURLを入力します。
  3. 『リンク文字列』の下のテキストバーには、そのリンクのメニュー名を入力します。
  4. 『メニューに追加』をクリックします。
カスタムリンクでGoogleをメニューに追加した時の表示画面

すると、左のカラム(メニュー構造)の『きのこ狩り』の下に『Google』が追加されました。

カテゴリーからメニューに追加する方法

カテゴリーページをメニューに追加することができます。
やり方は『投稿からメニューに追加する方法』と全く同じなのでそちらを参考にしてください。

カテゴリーからメニューに追加する方法

こちらのサンプルでは、カテゴリから『マッシュルーム』を追加しました。
左のカラム(メニュー構造)の『Google』の下に『マッシュルーム』が追加されました。

メニューの配置の順番を変える方法

メニューの配置の順番をドラッグ&ドロップで変える方法

例えば、『マッシュルーム』を『Sample Page』の次に配置したいとします。
『マッシュルーム』をドラッグ&ドロップして『Sample Page』と『きのこ狩り』の間に持ってきます。

メニューの配置を変えた後の表示画面

するとこの様に簡単にメニューの配置変えが行えます。

ドロップダウンする副項目の作り方

ドロップダウンする副項目の作り方

例えば、『きのこ狩り』を『マッシュルーム』の副項目にするとします。
『きのこ狩り』をドラッグしたまま右にスライドさせます。

副項目ができた時の表示画面

すると、上記画像の様に『きのこ狩り』のタイトルの横に『副項目』と表示され、『マッシュルーム』の下にずれて配置されました。

メニューの設定をする

メニューの設定の仕方

メニュー設定のセクションには

  • 固定ページを自動追加
    このメニューに新しいトップレベルページを自動的に追加
  • メニューの位置
    メインメニュー
    フッターメニュー

とあります。

メインメニューにチェックし、メニューを保存する
  1. 『メインメニュー』にチェックをします。
  2. 『メニューを保存』をクリックします。

フッターメニューを使用している場合はチェックを入れてください。
しかし、テーマにもよります。

メニューの設定後のサイトの表示画面

こちらは実際のサイトの画面です。
画面右上のメニューに左から右にかけて、メニュー構造で上から下に表示されていた項目順で配置されているのがわかると思います。
『マッシュルーム』をドロップダウンさせると、『きのこ狩り』が表示されています。

メニュー編集画面のメニューリストの配置
メニュー構造の編集画面の配置
サイトの表示画面のメニューリストの配置の比較
実際のサイトのメニュー配置

※サンプルのテーマは『Astra』を使用しています。
テーマにより、メニューが表示される場所などは異なります。

固定ページを自動追加はオススメしない!

これをチェックすると、新しい固定ページを作ったら自動的にメニューに追加されます。
サイトの見た目がごちゃごちゃになってしまう可能性があるので、メニューは自分でカスタムし管理していくことをオススメします。


メニューの設定の仕方次第で、サイトの主要コンテンツを見やすくまとめることができます。
サイトは見てくれる人があってのものです。
閲覧者にストレスを与えないためにもしっかり管理し、まとめていきましょう!

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通