今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
ヘッダー＆フッターメニューの作成手順
をご紹介していきたいと思います
まずブログにおける「ヘッダーメニュー」とは…
↑ このオレンジ部分のこと
そして「フッターメニュー」とは…
↑ このオレンジ部分のこと
そして「WING（AFFINGER5）」の場合、このヘッダー＆フッターメニューの設置は超簡単です
スマホ用が表示されない場合
スマホのヘッダーメニューを表示させるには、「メニュー設定」のほかに「AFFINGER5 管理」側の設定も1ヶ所だけ必要になります
くわしくは、今回の解説のなかでご紹介していきますね
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
WING AFFINGER5における、ブログのヘッダー＆フッターメニューの作成手順【WordPress】
まずは、メニュー画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ メニュー をクリックします
↑ メニュー画面が開きました
ここから…
- ヘッダーメニュー
- フッターメニュー
でそれぞれわけて見ていきます🐥
ヘッダーメニューの作成
さきほどのステップで「メニュー画面」を開けたら…
↑「メニュー名」という欄に、これから作るメニューのタイトルを入力します
ちなみにここは、実際のブログ上で読者から見られる部分ではないので、自分がわかりやすいと思う名称でOKです
↑「メニュー名」を入力できたら、画面右側の「メニューを作成」をクリックします
このボタンは2つありますが、どちらを押してもOKです
↑ すると、画面の中央に新たな項目が表示されます
まずは、画面左側を見てみましょう
↑「メニュー項目を追加」という場所で、今回ヘッダーメニューに表示させたい記事を選択します
ちなみに今回の例では、「投稿ページ」のなかから1つだけ選択してみます
「投稿」というタブをクリックしてみると…
↑ 作成済みの投稿ページが表示されるので、ヘッダーメニューに載せたい記事にチェックを入れましょう
ちなみに、最近作った記事以外もすべて表示させたい場合は、「すべて表示」というタブをクリックすると全表示できます
チェックを入れられたら、「メニューに追加」をクリックしましょう
↑ すると、画面中央の「メニュー構造」という場所に、選択した記事タイトルが四角い枠になって表示されます
↑ つづいて、画面下部の「メニュー設定」という場所で…
- ヘッダー用メニュー
- スマートフォン用ミドルメニュー
の2つにチェックを入れましょう
ちなみに「ヘッダー用メニュー」とは、PC側で表示させるヘッダーメニューのこと
そして「スマートフォン用ミドルメニュー」は、スマホ側で表示させるヘッダーメニューのことです
↑ 最後に、右下の「メニューを保存」をクリックすれば完了です
プレビューで確認してみると…
↑ 画面上部に、選択した記事タイトルが無事表示されました🐥
ちなみに！
このヘッダーメニューに表示させる記事タイトルは、任意の表示名に変更することもできます
さきほどの…
↑ この画面で、記事タイトルの右端にある ▼ をクリックすると…
↑「ナビゲーションラベル」という欄が開きます
ここで、実際のヘッダーメニューで表示させたいタイトルに変更しましょう
今回は試しに、「おはよう世界」に変えてみたいと思います
改めてプレビューで見てみると…
↑ 無事「おはよう世界」に変わりました
それともう1点！
スマホ側のヘッダーメニューを表示させるには、上記の「メニュー設定」だけでは足りず、「AFFINGER管理」側での設定も必要になります
↑ WordPress管理画面 ＞ AFFINGER5 管理 ＞ AFFINGER5 管理 をクリックします
↑ 左側の「メニュー」タブをクリックします
↑ 画面下部の「その他のスマホ用メニュー」という項目で、「スマホ用ミドルメニューを表示する」にチェックを入れましょう
入れたら、画面下部の「save」をクリックして設定を保存します
さらに、この「その他のスマホ用メニュー」という項目を改めて見てみると…
↑ さっきまでは選択できなかった、ヘッダーメニューの表示パターンが選択できるようになってます
ここで、好きな表示パターンを選びましょう
ちなみに自分の場合は、いつも「ヘッダー画像より下に表示」にしてます
これで、スマホ用ヘッダーメニューの設定も完了です🐥
今度は、「フッターメニュー」の方を見ていきましょう
フッターメニューの作成
まずは、ヘッダー画面をもう一度開きましょう（WordPress管理画面 ＞ 外観 ＞ メニュー）
↑ 画面上部の、「新しいメニューを作成しましょう」という部分をクリックします
↑「メニュー名」の欄に、また任意のタイトルを入力します
繰り返しになりますが、ここのタイトルは読者からは見られるものではないので、自分がわかりやすい名称でOKです
↑ 画面左側から、今回フッターメニューに表示させたい記事ページを選択していきます
今回は参考例として、あらかじめ作っておいた…
- プライバシーポリシー
- お問い合わせ
- サイトマップ
この3つの「固定ページ」を選んでみたいと思います
ちなみに、上記ページそれぞれの作成手順は ↓ をどうぞ♪
-
【雛形】個人ブログにおける「プライバシーポリシー＆免責事項」書き方の要点と作成例【アドセンス・アフィリエイト広告ありの場合】
続きを見る
-
WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作る方法【ブログにお問い合わせページを設置】
続きを見る
-
WordPressプラグイン「PS Auto Sitemap」の基本的な設定方法と使い方【ブログのユーザーサイトマップ作成】
続きを見る
で、今回のように「固定ページ」のなかから選択する場合、まずは「固定ページ」というタブをクリックして開きます
選択したい記事ページが表示されてない場合、さらに「すべて表示」というタブをクリックしましょう
↑ 記事ページを選んだら、「メニューに追加」をクリックします
↑ 画面の中央に、選択した3つの記事タイトルが表示されました
もし表示タイトルを変えたい場合は、また各記事タイトルの右端にある ▼ をクリックして変更しましょう
あとちなみに、この3つの記事の並び順を変えたい場合は…
↑ 各記事タイトルを（クリック押しっぱなしで）動かすと、簡単に変えられます
↑ 今回は、こんな並び順に変えました
↑ つづいて、画面下部の「メニュー設定」から…
- フッター用メニュー
- スマートフォンフッター用メニュー
の2つにチェックを入れます
最後に、画面右側の「メニューを保存」をクリックすれば完了です
改めてプレビューを確認してみると…
↑ こんな感じのフッターメニューになりました
今回の「ヘッダー＆フッターメニュー作成」の解説は、これで以上となります
お疲れさまでした♪
あずき🐥
ヘッダーメニューの色設定は ↓ をどうぞ♪
-
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】
続きを見る
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^