はじめに
レンタルサーバーでの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をインストールします。
インストール後は、「一般」から以下の設定の必要です。
- 以下の図のように設定します
- 送信元アドレス : これは、WordPressの設定から自動的に入力される
- 送信者名 : 同上
- メーラー : ここをGoogleに設定します

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

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

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

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

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

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

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

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

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

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

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

- 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