[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 [2020/09/13]

はじめに

レンタルサーバーでのWordPressの運用とは違い、Synology NASにWordPressを構築して、サイト外へのメール送信するには、少し面倒な作業をしなければなりません。自分が選んだ道であり仕方がいなのです。

今回の作業は、「WP Mail SMTP by WPForms」プラグインのインストール、およびGmail API (Google Developer Consoleの設定)によって、WordPressおよびその他のプラグインが、サイト外にメールを飛ばせるようにします。例えば、以下のケースです。

• コンタクトフォーム・プラグイン
  • WordPressには、基本情報として訪問者のemailアドレスを記入し保管しています
  • 訪問者が、コンタクトフォームに当サイトへの質問、コメントを記載して送信するとき、その内容を、管理者メールアドレスに送信されます。この時、今回のプラグイン「WP Mail SMTP by WPForms」とGoogle Developer Consoleの「APIの作成」が必要です
• Ultimate Member プラグイン
  • Ultimate Memberは、メンバーシップを構築できるプラグインです。
  • 訪問者が当サイトにemailを新規登録する場合、その申請内容を管理者メールアドレスに送信されると共に、訪問者が記載したメールアドレスに、確認用のメールを当サイトから送信します。いずれにも、今回の作業が必要です
• UpdraftPlus プラグイン
  • UpdraftPlusは、WordPressとプラグインなど、全体的をバックアップ、リストアするツール・プラグインです
  • バックアップを開始した後、作業が終了した際に、管理者メールアドレスに、終了通知のemailを送信します。この送信を可能にするには、今回の作業が必要です

準備

「Google Developer console」でOAuth 2.0 クライアント IDを設定します。そのために、Google Developer consoleを使用可能にしてください。

プラグインのインストール

WP Mail SMTP by WPFormsをインストールします。

インストール後は、「一般」から以下の設定の必要です。

1. 以下の図のように設定します
2. 送信元アドレス : これは、WordPressの設定から自動的に入力される
3. 送信者名 : 同上
4. メーラー : ここをGoogleに設定します

次に、以下の設定が必要ですが、その値は、Google Developer ConsoleのAPIの設定と同時に進めていきます。

1. ①と②は、Google Developer Console APIを設定して完了後に使用可能になります。そこからコピペします。
2. ③は、このプラグインから提供させる値です。この値をGoogle Developer Console APIの「OAuth クライアント IDの作成」のURIの設定に使用します。まずは、右横のアイコンをクリックしてコピーしておきます

API プロジェクトの作成

Google Developer Consoleに入ります。

1. 以下の図のような画面が現れます。以下の作業を進めます。
2. メニューの「My Project」をクリックすると、「プロジェクトの選択」画面が現れます(図1)
3. 右上の「新しいプロジェクト」をクリック

1. 適当なプロジェクト名で、「プロジェクト」を作成(既存のプロジェクトにGMAIL APIがあれば、それを使用しても良い)

1. メニューの「My Project」から作成した「プロジェクト」を選択
2. もしも、左メニューの「認証情報」をセレクトしてあれば、選択した「プロジェクト」の「認証情報」画面が現れます
3. その画面の一段目に、「同意画面の構成」ボタンが現れます。これをクリック。もしくは、左メニューの「OAuth 同意画面」をクリック

1. 「OAuth同意画面」が現れるので、外部をチェック(内部はセレクトできない)して、「作成」ボタンをクリック

1. 図は示しませんが、以下のような設定項目が現れるので設定していきます
2. アプリケーション名 :プラグインがわかるように適当な名前
3. サポートメール : Google Developer Consoleにログインしたメールアドレスが自動に入力されている
4. 承認済みドメイン : harikiri.diskstation.me
5. 「アプリケーション ホームページ」リンク : 同上(正確には、リンクですが、これでもOK)
6. 「アプリケーション プライバシー ポリシー」リンク : 同上(正確には、リンクですが、これでもOK)
7. 「アプリケーション利用規約」リンク : 必要ないようです
8. 「保存」をクリック
9. 確認画面が現れます。この設定内容は、左メニューの「OAuth同意画面」をクリックすると確認してできます。よく読んでみると、
10. 確認ステータス : 検証は不要です、とあります。
11. ユーザーの種類 : 外部
12. OAuthレート制限
13. 以上で、ようやく、「OAuth クライアント IDの作成」が可能となりました

OAuthクライアント IDの作成

1. 「認証情報」のメニューの「認証情報を作成」をクリックすると、更に目にメニューが現れます。二番目の「OAuthクライアント ID」をクリック

1. アプリケーションの種類を「ウェブアプリケーション」に設定します

1. その後、以下の設定を進めます
2. ①は、とくに必要ないかもしれません。
3. ②は、プラグインからのコピペです。

1. 設定が完了すれば、メニューの「My Project」からプロジェクトを選択すると、「OAuth 2.0 クライアント ID」の項目にリストが追加されています
2. その追加された項目リンクをクリックします。

1. ③と④の「クライアント ID」と「クラアンスト シークレット」をコピーして、WP Mail SMTP by WPFromsプラグインの設定項目に、それぞれペーストします。

1. プラグインの設定項目にペーストします。
2. 最後に、「Authorization」項目で、橙色のボタン「Allow plugin to send emails using your Google account」をクリックします。

1. Google Developer ConsoleでのAPI設定が正しく実施されていレバ、以下のような画面になります。

以上で、プラグインとGMAILのAPIの設定が完了しました。Email Testで送信テストを実施してみてください。

これで完了です。

参考文献

WP Mail SMTP Documentation

https://wpmailsmtp.com/docs/how-to-set-up-the-gmail-mailer-in-wp-mail-smtp/

参考文献

Gmail APIでクライアントIDを有効にするまでの手順

https://spica.tokyo/note/275