メニューの作成と設定

WordPressには、メニュー(ナビゲーションメニュー)を簡単に作成する機能があります。メニューの設置は、訪問者にやさしいサイト作りには欠かせません。このページでは、メニューの作成と設定について基本的な方法を紹介します。

WordPressのメニュー機能とは？

WordPressには、サイト内に表示するメニューを簡単に作成できる機能があります。メニューには、サイト訪問者が目的のページにたどり着きやすくなるという役割があります。

たとえば、このサイトの上部には[基礎知識][導入・準備][基本設定]などのページにアクセスするためのリンクがあります。これもメニューのひとつで、一般的に「ナビゲーションメニュー」「グローバルメニュー」「グローバルナビゲーション」などと呼ばれます。

メニューを作成する主な手順は、次の通りです。

1. メニューに表示するページを作成しておく
2. メニューに表示するページを選択する
3. 選択したページを並べ替える
4. メニューを表示する位置を決定する

メニュー作成手順①メニューに表示するページを作成しておく

　
メニュー作成の前に、あらかじめメニューに表示させたいページを作成しておきます。「投稿」「固定ページ」どちらでも構いません。すでに作成済みの場合は、この手順は読み飛ばしてください。

その他にも、「カテゴリーページ」や「タグページ」などもメニューに加えることができます。

メニュー作成例の説明

今回の例では、下の画像のようなメニューを作成していきます。

企業サイトなどによくある次の1～5を「固定ページ」で作成します。さらに「ブログ」カテゴリーを作成して、そのカテゴリーページをメニューに加えます。計6項目を、下記の順番通りにメニューとして表示させることにします。

1. トップページ
2. 会社案内
3. 製品紹介
4. アクセス
5. お問い合わせ
6. ブログ(カテゴリーページへのリンク)

1～5の固定ページを実際に作成するには、下記を参考にしてください。

• 固定ページの作成方法
• 固定ページをトップページに指定する方法
• Googleマップを表示させる方法
• Contact Form 7 （メールフォーム作成プラグイン）

メニュー作成手順②メニューに表示させるページを選択する

メニューに表示させるページを選択するには、管理画面[外観]＞[メニュー]をクリックします。

メニュー名を入力します。今回は「グローバルメニュー」としました。入力できたら、メニューを作成をクリックします。

メニューに表示させるページを選択します。初期状態では、

• 固定ページ
• 投稿
• カスタムリンク
• カテゴリー

から選ぶことができます。

「タグページ」を選択するには？
先ほど「タグページもメニューに加えることができます」と紹介しましたが、初期状態では選択することができません。解決するには、画面右上の[表示オプション]をクリックし、[タグ]にチェックを入れます。

固定ページをメニューに追加

まずは、先ほど作成しておいた5つの固定ページをメニューに加えます。画面左の[固定ページ]一覧から選択したいページ名にチェックを入れ、メニューに追加をクリックします。

カテゴリーページをメニューに追加

次に、カテゴリーページをメニューに加えます。画面左の[カテゴリー]をクリックし、選択したいカテゴリー名にチェックを入れ、メニューに追加をクリックします。

以上で、メニューに表示させたいページの選択が完了しました。しかし、このままの状態でサイト上にメニューを表示させても、希望通りの順番に並んでくれません。

メニュー作成手順③選択したページを並べ替える

メニュー項目を並べ替えるには、ドラッグ・アンド・ドロップします。

メニュー作成手順④メニューを表示する位置を決定する

作成したメニューをサイト上のどの場所に表示するかを決めます。画面下部の[メニュー設定]＞[テーマの位置]で選択できます。

「Twenty Sixteen」でサイトの上部にメニューを表示させるには、[メインメニュー]にチェックを入れ、メニューを保存をクリックします。

実際にサイト画面を確認すると、下のようにメニューが表示されました。

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

ここまで、基本的なメニューの作成・設定方法を紹介しました。その他にも、メニュー画面で設定できる主なものを紹介しておきます。

メニュー項目の表示名を変更する

今回の例の「トップページ」という表示名を「ホーム」に変更してみます。[トップページ]の右端にある▼をクリックします。

[ナビゲーションラベル]に「ホーム」と入力し、メニューを保存をクリックします。

メニュー項目を削除する

削除したいメニュー項目の右端にある▼をクリックした後、[削除]をクリックし、メニューを保存をクリックします。

その他のメニュー機能の使い方については、WordPress Codex 日本語版の管理画面/外観/メニューページを参考にしてください。