Luxeritas(ルクセリタス)
Contact Form 7の問い合わせメールを
WP Mail SMTPを使い Gmailで送信する設定
Raspberry Pi で構築した「Luxeritas(ルクセリタス)」サイトのサーバーにはメール環境がないため、問い合わせメールが送信できない。そこで、 『WP Mail SMTP』と言うプラグインで、Gmail のサーバー を使って送信が出来る様にした。
以下、Contact Form 7のメールを WP Mail SMTPを使い Gmailで送信出来る様にした記録。
1. OAuth(オーオース)認証の取得
Google Cloud Platformにアクセスし、
「クライアントID」と「クライアントシークレット」を取得する。
左上の三本線をクリックしてメニューを開き、「APIとサービス」の中の「ダッシュボード」をクリックする。
![左上の三本線をクリックしてメニューを開き、「APIとサービス」の中の「ダッシュボード」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「APIとサービスの有効化」をクリックする。
![「APIとサービスの有効化」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
検索欄に「gmail」と入力する。
![検索欄に「gmail」と入力する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
表示された、Gmail APIをクリックする。
![表示された、Gmail APIをクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「有効にする」をクリックする。下記例では「管理」になっている。
![「有効にする」をクリックする。下記例では「管理」になっている。](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
ダッシュボード画面に戻るので、左側のメニューから「認証情報」をクリックする。
![ダッシュボード画面に戻るので、左側のメニューから「認証情報」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「認証情報を作成」をクリックし、「OAuthクライアントID」を選択する。
![「認証情報を作成」をクリックし、「OAuthクライアントID」を選択する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
アプリケーションの種類から「ウェブアプリケーション」を選択し、名前の欄に【サイト名等分かりやすい名前】を入力し、「作成」をクリックする。
![アプリケーションの種類から「ウェブアプリケーション」を選択し、名前の欄にこのサービスの名前(分かりやすい名前)を入力し、「作成」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「クライアントID」と「クライアントシークレット」が発行されるので、コピーして保存しておく。
![「クライアントID」と「クライアントシークレット」が発行されるので、コピーして保存しておく](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
2. WP Mail SMTPに認証情報を設定
WP Mail SMTPに、
「クライアントID」と「クライアントシークレット」を設定する。
プラグイン「WP Mail SMTP」をインストールして、有効化する。
![プラグイン「WP Mail SMTP」をインストールして、有効化する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
管理画面のメニューに「WP Mail SMTP」が追加されるので、「設定」をクリックする。
![管理画面のメニューに「WP Mail SMTP」が追加されるので、「設定」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「WP Mail SMTP」の「設定」画面が表示される。
![「WP Mail SMTP」の「設定」画面が表示される](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「メール」セクションの「メーラー」から【
Gmail 】を選択する。
![「メール」セクションの「メーラー」から【 Gmail 】を選択する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「 Gmail 」セクションの「Client ID」と「Client Secret」に、上記で保存した「クライアントID」と「クライアントシークレット」を貼り付け、「Save Settings」をクリックする。
![「 Gmail 」セクションの「Client ID」と「Client Secret」に、上記で保存した「クライアントID」と「クライアントシークレット」を貼り付け、「Save Settings」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
この時、「Authorized redirect URI」のURLをコピーして置く。
3. WP mail SMTPの認証
WP mail SMTPを、
Gmailのアカウントで認証する。
再度、Google Cloud Platformの画面に戻り、「承認済みのリダイレクトURI」の「URI を追加」をクリックし、先ほどコピーして置いたURLを貼り付け、「保存」をクリックする。
![「承認済みのリダイレクトURI」で「URI を追加」をクリックして、先ほどコピーして置いたURLを貼り付け、「保存」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
もう一度、WP mail SMTPの設定画面に戻り、「Allow plugin to send emails using your Google account」をクリックする。
![もう一度、WP mail SMTPの設定画面に戻り、「Allow plugin to send emails using your Google account」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
Googleアカウントの選択画面が出るので、対象のサイトで使いたい【Gmailアカウント】を選択する。
![Googleアカウントの選択画面が出るので、対象のサイトで使いたい【Gmailアカウント】を選択する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「このアプリは確認されていません」という警告が表示されるが、「詳細」をクリックする。
![「このアプリは確認されていません」という警告が表示されるが、「詳細」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
続けて、「(安全ではないページ)に移動」をクリックする。
![続けて、「(安全ではないページ)に移動」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
「対象のサイトへの権限の付与」の許可が求められるので、「許可」をクリックする。
![対象のサイトへの権限の付与の許可が求められるので、「許可」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
更に、サイトが信頼できるか聞いてくるので、「許可」をクリックする。
![更に、サイトが信頼できるか聞いてくるので、「許可」をクリックする](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
以上で、WP mail SMTPの認証が完了となる。
![以上で、WP mail SMTPの認証が完了する](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
現在のサイトをGoogle APIプロジェクトに正常にリンクしました。 これで、Gmail経由でメールを送信できるようになりました。
「Authorization」の横に、【Connected as ~メールアドレス~】と表示されるので、Gmail経由でメールをが送信出来る様になったことが判る。
![「Authorization」の横に、【Connected as ~メールアドレス~】と表示される](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
4. メール送信テスト
「Email Test」に移り、「Send To 」に適当なメールアドレスを入力し、メールを送信してみる。
![「Email Test」に移り、「Send To 」に適当なメールアドレスを入力しメールを送信してみる](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
テストメールの送信成功。
![テストメールの送信成功](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
登録した送信者と送信者名から、テストメールが送られくる。
![登録した送信者と送信者名から、テストメールが送られくる](https://arakoki70.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
以上。
(2020.02.06)