HOME  /WordPress(初級)
 /Contact Form 7のインストールとメール設定
2020年03月27日

Contact Form 7のインストールとメール設定


 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。

これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

1.Contact Form 7をインストールする

1.ダッシュボードの『プラグイン→新規追加』を実行し、検索画面で『Contact Form 7』を入力する。

表示された画面で、いますぐインストールボタンを挿入する。

2.表示された画面で、プラグインの有効化を実行する

以上で『Contact Form 7』のインストールが完了しました。
完了するとダッシュボードに『お問い合わせ』のメニュが追加されます。

2.Contact Form 7のメール設定を行う

Contact Form 7のメール設定には

・Contact Form 7の設定

・固定ページにContact Form 7を設定する

・実際にメールを送ってみる

があります。順番に説明をしていきます。

1)Contact Form 7の設定

①お問い合わせ→コンタクトフォームを実行する。

下記画面が表示されます。

②コンタクトフォーム1をクリックして開き、内容を編集する。

フォームの名前を『お問い合わせメールフォーム』等の任意の名前に変更して、保存してください。
ショートコードが更新されます。

尚、その他の変更については、Contact Form 7のカスタマイズで説明しますので現在はそのままで良いです。

③お問い合わせ→コンタクトフォームに戻る

ショートコードの所にカーソルをセットし、『Ctrl+C』でクリップボードにコピーしてください。

2)固定ページにContact Form 7を設定する

①『固定ページ→新規作成』で新規ページを作り、本文の所で、『Ctrl+V』でシュートコードを張り付ける。

『公開』ボタンを挿入して、上記の固定ページを保存してください。

②『外観→メニュー』で、上記で登録した『お問い合わせ』をメニュに加えてください。

お問い合わせメニューが追加されました。

3)実際にメールを送ってみる

①お問い合わせメニュを挿入してください。

②表示された画面に適当にメッセージを入れて、送信ボタンを挿入してください。

 

③下記のエラーメッセージがでますか?

Contact Form 7は、WordPressがインストールされているドメインのSMTPサーバを使ってメール配信する前提で作られています。

よって上記メッセージが出る場合は外部のSMTPサーバ経由でメールを送信するする必要があります。

3.外部のSMTPサーバ経由でメールを送る方法

『WP-Mail-SMTP』というプラグインを使うと外部のSMTPサーバからメールが送れるようになります。

考えられる外部のSMTPサーバとしてはGmailやYahooメールがあります。

しかしYahooメールは『Yahoo!デリバーの登録』が必要になるので私はGmailを使いました。

1)GmailのSMTPサーバを使う方法

しかしGmailのSMTPサーバにも制限があります。
GmailはSMTPサーバをアクセスするクライアントのセキュリティレベルが低いとメールを送ってくれません。

今、使おうとしている『WP-Mail-SMTP』もこの制限に引っかかります。

 

このサイトを作った当時はGoogleアカウントのセキュリティを『安全性の低いアプリのアクセスを許可にする』設定をすれば問題なかったのですが、現在は『Googleアカウントの2段階認証』+『アプリパスワード』を利用しないとダメになりました。

この設定方法は下記のURLを参照してください。

Googleのアプリパスワードの設定方法

 

2)WP-Mail-SMTPインストール

①ダッシュボードの『プラグイン→新規追加』を実行し、検索画面で『WP-Mail-SMTP』を入力する。

表示された画面で、いますぐインストールボタンを挿入する。

②表示された画面で、プラグインの有効化を実行する

以上で『WP-Mail-SMTP』のインストールが完了しました。

3)WP-Mail-SMTPの設定

完了するとダッシュボードの中に『WP Mail SMTP』というメニュが追加されます。起動してください。

WP Mail SMTP→設定を起動します。

①メーラは「Ohter SMTP」を選択します。

 

②SMTPの設定は下記で設定して下さい。

・SMTP   :smtp.gmail.com

・暗号化   :SSL

・Port番号 :465

・Auto TSL :ON

・認証    :ON。

 

③Gmailのアカウントとパスワードを設定する

SMTP Username:これが2段階認証を設定したアカウントです。

SMTP Password :ここがアプリパスワードになります。

上記の設定が終わったら、必ず『Save Setting』を実行してください。

 

③メールテストを行う。

メニュから「Email Test」を選択します。Send Toに貴方のメールアドレスを入れて「Send Email」ボタンを挿入します。

メールが正常に送れたら、『WP-Mail-SMTP』は正常に稼働しています。

 

4.最終確認

最後にメニューのお問い合わせボタンから、メール送信を確認してください。

正常にメールが送れるはずです。

 

<ドキュメントガイド>

前のテーマ: Twenty Twelveのメニューを設定する

次のテーマ:Contact Form 7のカスタマイズ

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。