WORDPRESS

【2022年11月】AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ「完全初心者」ガイド】
 

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

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

の作成方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まず、前者の「ヘッダーメニュー」とは…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 top-01

↑ こちらの ”最上部エリア” に設置するメニューのこと

文字通り「ヘッド=頭側」のメニューという意味だね!
 

そして後者の「フッターメニュー」とは、反対に…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 top-02

↑ こちらの ”最下部エリア” に設置するメニューを指します

こっちはフットなので足側!
 

ということで、さっそく見ていきましょー🐥

 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

スマホ画面用のヘッダーメニューが表示されない場合は…

ACTION AFFINGER6で【スマホ画面用】のヘッダーメニューを設置するには、通常の「メニュー作成」に加えて…

AFFINGER管理

側の設定も、1ヶ所だけ必要です(こちらもあわせて解説していきます!)

 

【2022年11月】AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ「完全初心者」ガイド】

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数の多さから「情報もググりやすい」のでおすすめです)

 

そのため、使用されているWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない
  • または、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している

といった状態だと、「画面のデザインや設定方法が当ページの内容と異なる」可能性がありますのでご注意ください

 

なお「Classic Editor」の有効化手順は、下記のステップとなります(一瞬です)

  1. WordPress管理画面から、左側の プラグイン > 新規追加 を順にクリック
  2. 右上の検索フォームに「Classic Editor」と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】
WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】

続きを見る

 

まずは、WordPress管理画面から…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-01

↑ 外観 > メニュー をクリックして、メニュー編集の画面を開きましょう

 

開いたら、画面中央に表示されている…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-02

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

 

このメニュー名は、あくまで「作成したメニューを自分で管理する用」の名称なので、自身がわかりやすいと思う名前でOKです

つまり、実際のブログ画面でユーザーから見られる部分ではないよ!
 

任意の「メニュー名」を入力したら、右下の…

メニューを作成

というボタンをクリックしましょう

 

つづいて、画面の左側にある「メニュー項目を追加」というエリアから…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-03-a

↑ 今回ヘッダーメニューやフッターメニューとして表示させたい、任意のページを選択していきます

 

今回は例として、上画像のように【投稿】というタブを開き…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-03-b

↑ そのなかの「Hello world!」という記事を選んでみます(複数ページの選択も可能です)

 

選択したいページにチェックを入れたら、「メニューに追加」ボタンをクリックです

「Hello world!」は、ワードプレスで最初から公開されてるサンプルページだね
 
 

すると、メニュー編集の画面中央に「Hello world!」という記事が…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-04-a

↑ このような「横長のボックス」となって追加されました

 

つづいて、画面下部にある…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-04-b

↑「メニュー設定」というエリアで、まず【ヘッダーメニュー】を作りたい場合は…

  • ヘッダーメニュー
  • スマホミドルメニュー

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

つまり、さっき指定したページの表示先(メニューの種類)をここで選択するよ!
 

ちなみに、前者の「ヘッダーメニュー」とは…

【PC画面】で表示させるヘッダーメニュー

のことで、後者の「スマホミドルメニュー」とは…

【スマホ画面】で表示させるヘッダーメニュー

のことを指します

 

一方で、ヘッダーメニューではなく【フッターメニュー】を作りたい場合は…

  • フッターメニュー
  • スマホフッターメニュー

の2つにチェックを入れればOKです

 

補足

複数のページを選択した場合は、さきほどご紹介した「横長のボックス」の順番をドラッグ&ドロップで入れ替えることで、「ページの並び順」を自由に変更できます

 

ということで…

 

ここまでできたら、最後に右下の メニューを保存 ボタンを忘れずにクリックして、このメニュー編集画面における作業は完了です🐣

 

実際の画面上で確認してみると、【ヘッダーメニュー】の場合…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-05

↑ さきほど選択したサンプル記事「Hello world!」が、ブログ最上部に表示されました

 

関連

上の画像例では、ヘッダー背景色(ヘッダーメニューのさらに上部エリア)を、解説の便宜上「真っ白」に設定しています

 

「ヘッダー背景色」の設定方法については、こちらをどうぞ ↓

AFFINGER6「ヘッダー&フッター、全体の背景色」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】
【2022年11月】AFFINGER6「ヘッダー&フッター、全体の背景色」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

続きを見る

 

ちなみに!

 

この【ヘッダーメニュー】や【フッターメニュー】に表示させる各ページの「タイトル」は、任意の表示名に変更することも可能です

 

さきほどご紹介した手順のなかで…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-06-a

↑ こちらの「横長のボックス」が中央に追加された際に、その右側にある ▼ をクリックすると…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-06-b

↑ このように「ナビゲーションラベル」という欄が開くので、こちらにヘッダーメニューやフッターメニューで表示させたい【任意の表示名】を、記事ごとで入力すればOK

変更した場合、また「メニューを保存」ボタンのクリックを忘れずに!
 

改めて実際の画面を確認してみると…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-06-c

↑ このように、メニュー内で表示されるページタイトルが変更されました

 

補足

一度作成したメニューをあとから(ページの追加や表示名の変更など)編集したい場合は…

WordPress管理画面 > 外観 > メニュー

からメニュー編集の画面を再度開き、左上の…

編集するメニューを選択

というタブから、作成済みのメニュー(例 ヘッダーメニューA )を呼び出せばOKです

 

※作成済みのメニューが「1件のみ」の状態だと、メニュー編集の画面を開いた時点で自動的に呼び出されます

 

なお、ヘッダーやフッターメニューに例えば…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-06-d

↑ こちらの「HOME」のような表示名で、サイトのTOPページを加えたい場合は…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-06-e

↑ さきほどご紹介したメニュー作成のなかの「メニュー項目を追加」のステップで、上画像のように「カスタムリンク」というタブを開き…

  • URL → サイトのTOPページURLを貼り付ける!(例:https://●●●●.com
  • リンク文字列 → 任意のページタイトルを入力する!(例:HOME

上記のように設定して、「メニューに追加」をクリックすればOKです

自分はこの「HOME」ボタンを、ヘッダー&フッターメニュー両方に入れてるよ!
 

そしてもう1点!

 

【スマホ画面】側のヘッダーメニューを表示させるには、ここまでご紹介した「メニュー作成」に加えてもう1つ…

AFFINGER管理

側の設定というのも、別途必要になります

といっても一瞬だよ!
 

WordPress管理画面から、左下の…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-07-a

↑「AFFINGER管理」という項目をクリックして、そのなかの…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-07-b

↑「メニュー」というタブをクリックしましょう

 

すると…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-07-c

↑「その他のスマホメニュー」という設定エリアがあるので、そのなかの…

  • スマホミドルメニューを表示する

という項目にチェックを入れて、左下の「Save」ボタンをクリックすればOKです

 

なお、「Save」ボタンで設定を一旦保存してから、再度この項目を見てみると…

AFFINGER6「ヘッダー&フッターメニュー」の作り方 1-07-d

↑ このように、【スマホ】ヘッダーメニューの「表示パターン」が選択できるようになるので、お好みでこちらも設定しておきましょう🐥

ここは特にこだわりがなければ、デフォルトのままでOKだよ!
 
 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS