WordPress 個人レッスン 現在満席です。

WordPressテーマのメニューの設定方法

  • WordPressテーマのメニューの設定方法を知りたい。
  • メニューの設定画面を開いたがテーマとの関連がよくわからない。

当記事では上記のような疑問を解決できるよう、 WordPressテーマのメニュー設定の基本と設定方法について説明しています。

テーマで設定されているメニューとは

下図の赤枠のようにWebサイトのレイアウトの中でどこの箇所にメニュー設定ができるのかテーマにより異なります

WordPressのメニュー設定個所。自作テーマの例
自作テーマの事例
WordPressのメニュー設定個所。Twenty Twenty-Oneの例
Twenty Twenty-Oneの例

メニューを設定する場所は管理画面の中に2か所ある(テーマカスタマイザーと標準のメニュー設定画面)

2022.03.17追記
設定メニューが表示されていない人へ
WordPress 5.9から、デフォルトテーマがブロックテーマになりました。
クラシックテーマを有効化することで設定メニューが表示されます。
下記の記事を参照ください。

管理画面の中でメニューを設定する場所は下図の2か所です。
※WordPress 5.8.3の画面です。

どちらの画面で操作を行っても同じことです。

WordPressメニューを設定する場所。テーマカスタマイザー画面
外観 > カスタマイズ > メニュー
テーマカスタマイザー
WordPressメニューを設定する場所。標準のメニュー設定画面
外観 > メニュー
標準のメニュー設定画面

テーマカスタマイザーはテーマ側でサポートしている必要があります。
サポートされていないテーマの場合は標準のメニュー設定画面(上記画像右側)を利用します。

当記事ではTwenty Twenty-Oneのテーマを例に、標準のメニュー設定で説明を進めます。
(※WordPressバージョン 5.8.3の画面です。)

WordPressメニューを設定する場所。Twenty Twenty-Oneのテーマの例
メニュー設定後の最終画面

WordPressのバージョンやあなたが有効化しているテーマにより表示は異なりますが、概念は共通ですので参考にしていただけると思います。

メニュー設定の準備

メニューに表示させるページを作成する

準備として、あらかじめメニューに表示させるページを作成しておきます。
ここでは固定ページで作成しました。

WordPressメニューに表示させるページを作成する

テーマ内のメニューの表示位置を確認する

Twenty Twenty-Oneでは下図の位置にメニューが配置できるようになっています。
あなたのお使いのテーマでも確認してみて下さい。

WordPressテーマ内のメニューの表示位置を確認する

メニューの設定方法

外観 > メニュー からメニュー設定にいきます。

ここではヘッダー(Webサイトのページ上部)に配置するメインメニューを作成しながら説明します。

  1. メニュー名
    ここでの名前は任意ですが、テーマ側で指定しているメニュー名と合わせておくと管理しやすいです。
  2. メニューの位置
    メインメニューにチェックを入れる。
  3. メニューを作成をクリック。
WordPressメニューの設定方法

メニュー項目を追加する

メニュー構造(下図の右側エリア)にメニュー項目を追加できるようになります。
メニューに表示させたいページにチェックを入れメニューに追加を実行。

WordPressメニューの設定方法・メニュー項目を追加する

メニュー構造のエリアにメニュー項目が追加されました。

WordPressメニューの設定方法・メニュー項目を追加した画面

メニュー項目エリアにあるカスタムリンクを利用してホームへのメニューを作成します。

開閉ボタンでカスタムリンクを開き、トップページのURLリンク文字列を入力後、メニューに追加を実行するとメニュー構造エリアに追加されます。

WordPressメニューの設定方法・カスタムリンクの設定

この例ではメニュー項目固定ページカスタムリンクを利用しましたが、投稿カテゴリーもメニューに追加できます。

メニュー項目順の変更と保存

メニュー項目の順番はドラッグ&ドロップで変更できます。
完了したらメニューを保存してサイト表示を確認してみましょう。

WordPressメニュー項目順の変更と保存方法の説明アニメーション
メニュー項目順の変更と保存 40秒のアニメーション

メニュー項目の編集

メニュー項目を編集するには各項目を開いて行います。
編集と削除ができます。

一番左下のメニューを削除は作成したメニュー自体(この例ではメインメニュー)が削除されますので注意しましょう。

WordPressメニュー項目の編集

2つめのメニュー(サブメニュー)の作成

新しいメニューを作成しましょうをクリックして2つめのメニュー(サブメニュー)の作成ができます。

WordPressの新しいメニューを作成

以降、メニュー作成手順はメインメニューと同じです。

WordPressの新しいメニューを作成・保存

作成したメニューを後から編集する

作成したメニューを後から編集する操作は少しだけコツがあります。

例えば、サブメニューを編集する場合、編集するメニューを選択でサブメニューを選び、選択ボタンをクリックすることでサブメニューを編集に切り替わります。

サブメニューを選んだだけでは画面は切り替わらず、 選択ボタンをクリックする必要があるんですね。

サブメニューを選んでも編集エリアに切り替わらない」という質問がよくあるのでアニメーションで説明してみました。

作成したメニューを後から編集する方法 アニメーション12秒


以上、WordPressのメニュー機能について説明しました。

WordPress.org 日本語公式関連ページ

URLをコピーしました!