アフィンガー ワードプレステーマ

【アフィンガー6】お問い合わせフォームを簡単に設置しよう!

ブログの記事も増えて、質問や連絡を受けるためにお問い合わせフォームを作りたいんだけど、アフィンガーのテーマ自体ではお問い合わせフォームは作れないよね。。自作で作るのは難しいそう。。

お問い合わせフォームかあ。。
そうだね。普通に作るとなるとHTMLやCSSあと、ブログラム的な要素もあるから、ちょっと大変なんだけど、「Contact Form 7」っていうフォームのプラグインがあるんだ。
プラグインをインストールしてちょっとの設定でお問い合わせフォームが出来るんだ。
早速、解説するね。

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

記事の対象の方について

こちらの記事はアフィンガー6をインストールし、初期設定を終えてブログを始める段階の方の対象を想定としています。

アフィンガーの初期設定は別記事にて解説していますので、よろしければこちらをお先にご覧ください。

【アフィンガー6】お問い合わせフォームの設置の方法

「Contact Form 7」というプラグインでお問い合わせフォームページが簡単に設置できます。
まずはインストールから始めていきましょう。

Contact Form 7のインストール

まずはワードプレスの管理画面であるダッシュボードメニューから「プラグイン」矢印「新規追加」をクリックします。

プラグイン新規追加ページの検索フォームに「Contact Form7」と入力してください。

Contact Form7のサムネイルが表示されるので、「今すぐインストール」をクリックしましょう。

インストールが完了すると「有効化」と表示されるので、「有効化」をクリックします。

有効化するとダッシュボードメニューに「お問い合わせ」の項目が新たに表示されます。

Contact Form 7の編集設定

お問い合わせ」→「コンタクトフォーム」をクリックします。

「コンタクトフォーム1」というリストが作られているので、クリックしましょう。

コンタクトフォームの編集ページにアクセスされます。

編集ページには「フォーム」「メール」「メッセージ」「その他の設定」の4つの設定タブが並んでいます。

といっても特段扱うところは少ないので、1つずつ解説していきます。

フォーム」の設定タグにはお問い合わせの各フォームを作るHTMLが入力されています。

「名前」「メールアドレス」「題名」「メッセージの本文」の4つのフォームと「送信」ボタンが作成されていますので、特にカスタマイズする必要はありません。

メール」の設定タグはフォームから送られてきたメッセージを受信するメールのヘッダー部分の設定になります。

基本は、送信先と送信元のメールは同じになります。

デフォルトの設定だと、ダッシュボードメニューの「設定」→「一般」、一般設定の中にある「管理者メールアドレス」のアドレスがそのまま送信先と、送信元のアドレスとして反映されています。

メッセージを受け取るアドレスを違うアドレスに変更したい場合は「送信先」のフォームの[_site_admin_email]の部分をdeleteキーで削除して、メッセージを受け取りたいメールアドレスを入力してください。

メッセージ」の設定タブはメッセージが送信される時に正常に送られた場合や不具合、問題があった場合に表示されるメッセージの設定になります。

かなりの数の設定フォームがありますが、初期の段階できちんとメッセージが入力されていますので、特に中身を編集する必要もないかと思います。

(下記のメッセージ設定タブの内容は長いので、一部だけ表示しています。)

その他の設定」は特に内容を確かめる必要ないので、ここでは紹介も省きます。

最後にコンタクトフォームの編集ページの頭にあるフォーム(コンタクトフォーム1と入力されている)にお問い合わせと入力しておきます。

ステータスにある「保存」ボタンをクリックして保存します。

コンタクトフォームが保存されました。」と表示されればOKデス。

コンタクトフォームの編集ページで先ほど入力したフォームの下に青いベタに白い文字コードが書かれている部分があります。

この文字コードをクリックすると選択できるので、これをコピーしておきます。

お問い合わせページの新規追加

次にお問い合わせページを固定ページで新規追加します。

「タイトルを追加」の部分に「お問い合わせ」と入力しましょう。

次に「ブロックを選択すうには「/」を入力」をクリックしてカーソルを表示させます。

先ほど、コンタクトフォームの編集ページでコピーした文字コードをペーストします。

コンタクトフォームを選択というセレクトボックスが表示されます。
ここに先ほど編集登録した「お問い合わせ」が表示されます。

ブログに反映させるため、「公開」ボタンをクリックします。

(まだブログに反映させたくない場合は「下書き保存」をクリックしてください。)

プレビューをして確認してみましょう。

お問い合わせフォームが作成されています。

メニューにお問い合わせページのリンクを追加

お問い合わせフォームが作成されましたが、実際のブログでは、お問い合わせフォームへのリンクがないので、今のところ表示することができません。

メニューにお問い合わせの項目を追加して、お問い合わせフォームを表示させてみましょう。

ダッシュボードメニューから「外観」→「メニュー」をクリックします。

メニュー設定ページにアクセスされます。

その中にあるメニュー項目にある「固定ページ」をクリックしましょう。

スライドして詳細設定の画面が表示されます。

全て表示」のタブを選択すると、(「最近」のタブでも大丈夫です)お問い合わせというチェック項目があるので、チェックを入れます

右側にあるメニュー構造の項目に「お問い合わせ」のブロックが表示されます。

この場合だと、現在一番下にある状態なので、メニューの順番でいえば、一番右端にレイアウトされている状態です。

今回は一つ上にある「プロフィール」と順番を入れ替えてみます。

「お問い合わせ」のブロックをクリックしたまま「プロフィール」の上(赤線)までドラッグして移動させます。

このように「プロフィール」のブロックの前に「お問い合わせ」のブロックが移動されていればOKです。

右下にある「メニューを保存」をクリックして保存します。

メニュー設定ページ上部にある「ライブプレビューで管理」をクリックしてプレビューを確認してみましょう。

このようにメニューの「お問い合わせ」が「プロフィール」の右に配置されています。

メニューの「お問い合わせ」をクリックするとお問い合わせフォームのページが表示されました。

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

まとめ

今回はお問い合わせページ設置の解説をいたしました。

インストールからブログへの設置まで10分くらいで、完了するかと思います。

ブログを始めて記事も増えてくると、色々と外部からの連絡手段が必要になってきます。

設置も簡単なので、ある程度、記事が増えてきたら、お問い合わせページの設置を考えておくと良いでしょう。

それでは長文を読んでいただきありがとうございました!

楽しいブログ生活をエンジョイしましょう!

スポンサーリンク

-アフィンガー, ワードプレステーマ