当記事では上記のような疑問を解決できるよう、 WordPressテーマのメニュー設定の基本と設定方法について説明しています。
テーマで設定されているメニューとは
下図の赤枠のようにWebサイトのレイアウトの中でどこの箇所にメニュー設定ができるのかテーマにより異なります。
![WordPressのメニュー設定個所。自作テーマの例](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-120.jpg)
![WordPressのメニュー設定個所。Twenty Twenty-Oneの例](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-110.jpg)
メニューを設定する場所は管理画面の中に2か所ある(テーマカスタマイザーと標準のメニュー設定画面)
管理画面の中でメニューを設定する場所は下図の2か所です。
※WordPress 5.8.3の画面です。
どちらの画面で操作を行っても同じことです。
![WordPressメニューを設定する場所。テーマカスタマイザー画面](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-01.jpg)
テーマカスタマイザー
![WordPressメニューを設定する場所。標準のメニュー設定画面](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-02.jpg)
標準のメニュー設定画面
当記事ではTwenty Twenty-Oneのテーマを例に、標準のメニュー設定で説明を進めます。
(※WordPressバージョン 5.8.3の画面です。)
![WordPressメニューを設定する場所。Twenty Twenty-Oneのテーマの例](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-07.jpg)
WordPressのバージョンやあなたが有効化しているテーマにより表示は異なりますが、概念は共通ですので参考にしていただけると思います。
メニュー設定の準備
メニューに表示させるページを作成する
準備として、あらかじめメニューに表示させるページを作成しておきます。
ここでは固定ページで作成しました。
![WordPressメニューに表示させるページを作成する](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-05.png)
テーマ内のメニューの表示位置を確認する
Twenty Twenty-Oneでは下図の位置にメニューが配置できるようになっています。
あなたのお使いのテーマでも確認してみて下さい。
![WordPressテーマ内のメニューの表示位置を確認する](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-02.jpg)
メニューの設定方法
外観 > メニュー からメニュー設定にいきます。
ここではヘッダー(Webサイトのページ上部)に配置するメインメニューを作成しながら説明します。
- メニュー名
ここでの名前は任意ですが、テーマ側で指定しているメニュー名と合わせておくと管理しやすいです。 - メニューの位置
メインメニューにチェックを入れる。 - メニューを作成をクリック。
![WordPressメニューの設定方法](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-01-2.jpg)
メニュー項目を追加する
メニュー構造(下図の右側エリア)にメニュー項目を追加できるようになります。
メニューに表示させたいページにチェックを入れメニューに追加を実行。
![WordPressメニューの設定方法・メニュー項目を追加する](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-03.jpg)
メニュー構造のエリアにメニュー項目が追加されました。
![WordPressメニューの設定方法・メニュー項目を追加した画面](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-04.jpg)
メニュー項目エリアにあるカスタムリンクを利用してホームへのメニューを作成します。
開閉ボタンでカスタムリンクを開き、トップページのURLとリンク文字列を入力後、メニューに追加を実行するとメニュー構造エリアに追加されます。
![WordPressメニューの設定方法・カスタムリンクの設定](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-05.jpg)
この例ではメニュー項目の固定ページとカスタムリンクを利用しましたが、投稿やカテゴリーもメニューに追加できます。
メニュー項目順の変更と保存
メニュー項目の順番はドラッグ&ドロップで変更できます。
完了したらメニューを保存してサイト表示を確認してみましょう。
![WordPressメニュー項目順の変更と保存方法の説明アニメーション](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-01.gif)
メニュー項目の編集
メニュー項目を編集するには各項目を開いて行います。
編集と削除ができます。
一番左下のメニューを削除は作成したメニュー自体(この例ではメインメニュー)が削除されますので注意しましょう。
![WordPressメニュー項目の編集](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-01.png)
2つめのメニュー(サブメニュー)の作成
新しいメニューを作成しましょうをクリックして2つめのメニュー(サブメニュー)の作成ができます。
![WordPressの新しいメニューを作成](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-02.png)
以降、メニュー作成手順はメインメニューと同じです。
![WordPressの新しいメニューを作成・保存](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-de-03.png)
作成したメニューを後から編集する
作成したメニューを後から編集する操作は少しだけコツがあります。
例えば、サブメニューを編集する場合、編集するメニューを選択でサブメニューを選び、選択ボタンをクリックすることでサブメニューを編集に切り替わります。
サブメニューを選んだだけでは画面は切り替わらず、 選択ボタンをクリックする必要があるんですね。
「サブメニューを選んでも編集エリアに切り替わらない」という質問がよくあるのでアニメーションで説明してみました。
![](https://womanual.me/wpmain/wp-content/uploads/2022/01/menu-03.gif)
以上、WordPressのメニュー機能について説明しました。