ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

WordPress フッターメニューの作成と追加

WordPress フッターメニューの作成と追加

WordPressは、ヘッダー(ページの冒頭部)とフッター(ページの終わり部)など多彩なメニューを配置できる機能を備えています。メニューの構造(項目の構成)を複数作成して、その内の二つを選んでヘッダーとフッターに配置するなどのメニューの管理機能もあります。

メニューは、サイトのナビゲーションを提供する重要な基本機能です。WordPressのヘッダーとフッターメニューの機能を活用することで、サイトのナビゲーションの使い勝手を向上させることもできます。フッターメニューは地味な存在ですが、WordPressではフッターメニューも柔軟に作成できるのが特徴の1つです。フッターメニューの多彩な編集機能を備えていることはWordPressならではの利点とも言えます。

備考 / 留意事項:
WordPressは多様なメニューを作成、設置することが可能な機能を備えていますが、テーマによってサポートされるメニューの形式や設定可能な位置は異なります。現状、WordPress 標準テーマ、Twenty SeventeenやTwenty Sixteenではフッターメニューはサポートされていません。

フッターメニューはコンテンツが増えてくると重要度が増してきます。始めたばかりのサイトやコンテンツがそれほど多くない場合は、必要性はそれほど高くはありません。必ず設置しなければいけないというものではないです。フッターメニューを設置するかは運営者の判断によります。

CMSが備える機能、持ち味を活かすこともサイト運営では重要なことです。使いやすいナビゲーションを備えることは、ユーザエクスペリエンスの向上に繋がります。サイト内の主要なコンテンツに係るナビゲーションは、ヘッダーメニューで行うのが基本です。ヘッダーのメニューの作成については、WordPressサイトのメインメニューの追加・設定の仕方をご覧下さい。

本記事では、フッターメニューの作成と追加の方法を紹介します。

WordPress サイトにフッターメニューを追加する

管理画面(ダッシュボード)の左下に並んで表示されるメニュー内の[外観]を選び、表示されるサブメニューの中から[メニュー]を選びます。

WordPress外観のサブメニュー

以下の画像の様なメニュー編集画面が表示されます。

目次に戻る

新規メニューの作成

「以下のメニューを編集するか新規メニューを作成してください。」のメッセージ表示内の”新規メニューを作成”をクリックします。

新規メニューの作成

メニュー名の欄に名前を入力します。ここでは例として、”フッターメニュー”を名前に入力しています。続いて、青色の[メニューを作成]のボタンを押します。

メニュー名を入力する

新規メニューの作成編集画面が表示されます。新規の場合は、メニュー構造の欄にはまだなにも項目が入っていません。「左カラムからメニュー項目を追加してください。」とメッセージが表示されています。

メニュー編集画面

目次に戻る

メニュー項目の追加

固定ページ、投稿、カスタムリンク、カテゴリーの中から、フッターメニューで表示する項目を選択し、[メニューに追加]ボタンをクリックします。

ここでは例として、固定ページの”ホーム”、”お問い合わせ”、”プライバシーポリシー”、”プロフィール”をフッターメニューに追加します。

メニューに追加する項目を選択

備考:

フッターメニューで表示する項目は、ヘッダーと同じでも構いませんが、(少し)異なる項目の組み合わせを表示することが多いです。重複する項目があってもおかしくありません。

サイト内の記事数、カテゴリー数、固定ページ数が増えてくると、ナビゲーションの重要性も高まってきます。サイトのコンテンツが増えるとメニューの項目も増えてくることが多いです。コンテンツの多いサイトでは、ヘッダーとフッターのメニュー項目を使い分ける必要性が高くなります。

本サイトでは、サイトの基本情報のページをフッターメニューに項目として加えて表示しています。

[メニューに追加]ボタンをクリックすると、メニュー構造の下にメニュー項目が追加されます。

フッターメニュー項目リスト

4番目に表示されている項目「プロフィール/Blogging Lifeの簡単な紹介」は、メニューラベルの名としては長いので、「About」に変更します。

目次に戻る

ナビゲーションラベル(ラベル名)の変更

メニューの項目として表示される名前をナビゲーションラベルと呼びます。(例:「お問い合わせ」というメニュー項目名がナビゲーションラベルです。)ナビゲーションラベルは、お好みに合わせて表示を変更することができます。例えば、メニューの項目名としては長すぎるカテゴリーや固有ページのタイトルを簡潔な名称に変更することができます。

ここでは例として、「プロフィール / Blogging Lifeの簡単な紹介」と言う固定ページのメニュー項目表示名を「About」に変更する例を紹介します。

ラベル変更前

メニュー構造に表示されている変更したいタイトル表示(メニュー項目名)のタブを選択すると、ナビゲーションラベルの欄が表示されます。ナビゲーションラベルの欄には、固定ページのタイトル「プロフィール / Blogging Lifeの簡単な紹介」が予め入力されています。

ナビゲーションラベル名の編集

目次に戻る

ラベル変更後

ナビゲーションラベルに入力されているテキストを編集します。「プロフィール / Blogging Lifeの簡単な紹介」を「About」に変更しました。(画面内の赤枠で囲った箇所)

ナビゲーションラベル名変更後

ラベルの変更のみ行う場合は、編集後、[メニューを保存]のボタンを押します。

目次に戻る

メニュー項目の表示順の変更

WordPressでは、メニュー項目の順番を自由に変更することができます。以下は、メニュー項目の表示する順番を変更する手順です。

メニュー項目順変更前

以下に表示されている項目を「ホーム」、「About」、「プライバシーポリシー」、「お問い合わせ」の順に変更します。

メニュー項目表示順の変更移動させたい項目をドラッグ・アンド・ドロップして、順番を入れ替えます。上の画像では、4番目にある「About」をドラッグして、「ホーム」下に移動します。同様に上の画像で2番目に表示されている「お問い合わせ」を「プライバシーポリシー」の下に移します。

ドラッグアンドドロップを使用せずに、移動するアイテムのタブを開いて、移動の「ひとつ上へ」、または、「ひとつ下へ」(下の画面赤枠で囲った内側に表示される文言のリンク)をクリックして、順番を変更することもできます。以下の画像の赤枠部をご参照下さい。

メニュー項目の移動

メニュー項目順変更後

上で紹介したメニュー項目の順番を変更作業を行い、下の画像のようなりました。

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

「ホーム」、「About」、「プライバシーポリシー」、「お問い合わせ」の順番となっています。

目次に戻る

メニュー表示位置を指定

メニューの位置のチェックボックスをクリックすると、表示する位置を設定することができます。ヘッダーかフッターの二箇所のどちらかを選択します。両方を選択することもできますが、ヘッダーとフッターのメニュー項目をそれぞれ作成して、適切に設定することでより使いやすいナビゲーションを提供することができます。

メニュー表示位置をフッターに指定

メニュー設定の下にある、「メニューの位置」の[フッターナビ]のボックスにチェックを入れて、[メニューを保存]のボタンを押します。

備考 / 注意事項:

メニューの位置を選択しないと、メニューは表示されません。

メニュー設定に表示される「メニューの位置」の項目や名称は、使用しているWordPressのテーマによって異なる場合があります。上の画像は、Simplicityの場合です。Simplicityでは、「ヘッダーナビ」と「フッターナビ」という名前でメニュー位置を2箇所選ぶことができます。テーマによっては、名前が「グローバルメニュー」、「フッターメニュー」と表示されているものなどもあります。さらに多くのメニュー位置の設定ができるテーマもあります。(例:モバイル用とパソコン用それぞれ別にヘッダーとフッターのメニューを作成できる機能を持つテーマもあります。その場合は、メニューの位置の選択肢は4個となります。)

以上で、フッターメニューの追加設定は完了です。

目次に戻る

フッターメニュー表示例

テーマがSimplicityの場合、上記の設定後、フッターメニューはパソコンとスマホで以下のように表示されます。

スマホでのフッターメニュー表示例

左から「ホーム」、「About」、「プライバシーポリシー」、「お問い合わせ」の順で表示されています。

スマホでのフッターメニュー表示例

備考 / 注意事項:
フッターメニューの表示形式は、テーマによって異なることがあります。Simplicityの場合は、メニュー項目を横に並べて表示します。横並びの表示の場合は、スマホ画面は幅が狭いので、メニューが一行で表示されるように項目数をある程度絞ったほうが、表示がすっきりすると思います。

目次に戻る

モバイル画面での異なるフッターメニュー表示例

各メニュー項目毎に一行で表示し、メニュー項目を縦に並んで表示する形式のテーマもあります。

メニュー項目が縦に並ぶ表示形式のフッターメニュー

モバイルでは画面幅が狭いため、多くの項目を設置する場合は上の画像のようにメニュー項目を一行毎に縦に並べる表示形式が適しています。

パソコンでのフッターメニュー

以下はSimplicityのパソコン画面でのフッターメニューの表示例です。

パソコンでのフッターメニュー表示例

目次に戻る

作成設置したメニューを後で設定変更する

メニューをヘッダーとフッターの様に複数作成した場合、前回作成または編集したメニュー構造が表示されます。後でメニュー項目を編集する場合は、編集するメニューを選択して、変更を行います。

例: フッターメニューを作成し、その後でヘッダーメニュー(メインメニュー)を編集する場合は、編集するメニューを選ぶ必要があります。

設定変更するメニューの選択:

下の画面では、フッターメニューが選ばれています。

フッターメニューが選択されている状態

ヘッダーメニュー(メインメニュー)を編集、設定変更したい場合は、メニュー選択欄をクリックして、メインメニューを選択します。

編集するメニューの選択

備考:
括弧内に表示されるメニュー種別の名称はテーマによって異なることがあります。Simplicityの場合は、「ヘッダーナビ」と「フッターナビ」です。「グローバルメニュー」、「フッターメニュー」など異なる名称を使用しているテーマもあります。

メインメニュー(作成したメニュー名によって名前は異なります)が選ばれている場合の表示例です。

メインメニューが選択されている状態

変更するメニューを選択した後、[選択]ボタンを押すと、選択されたメニューのデータが表示されます。本記事内で紹介しているメニュー項目名(ナビゲーションラベル)の編集、項目の表示順、メニューの設置位置の変更設定ができます。

サイトのコンテンツ(記事数など)が増えてくるにつれ、ナビゲーションの重要度が増してきます。ヘッダーとフッターメニューの項目を適切に使い分けて設定することで、ユーザーの利便性を高めることに繋がります。WordPressのメニュー機能は、訪問者に分かりやすいナビゲーションを提供することを可能にする優れた機能です。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!