AFFINGER6：メニューの作り方｜初心者でも分かる設定手順

初心者の方が最初につまずきやすいのが、メニューの作成です。

AFFINGER6のメニューは、仕組みさえ理解すれば 自由度が非常に高く、ユーザー導線を最適化できる強力な機能 です。

「そもそもメニューって？」

と思うような初心者の方でもわかるように詳しく解説していきます。

「メニュー」の種類について

「メニュー」とは主要なページへのリンクをまとめたものです。

例えば下画像の赤枠部分がメニュー（ヘッダーメニュー）です。

「メニュー」は作成する場所によって名称が異なりますので、初心者の方はまず「メニューの種類」を覚えておきましょう。

ヘッダーメニュー	ヘッダーに設置したメニュー
フッターメニュー	フッターに設置したメニュー
サイドメニュー	サイドバーに設置したメニュー

それぞれのメニューの位置はこんな感じです。

メニューを作成する前の準備

「メニュー」は主要なページへのリンクを設置するのが一般的ですが、その中でも「カテゴリー」を設置する場合が多いです。

なので、「メニュー」を作成する前に「カテゴリー」を作成しておきましょう。

「カテゴリー」とは記事の分類のことです。

例えば、自分のブログが「ワードプレス」や「ブログ」に関する記事を載せたいと思えば記事の分類（カテゴリー）は「ワードプレス」や「ブログ」といったカテゴリーが思いつきますよね。

ヘッダーメニューにカテゴリーを設定しておくと、読者の方にとってわかりやすいブログになります。

カテゴリーの作成方法

「カテゴリー」を作成する手順を解説していきます。

①　WordPressメニューから「投稿」→「カテゴリー」を選択します。

②　新規カテゴリーを追加する画面から名前入力欄にカテゴリー名を入力します。

③　「スラッグ」の欄は入力したカテゴリーを英語表記で小文字で入力しましょう。

英語表記にするのは「グーグル翻訳」を利用すると便利です。

「スラッグ」については別記事で解説しているので、そちらの記事も参考にしてみてください。

関連記事：

④　入力が完了したら画面したの「新規カテゴリーを追加」をクリックします。

これでカテゴリーの作成は終了です。

自分のブログが何について発信したいのかある程度決まっている方は、前もってカテゴリーを作成しておきましょう。

カテゴリーの作成については別記事で詳しく解説していますので、そちらの記事を参考にしてみてください。

関連記事：

ヘッダーメニューの作成方法

下画像のようなヘッダー部分に表示するメニューです。

AFFINGER6では2通りの方法でヘッダーメニューを作成することができます。

• 「メニュー」から作成する方法
• 「カスタマイズ」から作成する方法

「メニュー」から「ヘッダーメニュー」を作成する方法

①　WordPresメニューの「外観」→「メニュー」を選択します。

②　「メニュー名」を入力します。

「ヘッダー」とでも入力しておけば大丈夫です。

③　「メニュー設定」で「ヘッダーメニュー」を選択します。

④　「メニューを作成」をクリック

「メニュー項目を追加」の「カテゴリー」タブで「すべて表示」をクリックして、追加したいカテゴリーを選択します。

この例では予め「ブログ作成」というカテゴリーを作成しておいたので「ブログ作成」のカテゴリーが表示されています。

メニューに追加したいカテゴリー項目の選択が終わったら「メニューに追加」をクリックします。

「メニュー構造」に追加したカテゴリーが表示されます。

「ホーム」へのリンクも追加しておきましょう。

「メニュー項目を追加」の「固定ページ」で「すべて表示」をクリックします。

「ホーム」を選択して、「メニューに追加」をクリックします。

「メニュー構造」に「ホーム」と「ブログ作成」が追加されました。

最後に「メニューを保存」をクリックすれば終了です。

実際にブログを確認してみると、ヘッダーメニューが作成されているのがわかると思います。

「カスタマイズ」から「ヘッダーメニュー」を作成する方法

AFFINGER6では「外観」→「カスタマイズ」からも「メニュー」を作成することが可能です。

実際にどのように表示されるかがリアルタイムで確認できるので、初心者の方にはこちらの方が解りやすいかもしれません。

まず、WordPresメニューから「外観」→「カスタマイズ」を選択します。

「メニュー」を選択します。

「メニューを新規作成」をクリックします。

まず「メニュー名」を入力します。

「ヘッダー」とでも入力しておけば大丈夫です。

次に「メニューの位置」で「ヘッダーメニュー」を選択して、「次」をクリックします。

メニューに「ホーム」へのリンクを追加します。

固定ページのタブから「ホーム」をクリック。

カテゴリーを追加します。

カテゴリーのタブから追加したいカテゴリーをクリックします。

画像の左側で追加されたメニュー項目が確認でき、右の画面で実際のヘッダーメニューが表示されて確認することができます。

最後に「公開」をクリックすれば、ヘッダーメニューの作成は終了です。

フッターメニューの作成方法

次にフッターメニューの作成方法を説明します。

フッターメニューはブログの下部（フッター）に設置されたメニューです。

「お問い合わせフォーム」を作成する方法については別記事で紹介しているので、そちらを参考にしてみてください。

関連記事：

フッターメニューもヘッダーメニューと同様に２通りの方法で作成することが可能です。

• 「メニュー」から作成する方法
• 「カスタマイズ」から作成する方法

作成方法も「ヘッダーメニュー」で説明した方法と一緒です。

「メニュー」から「フッターメニュー」を作成する方法

①　WordPresメニューから「外観」→「メニュー」を選択する

②　「メニュー名」を入力する

フッターとでも入力しておけば大丈夫です。

③　「メニューの設定」で「フッターメニュー」を選択する

④　「メニューを作成」をクリックします

メニュー名が「フッター」であることを確認してから、「お問い合わせフォーム」の固定ページにチェックを入れて「メニューに追加」をクリックします。

フッターメニューに「お問い合わせフォーム」の固定ページが追加されたのを確認したら「メニューを保存」をクリックします。

フッターメニューに「ホーム」へのリンクも追加したい場合は「固定ページ」の「すべて表示」に「ホーム」項目があるので、そちらをクリックして追加してください。（ヘッダーメニューの時と同じ操作です）

これでフッターメニューの作成は終了です。

ブログを表示して実際の表示を確認してみてくださいね。

「カスタマイズ」から「フッターメニュー」を作成する方法

「カスタマイズ」から「フッターメニュー」を作成する方法は「ヘッダーメニュー」の時と同様の操作になります。

WordPresメニューから「外観」→「カスタマイズ」を選択して「メニュー」→「メニューを新規作成」をクリックします。

次画面でメニュー名を入力（フッターとでも入力しておけば大丈夫です）、メニューの位置で「フッターメニュー」を選択して「次」をクリックします。

「項目を追加」をクリックします。

「フッターメニュー」に追加したい固定ページをクリックして選択します。

「フッターメニュー」に固定ページを追加すると画面右下に実際のフッターメニューが表示されます。

最後に「公開」をクリックすればフッターメニューの作成は終了です。

まとめ｜AFFINGER6ならメニュー設計が自由自在！導線最適化で回遊率を最大化しよう

メニューは“ただ作るだけ”ではなく、サイト全体の価値を高める戦略的な要素 です。

AFFINGER6のメニュー機能は強力で自由度が高いですが、初心者にはわかりにくい面もあります。

初心者の方は、まずヘッダーメニューとフッターメニューの作成から取り組んでみてください。

AFFINGER6に興味のある方は公式サイトをチェックしてみてくださいね。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事