AFFINGER６：「お問い合わせフォーム」をフッターメニューに設置する方法

この記事ではWordPress有料テーマのAFFINGER6で「お問い合わせフォーム」をフッターメニューに設置する方法を初心者向けに解説しています。

「お問い合わせフォーム」の作成方法

まずは「お問い合わせフォーム」を作成しましょう。

「お問い合わせフォーム」はWordPressのプラグイン「Contact Form 7」を利用すると超簡単に作成できます！

「Contact Form 7」を利用して「お問い合わせフォーム」を作る方法は別記事で詳しく紹介しているので、まずそちらをご覧になってください。

→　AFFINGER６：「お問い合わせフォーム」をフッターメニューに設置する方法

「お問い合わせフォーム」をフッターメニューに設置する方法

固定ページで「お問い合わせフォーム」が作成できたでしょうか？

「お問い合わせフォーム」の固定ページが完成してもリンクが設定されていなければ、ブログに来た方は「お問い合わせフォーム」にたどり着くことはできません。

そこで、ヘッダーメニューやフッターメニューに設置します。

ブログをパソコンで表示した際に「記事の内容」の上が「ヘッダー」、下が「フッター」です。

そこに表示されるメニューを「ヘッダーメニュー」、「フッターメニュー」と言います。

記事の横に表示される「サイドメニュー」もあります。

AFFINGER6では2通りの方法で「問い合わせフォーム」をフッターメニューに設置することができます。

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

1.　「メニュー」から設置する方法

WordPressの「外観」→「メニュー」から「お問い合わせフォーム」をフッターメニューに設置する方法です。

手順はとても簡単です。

STEP.1 　フッターメニューを作成する

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

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

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

③　「メニュー設定」で「フッターメニュー」の項目にチェックを入れます。

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

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

STEP.2　「フッターメニュー」に「お問い合わせフォーム」のページを追加する

①　STEP.1で作成したメニュー名「フッター」であることを確認する。

②　「お問い合わせフォーム」の固定ページにチェックを入れる。

※　ここでは「お問い合せフォーム」の固定ページタイトルを「お問い合せ」で作成してあります。

③　「メニューに追加」をクリックする。

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

これで「フッターメニュー」に「お問い合わせフォーム」のページ追加が終了しました。

実際にブログを開いてみて、フッターに「お問い合わせフォーム」へのリンクが表示されているか確認してみてくださいね。

2.　「カスタマイズ」から設置する方法

WordPressの「外観」→「カスタマイズ」から「お問い合わせフォーム」をフッターメニューに設置する方法です。

「カスタマイズ」から設置する方法では実際の表示画面を確認しながら作業することができます。

手順の説明は多少長くなりますが、実際は案内通りにやれば「フッターメニュー」の作成から「お問い合わせフォーム」の設置まで簡単に行うことができます。

STEP.1　WordPressの「外観」→「カスタマイズ」を選択する

STEP.2　「メニュー」を選択する

STEP.3　「メニューを新規作成」をクリックする

STEP.4　「メニュー名」入力と「メニューの位置」を選択して「次」をクリック

「メニュー名」は「フッター」とでも入力しておけば大丈夫です。

「メニューの位置」は「フッターメニュー」を選択してください。

STEP.5　「項目を追加」をクリックする

STEP.6　「フッターメニュー」に追加したいページをクリックする

※　ここでは「お問い合せフォーム」の固定ページタイトルを「お問い合せ」で作成してあります。

試しに「ホーム」と「お問い合せ」をクリックしてみます。

「フッターメニュー」に「ホーム」と「問い合せ」が追加されて、下の画像ではわかりにくいかもしれませんが右下の画面に表示されているのがわかると思います。

最後に「公開」をクリックすれば終了です。

AFFINGER6で「お問い合わせフォーム」を「フッターメニュー」に設置する方法はどちらの方法でもいいと思いますが、実際の表示を確認しながら操作できるので「カスタマイズ」の方が初心者の方はイメージしやすいかもしれません。

AFFINGER6の使い方

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

AFFINGER6：関連記事