affinger-menu-setting-20200228_ec

WordPress

【スマホ用もあり】AFFINGER5で「ヘッダー&フッターメニュー」を作成する手順【WordPressブログ】



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

ヘッダー&フッターメニューの作成手順

をご紹介していきたいと思います

まずブログにおける「ヘッダーメニュー」とは…

affinger-menu-setting-20200228_1-09

↑ このオレンジ部分のこと

ヘッド(頭)、つまり最上部のメニューという意味!

そして「フッターメニュー」とは…

affinger-menu-setting-20200228_2-09

↑ このオレンジ部分のこと

フット(足)、つまり最下部のメニューという意味!

そして「WING(AFFINGER5)」の場合、このヘッダー&フッターメニューの設置は超簡単です

スマホ用が表示されない場合

スマホのヘッダーメニューを表示させるには、「メニュー設定」のほかに「AFFINGER5 管理」側の設定も1ヶ所だけ必要になります

くわしくは、今回の解説のなかでご紹介していきますね

それではさっそく見ていきましょー🐥

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

WING AFFINGER5における、ブログのヘッダー&フッターメニューの作成手順【WordPress】

まずは、メニュー画面を開きましょう(下記手順です)

affinger-menu-setting-20200228_top-01

↑ WordPress管理画面 > 外観 > メニュー をクリックします

affinger-menu-setting-20200228_top-02

↑ メニュー画面が開きました

ここから…

  • ヘッダーメニュー
  • フッターメニュー

でそれぞれわけて見ていきます🐥

まずはヘッダーメニューから!

ヘッダーメニューの作成

pc-work-202001_01

さきほどのステップで「メニュー画面」を開けたら…

affinger-menu-setting-20200228_1-01

↑「メニュー名」という欄に、これから作るメニューのタイトルを入力します

ちなみにここは、実際のブログ上で読者から見られる部分ではないので、自分がわかりやすいと思う名称でOKです

自分の場合は、「ヘッダーメニュー①」という名前にしてるよ!

affinger-menu-setting-20200228_1-02

↑「メニュー名」を入力できたら、画面右側の「メニューを作成」をクリックします

このボタンは2つありますが、どちらを押してもOKです

affinger-menu-setting-20200228_1-03

↑ すると、画面の中央に新たな項目が表示されます

まずは、画面左側を見てみましょう

affinger-menu-setting-20200228_1-04

↑「メニュー項目を追加」という場所で、今回ヘッダーメニューに表示させたい記事を選択します

複数でもOK!

ちなみに今回の例では、「投稿ページ」のなかから1つだけ選択してみます

「投稿」というタブをクリックしてみると…

affinger-menu-setting-20200228_1-05

↑ 作成済みの投稿ページが表示されるので、ヘッダーメニューに載せたい記事にチェックを入れましょう

ちなみに、最近作った記事以外もすべて表示させたい場合は、「すべて表示」というタブをクリックすると全表示できます

チェックを入れられたら、「メニューに追加」をクリックしましょう

affinger-menu-setting-20200228_1-06

↑ すると、画面中央の「メニュー構造」という場所に、選択した記事タイトルが四角い枠になって表示されます

affinger-menu-setting-20200228_1-07

↑ つづいて、画面下部の「メニュー設定」という場所で…

  • ヘッダー用メニュー
  • スマートフォン用ミドルメニュー

の2つにチェックを入れましょう

ちなみに「ヘッダー用メニュー」とは、PC側で表示させるヘッダーメニューのこと

そして「スマートフォン用ミドルメニュー」は、スマホ側で表示させるヘッダーメニューのことです

affinger-menu-setting-20200228_1-08

↑ 最後に、右下の「メニューを保存」をクリックすれば完了です

プレビューで確認してみると…

affinger-menu-setting-20200228_1-09

↑ 画面上部に、選択した記事タイトルが無事表示されました🐥

ちなみに!

このヘッダーメニューに表示させる記事タイトルは、任意の表示名に変更することもできます

さきほどの…

affinger-menu-setting-20200228_1-10

↑ この画面で、記事タイトルの右端にある ▼ をクリックすると…

affinger-menu-setting-20200228_1-11

↑「ナビゲーションラベル」という欄が開きます

ここで、実際のヘッダーメニューで表示させたいタイトルに変更しましょう

今回は試しに、「おはよう世界」に変えてみたいと思います

入力できたら、右側の「メニューを保存」のクリックを忘れずに!

改めてプレビューで見てみると…

affinger-menu-setting-20200228_1-12

↑ 無事「おはよう世界」に変わりました

それともう1点!

スマホ側のヘッダーメニューを表示させるには、上記の「メニュー設定」だけでは足りず、「AFFINGER管理」側での設定も必要になります

といっても一瞬!

affinger-menu-setting-20200228_1-13

↑ WordPress管理画面 > AFFINGER5 管理 > AFFINGER5 管理 をクリックします

affinger-menu-setting-20200228_1-14

↑ 左側の「メニュー」タブをクリックします

affinger-menu-setting-20200228_1-15

↑ 画面下部の「その他のスマホ用メニュー」という項目で、「スマホ用ミドルメニューを表示する」にチェックを入れましょう

入れたら、画面下部の「save」をクリックして設定を保存します

さらに、この「その他のスマホ用メニュー」という項目を改めて見てみると…

affinger-menu-setting-20200228_1-16

↑ さっきまでは選択できなかった、ヘッダーメニューの表示パターンが選択できるようになってます

ここで、好きな表示パターンを選びましょう

ちなみに自分の場合は、いつも「ヘッダー画像より下に表示」にしてます

これで、スマホ用ヘッダーメニューの設定も完了です🐥

今度は、「フッターメニュー」の方を見ていきましょう

流れはヘッダーと同じだから簡単!

フッターメニューの作成

pc-work-202001_02

まずは、ヘッダー画面をもう一度開きましょう(WordPress管理画面 > 外観 > メニュー)

affinger-menu-setting-20200228_2-01

↑ 画面上部の、「新しいメニューを作成しましょう」という部分をクリックします

affinger-menu-setting-20200228_2-02

↑「メニュー名」の欄に、また任意のタイトルを入力します

繰り返しになりますが、ここのタイトルは読者からは見られるものではないので、自分がわかりやすい名称でOKです

自分の場合、「フッターメニュー①」にしてるよ!

affinger-menu-setting-20200228_2-03

↑ 画面左側から、今回フッターメニューに表示させたい記事ページを選択していきます

今回は参考例として、あらかじめ作っておいた…

  • プライバシーポリシー
  • お問い合わせ
  • サイトマップ

この3つの「固定ページ」を選んでみたいと思います

フッターメニューとして代表的な3種!

ちなみに、上記ページそれぞれの作成手順は ↓ をどうぞ♪

how-to-privacy-policy-202002-ec
個人ブログにおける「プライバシーポリシー&免責事項」書き方の要点と作成例【アフィリエイト】

続きを見る

wordpress-contact-form-7-202001-ec
WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作る方法【ブログにお問い合わせページを設置】

続きを見る

wordpress-ps-auto-sitemap-202001-ec
WordPressプラグイン「PS Auto Sitemap」の基本的な設定方法と使い方【ブログのユーザーサイトマップ作成】

続きを見る

で、今回のように「固定ページ」のなかから選択する場合、まずは「固定ページ」というタブをクリックして開きます

選択したい記事ページが表示されてない場合、さらに「すべて表示」というタブをクリックしましょう

affinger-menu-setting-20200228_2-04

↑ 記事ページを選んだら、「メニューに追加」をクリックします

affinger-menu-setting-20200228_2-05

↑ 画面の中央に、選択した3つの記事タイトルが表示されました

もし表示タイトルを変えたい場合は、また各記事タイトルの右端にある ▼ をクリックして変更しましょう

あとちなみに、この3つの記事の並び順を変えたい場合は…

affinger-menu-setting-20200228_2-06

↑ 各記事タイトルを(クリック押しっぱなしで)動かすと、簡単に変えられます

affinger-menu-setting-20200228_2-07

↑ 今回は、こんな並び順に変えました

この場合、1番左から「サイトマップ」の順になるよ!

affinger-menu-setting-20200228_2-08

↑ つづいて、画面下部の「メニュー設定」から…

  • フッター用メニュー
  • スマートフォンフッター用メニュー

の2つにチェックを入れます

最後に、画面右側の「メニューを保存」をクリックすれば完了です

改めてプレビューを確認してみると…

affinger-menu-setting-20200228_2-09

↑ こんな感じのフッターメニューになりました

今回の「ヘッダー&フッターメニュー作成」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥

ヘッダーメニューの色設定は ↓ をどうぞ♪

affinger-color-setting-header-menu-202002-ec
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.