ブロギングライフ

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

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

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

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

メニューは、サイトのナビゲーションを提供する重要な基本機能です。

https://www.blogging-life.com/how-to-setup-main-menu/

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

CMSが備える機能、持ち味を活かすこともサイト運営では重要です。ナビゲーションは、ユーザエクスペリエンスの向上にも関わる機能要素です。本記事では、フッターメニューの作成と追加の方法を紹介します。


スポンサーリンク

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

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

WordPress外観のサブメニュー

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

新規メニューの作成

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

新規メニューの作成

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

メニュー名を入力する

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

メニュー編集画面

メニュー項目の追加

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

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

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

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

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

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

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

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

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

メニュー構造に表示されているタイトル表示を変更したい項目のタブを選択し、表示される”ナビゲーションラベル”のテキストを編集します。

ラベル変更前

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

ラベル変更後

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

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

メニュー項目の表示する順番を変更します。

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

メニュー項目順変更前

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

移動させたい項目をドラッグ・アンド・ドロップして、順番を入れ替えます。

または、移動するアイテムのタブを開いて、移動の”ひとつ上へ”、または、”ひとつ下へ”(下の画面赤枠で囲った内側)をクリックして、順番を変更します。

メニュー項目の移動

メニュー項目順変更後

以下のように項目の順番を変更しました。

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

メニュー表示位置を指定

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

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

メニューの位置は、ヘッダーかフッターの二箇所のどちらかを選択します。メニューの位置を選択しないと、メニューは表示されません。

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

フッターメニュー表示例

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

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

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

スマホ画面は幅が狭いので、メニューが一行で表示されるように項目数をある程度絞ったほうが、表示がすっきりすると思います。

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

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

メニューを後で編集する時の留意事項

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

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

編集するメニューの選択:

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

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

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

編集するメニューの選択

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

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

ヘッダーとフッターのメニュー機能は、サイトのコンテンツが増えてくるにつれ、重要度・利便性が増してきます。WordPressのメニュー機能は、適切に利用することで、訪問者に分かりやすいナビゲーションを提供することができる優れた機能です。

コメントを残す

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

Return Top