Cocoonでのお問合せページとフッターメニューの作り方まとめ

初心者のWordPress
この記事は約4分で読めます。

このブログにお問い合わせフォームのページを追加しました。

これで訪問者がメールを使って問い合わせが出来るようになりました

 

何も知らないゼロから初めてネットで調べながら作成しましたが、作成方法を最初から最後までまとめたサイトが無かったのでまとめの記事にしました。

 

スポンサーリンク

「お問い合わせ」の仕様

私が作成した「お問い合わせ」の仕様は下記のようになります。

  1. フッターに「お問い合わせ」のメニューを設置する
  2. 「お問い合わせフォーム」に入力した訪問者へメールを自動返信する
  3. このブログの環境
  • WordPressで作成
  • テーマのCocoonを使用
  • レンタルサーバーはエックスサーバー

 

下の画像のようにページ下部のフッターに「お問合せ」のメニューを追加しました。

(ついでにホームのメニューも追加しました。)

 

下はこのブログの「お問い合わせページ」になります。

お問い合わせ
メールでの問い合わせはこちらからになります。 ブログ運営者に直接連絡を取りたい場合はこちらをご利用ください。

 

「お問い合わせ」作成の手順まとめ

作業する順番は次のようになります。

  1. 「エックスサーバー」で独自ドメインメールアドレスの取得と設定
  2. WordPressプラグインの「Contact Form 7」でお問い合わせフォームを作る
  3. 「お問い合わせ」の固定ページを作る
  4. フッターに「お問い合わせ」のメニューの設置

 

「エックスサーバー」で独自ドメインメールアドレスの取得と設定

GoogleのGmailなど既に利用しているメールアドレスを使う場合はこの作業は必要ありません。

私は自動返信で「問い合わせいただきありがとうございます…」のメールを送る仕様にしたのでこの作業を行いました。

自動返信の送信元のアドレスとして使うためです。

タケシ
タケシ

不特定多数の人にプライベートのメールアドレスは知られたくないからです。

 

エックスサーバーで独自ドメインのメールアドレスを取得する方法になります。

メールアカウントの追加 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|サーバーパネルからメールアカウント(メールアドレス)を追加するための手順を記載しています。

 

エックスサーバーでメールをGmailに転送する設定もしました。

メール転送設定 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|エックスサーバーで作成したメールアドレスに到着したメールを任意のメールアドレスに転送する「メール転送設定」機能のご案内です。

 

取得したメールアドレスの送受信はエックスサーバーのWEBメール使います。

WEBメール - ログイン | レンタルサーバーならエックスサーバー

 

Gmail等のメールソフトを使って取得したメールアドレスを使うことも出来ます。

メールソフトの設定 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|サーバーパネルで作成したメールアドレスを各メールソフトで使用する際の設定内容について記載しています。

 

WordPressプラグインの「Contact Form 7」でお問い合わせフォームを作る

Contact Form 7を使ってお問い合わせフォームを作成して、固定ページに貼り付けるショートコードを取得します。

 

※Contact Form 7はCocoonテーマでもお勧めされているプラグインです。

Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
WordpressテーマCocoonは、ある程度自前でサイト運営に必要な機能を備えています。ただ、すべての機能を同梱するわけにはいかないので、この記事で紹介するプラグインで機能を補完することで更にサイト運営能力を高めることができます。

 

Contact Form 7のインストールからお問い合わせフォームのショートコードを取得する手順です。

【簡単】Contact Form 7(WordPressお問い合わせフォーム設置)の使い方徹底解説 - カゴヤのサーバー研究室
【WordPressでサイトを運営しているのであれば、お問合せフォームは専用プラグイン「Contact Form 7」で簡単に設置できます。Contact Form 7は、初心者の方でも簡単に扱うことができるおすすめのプラグインです。ここで...

 

「お問い合わせ」の固定ページを作る

あとは取得したショートコードを固定ページの本文に貼り付けるだけになります。

その他に追加したい文章があればここに記入します。

 

私は下の文章だけ記載しました。

「メールでの問い合わせはこちらからになります。

ブログ運営者に直接連絡を取りたい場合はこちらをご利用ください。」

 

フッターに「お問い合わせ」のメニューの設置

これが最後の作業になります。

ここでの作業はテーマのCocoonで行います。

フッターメニューを設定する方法
サイトフッターにある補助メニューの設定方法です。

 

動作確認

お問い合わせページを作ったら必ず自分で試しに使ってください。

サーバー・プラグイン・テーマCocoonと複数の場所で作業をしているので、私のような初心者はミスをしやすいからです。

コメント

タケシ

1970年代前半生まれの神奈川県在住の男です。製造業でエンジニアをしていましたが、今は持病があり障がい者雇用で働いています。宜しくお願いいたします。

タケシをフォローする
スポンサーリンク
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました