メニューを作る

おおかみくん
AFFINGER4のヘッダーにあるメニューを自分用に作り変えたいんだけど、これってどうやるの?
ひつじくん
それはWordPressの機能を使えば余裕でできるよ!

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

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

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

固定ページを追加

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

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

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

メニュー 作り方

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

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

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

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

メニューに追加する

メニューを追加

ひつじくん
じゃあ用意した固定ページをメニューとして配置していこうか!
おおかみくん
おいっす!!

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

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

おおかみくん
よし、メニューの並びと名前は大体決めたぞ!

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

ヘッダー用メニューに設定

ひつじくん
あとはヘッダー用メニューにチェックを入れておけばオッケーだよ!

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

AFFINGER4のメニュー完成!

メニュー完成

ひつじくん
これでメニューが配置できたよ!
おおかみくん
おおおお!!サイトらしくなってきた!

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

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