メニューの作成と設定

WordPressメニュー機能について説明します。Webサイトにおけるメニューには、重要な役割が2つあります。この記事では、メニューの作成方法だけでなく、設定前にやるべきこと、知っておくべきことについても解説しています。

目次

WordPressのメニューとは?

一般的なWebサイトの「メニュー」とは、サイト上部(ヘッダー)に表示される、主要なページへのリンクのことです。WordPressには、簡単な操作でメニューを作成できる機能があります。

グローバルメニューの表示例
メニューの表示例

Webサイトのメニューは「グローバルナビゲーション」「グローバルメニュー」「メニューバー」「ヘッダーメニュー」「ヘッダーナビ」などとも呼ばれます。

この記事では、WordPress管理画面のメニュー(ナビゲーションメニュー)については取り扱いません。

管理画面のナビゲーションメニューについて知りたい場合は、下記ページをお読みください。

>> WordPress管理画面の基本と使い方

WordPress管理画面のナビゲーションメニュー
WordPress管理画面のナビゲーションメニュー

メニューのデザインと配置

メニューがどのようなデザインで表示されるかは、使用しているテーマによって異なります。たとえば、このサイトで使っている「SWELL」というテーマでは、メニューのレイアウトやデザインを細かく設定することができます。

SWELLのカスタマイザー>ヘッダー
「SWELL」メニュー設定機能の一例

>> SWELLの機能一覧を見る

また、メニューを配置できる場所についても、テーマによって異なります。ヘッダーのほか、サイドバーやフッター内にメニューを表示できる場合もあります。

Webサイトのレイアウト例
Webサイトのレイアウトの一例。
テーマによっては、サイドバーやフッターにもメニューを設置できる。

メニューの役割

メニューには、重要な役割が2つあります。

  • 訪問者が探しているページを見つけやすくする
  • 検索エンジンに重要なページを伝えやすくする

メニューを作成することによって、サイト訪問者の誘導がスムーズになるだけでなく、SEO(検索結果で上位表示されるための対策)の効果も期待できます。Googleの公式ページでは、メニューの役割について以下のように記載されています。

ウェブサイトのナビゲーションは、訪問者が必要とするコンテンツをすばやく見つけるうえで重要です。また、ウェブサイトの所有者が重要と考えるコンテンツを検索エンジンが理解するのに役立ちます。Google の検索結果はページレベルで提供されますが、Google はサイト全体でそのページがどのような役割を果たしているかも把握しようとします。

検索エンジン最適化(SEO)スターター ガイド

メニューを設定する前に

メニューの作成前にやるべきことや、知っておきたいことについて見ておきましょう。

準備しておくこと

通常、メニューの項目には自分のサイト内ページへのリンクを設定します。

WordPressで作成できるメニューの項目には、以下のサイト内ページへのリンクを指定できます。異なる種類のページ(例:固定ページとカテゴリーページ)を組み合わせることも可能です。

  • 固定ページ
  • 投稿
  • カテゴリーページ
  • タグページ

つまり、メニューに表示させたいページを事前に公開しておく必要があります。

「固定ページ」と「投稿」

どちらも、WordPressで記事を編集する機能です。固定ページはサイトの定位置に表示させるページ(問い合わせページやプライバシーポリシーなど)の作成に、投稿は更新頻度の高い記事(ブログ記事やお知らせなど)の作成に向いています。くわしくは、投稿と固定ページの違いをお読みください。

「カテゴリーページ」と「タグページ」

同じカテゴリー(またはタグ)が設定された投稿の一覧ページのことです。カテゴリーやタグは、どちらも投稿を分類するために使います。くわしくは、カテゴリーとタグの違いをお読みください。

メニュー項目には、サイト内のページだけでなく、外部サイトへのリンクも指定することができます。設定には、のちほど「メニュー設定の基本操作」で説明する「カスタムリンク」を使います。

設定画面の開き方

WordPressでメニューを設定するには、管理画面[外観]>[メニュー]をクリックします。

管理画面[外観]>[メニュー]をクリック

ライブプレビューでのメニュー設定について

メニュー設定画面の[ライブプレビューで管理]をクリックすると、ライブプレビュー画面が開きます。

メニュー設定画面[ライブプレビューで管理]をクリック

ライブプレビューでは、設定によってメニューがどのように表示されるのかを、リアルタイムで確認することができます。

テーマカスタマイザー「メニュー」
「SWELL」テーマ利用時のライブプレビュー

ライブプレビューは、リアルタイムで設定内容を確認できて便利ですが、動作が重くなる場合があります。この記事では、管理画面[外観]>[メニュー]をクリックして開く設定画面の使い方を解説します。

メニューを設定するための基本的な操作として、以下の6つをマスターしましょう。

初めてメニューを作成する場合は、以下の画面が表示されます。メニュー名を入力し[メニューを作成]をクリックします。

メニュー名を入力し[メニューを作成]をクリック

2つめ以降のメニューを作成する場合

まず最初に「新しいメニューを作成しましょう」をクリックしてから、メニュー名を入力してください。

「新しいメニューを作成しましょう」をクリック

初期状態では、以下のページからメニュー項目を追加することができます(テーマ「SWELL」利用の場合)。

SWELL利用時に追加できるメニュー項目
  • 固定ページ
  • 投稿
  • LP(SWELL独自の機能)
  • カスタムリンク
  • カテゴリー

固定ページ

公開済みの固定ページをメニュー項目として追加できます。初期状態では「最近」公開したページの一覧が表示されています。追加したいページが見つからない場合は、「すべて表示」「検索」から探してください。

メニュー項目の追加「固定ページ」の「最近」「すべて表示」「検索」タブ

メニュー項目に追加したい固定ページを選択(複数をまとめて選択可)し、[メニューに追加]ボタンをクリックします。

固定ページを選択し[メニューに追加]をクリック

投稿

公開済みの投稿をメニュー項目として追加できます。手順は、固定ページの追加方法と同様です。

LP(SWELL独自の機能)

LPは、テーマ「SWELL」利用時に使える機能です。LP(ランディングページ)とは、サイト訪問者のアクション(商品の購入、サービスの申込、問い合わせなど)を促すためのページのことです。

LPをメニュー項目として追加する手順は、固定ページや投稿の追加方法と同様です。

>> SWELLの「LP機能」の使い方(SWELL公式ページ)

カスタムリンク

カスタムリンクを利用すると、任意のURLをリンク先としたメニュー項目を追加できます。

カスタムリンクは、主に外部サイトのWebページに対してリンクを貼るときに使います。たとえば、ご自身が運営する別のサイトやFacebookページなどに誘導することができます。

[URL]と[リンク文字列]を入力し、[メニューに追加]ボタンをクリックします。

URLとリンク文字列を入力し[メニューに追加]をクリック
カスタムリンクの入力例

カテゴリー

カテゴリーページをメニュー項目として追加できます。初期状態では「よく使うもの」の一覧が表示されています。追加したいカテゴリーが見つからない場合は、「すべて表示」「検索」から探してください。

メニュー項目の追加「カテゴリー」の「よく使うもの」「すべて表示」「検索」タブ

メニュー項目に追加したいカテゴリーを選択(複数をまとめて選択可)し、[メニューに追加]ボタンをクリックします。

カテゴリーを選択し[メニューに追加]をクリック

タグ

初期状態では、タグページを追加するための表示がありません。タグページをメニュー項目として追加するには、画面右上の[表示オプション]>[タグ]をクリックします。

[表示オプション]>[タグ]をクリック

あとの手順は、カテゴリーの追加方法と同様です。

メニュー項目を上下にドラッグ&ドロップすることで、順番を並べ替えることができます。

メニュー項目をドラッグ&ドロップして並べ替え

項目を左右にドラッグ&ドロップすると、サブメニュー(子メニュー)を設定することができます。

削除したいメニュー項目の右端▼をクリックして、[削除]をクリックします。

メニュー項目の右端▼をクリックして[削除]をクリック

この削除の操作は、項目がメニューに表示されなくなるだけで、ページそのものが削除されるわけではないので安心してください。

画面下の[メニューを削除]をクリックすると、メニュー全体を削除してしまうので注意してください。

作成したメニューを、サイト上のどの位置に表示させるかを選択します。選択できる項目は、使用しているテーマによって異なります。「SWELL」テーマの場合は、以下の6つから選択できます(複数選択可)。

メニューの位置を選択
  • グローバルナビ
  • スマホ用ヘッダー
  • スマホ開閉メニュー内
  • フッター
  • 固定フッター(SP)
  • ピックアップバナー

最後に[メニューを保存]をクリックしたら、メニュー作成が完了します。

[メニューを保存]をクリック

メニュー設定でできること

ここまで、メニュー設定の基本的な操作について説明しました。その他にも、メニュー設定画面では以下の操作をおこなうことができます。

メニュー項目に対して、親子関係を設定することができます。項目をドラッグ&ドロップして右にずらすことで、サブメニュー(子メニュー)に変更できます。下の図の場合、[カテゴリー①]がメインメニューに、[カテゴリー①-2][カテゴリー①-3]がサブメニューに設定されます。

項目を右にずらしてサブメニューに設定できる

サブメニューがサイト上でどのように表示されるかは、使用しているテーマによって異なります。「SWELL」の場合は、メインメニューにマウスを合わせると、下図のようにサブメニューが表示されます。

「SWELL」のサブメニュー表示例

固定ページや投稿などをメニュー項目に設定すると、ページタイトルがそのままサイト上に表示されます。タイトルの文字数が多すぎると、メニュー表示がとても見づらくなってしまいます。

ページタイトルの文字数が多くてメニュー表示が見づらい
投稿のタイトルがそのままメニューに表示されている

メニュー項目の表示名を変更するには、項目の右端▼をクリックして[ナビゲーションラベル]を編集し、メニューを保存します。

メニュー項目の右端▼をクリックし[ナビゲーションラベル]を編集

サイトの表示を確認すると、かなり見やすくなりました。

メニュー項目の表示名変更後

SWELLならグローバルナビに英語表記を追加できる

SWELLでは、メニュー項目の下に小さいサイズの文字を追加することができます。

SWELL公式サイトのグローバルナビ
SWELL公式ページのグローバルナビ

たとえば、メニュー項目の下に英語表記を追加するには、メニュー項目の[説明]に英語を入力します。

メニュー項目の[説明]に文字を入力

[説明]の入力欄が表示されない場合は、画面右上[表示オプション]>[説明]の順にクリックしてください。

WordPressのバージョンによっては、[説明]ではなく[概要]と表記されているかもしれません。

メニュー項目の[リンクを新しいタブで開く]にチェックを入れ、メニューを保存します。

メニュー項目の右端▼をクリックし[リンクを新しいタブで開く]にチェック

[リンクを新しいタブで開く]が表示されない場合は、画面右上[表示オプション]>[リンクターゲット]の順にクリックしてください。

[このメニューに新しいトップレベルページを自動的に追加]にチェックを入れてメニューを保存します。すると、新しく固定ページを公開するたびに、メニュー項目として自動的に追加することができます。

[このメニューに新しいトップレベルページを自動的に追加]にチェック

トップレベルページとは

固定ページには、親子関係を設定することができます。トップレベルページとは、親ページを持たない固定ページのことです。

メニュー設定画面の[位置を管理]タブをクリックすると、「メニューの表示位置」と「指定されたメニュー」の関係を確認、編集することができます。「SWELL」テーマのように、表示位置の数が多い場合に便利です。

メニュー設定画面の[位置を管理]タブをクリック

作成したメニューが不要になった場合は、画面下の[メニューを削除]をクリックします。

メニュー設定画面の[メニューを削除]をクリック

メニューを削除すると、復元できないので注意してください。

まとめ

メニューを設定すると、サイト訪問者がページを探しやすくなるだけでなく、SEO(検索エンジン最適化)の効果も期待できます。

「SWELL」などの高機能テーマを使うと、サイト内のいろんな場所に見栄えのよいメニューを配置させることができます。

  • URLをコピーしました!
目次