【AFFINGER4】超簡単なヘッダーメニューの作り方講座

おおかみくん

AFFINGER4のヘッダーにあるメニューを自分用に作り変えたいんだけど、これってどうやるの？

ひつじくん

それはWordPressの機能を使えば余裕でできるよ！

AFFINGER4のテンプレートを適応させたばかりの状態では、ヘッダーのメニューが1つしかなくてちょっと寂しい状態です。

そこでこのヘッダーメニューを追加していきましょう。その方法は超簡単ですよ！

メニューに追加するページを作る

ひつじくん

まずはメニューに追加したい固定ページを作ろうか。

メニューに追加するのは投稿ページでも固定ページでも良いのですが、基本的には固定ページを用意してあげるのが良いでしょう。

固定ページは投稿ページの上司みたいな感じですから、この上司をメニューには配置してあげまるのが自然です。そうするとサイト構造がよくわかるようになり、ユーザビリティ的にもSEO的にも強くなるはずです！

なので、サイトの中でも絶対に見て欲しい記事を固定ページとしてまず用意します。「◯◯とは」「◯◯ランキング」「◯◯の購入方法」といった重要記事ですね。

おおかみくん

ふむふむ。まずは重要記事を固定ページとして用意すればいいのか。

固定ページは管理画面上部の「＋ 新規」というボタンから追加できます。僕は例として、「AFFINGER4カスタマイズ」「商品ランキング」「お問い合わせフォーム」の3つの固定ページを用意しました！

このように固定ページが用意できたら、それらをメニューとして配置してきます。

メニューに追加する

ひつじくん

じゃあ用意した固定ページをメニューとして配置していこうか！

おおかみくん

おいっす！！

固定ページが用意できたら管理画面上部の「カスタマイズ」をクリックし、「メニュー」>「メニュー追加」と進みます。

そうすると固定ページをメニューにどんどん追加していけますので、自分の好きな順番で配置しましょう。また、ここでメニューの名前も決められますので、名前の変更も同時にやっておきましょう。

おおかみくん

よし、メニューの並びと名前は大体決めたぞ！

ヘッダー用にチェックを！

ひつじくん

あとはヘッダー用メニューにチェックを入れておけばオッケーだよ！

メニューカスタマイズを一通り終えたら、最後に「ヘッダー用メニュー」にチェックを入れておきましょう。そうすればメニューカスタマイズは完了です！

AFFINGER4のメニュー完成！

ひつじくん

これでメニューが配置できたよ！

おおかみくん

おおおお！！サイトらしくなってきた！

お疲れ様です。これでAFFINGER4にメニューを配置できました。

ただし、まだCSSのカスタマイズを行っていないのでかなり簡素ではあります。見た目をガッツリいじりたいなら、ここからCSSカスタマイズへと移っていきましょう！