この記事では、ワードプレスのプラグインWP Mail SMTPの「Client ID」「Client Secret」がよくわからないという質問が多いので説明をしていきます。
基本的にはGmailで送信することを想定して、「Client ID」「Client Secret」を入手していき、送信メールが迷惑メールに入らないように設定します。

WP Mail SMTPとは
30秒で説明すると、ワードプレスサイトから誰かしらにメールを送る場合。
たとえば、会員サイトで会員登録してれたら、自動返信でお礼のメールを送るなんていうときに、ワードプレスの設定項目でGmailのアドレスを設定していると、送信者はワードプレスサーバーだけど、実際に送っているのがGmailサーバーということになり、受け取り手はそのサーバーの相違から迷惑メール扱いで受け取ってしまいます。




それを防ぐために、Gmailから一度ワードプレスのサーバーを経由してメールを送るのがこのプラグインです。

プラグインのインストール
まずは、WordPressの管理画面にある左メニュー一覧から「プラグイン」にマウスを乗せて、表示された項目から「新規追加」をクリック。

すると、プラグインの追加画面が表示されるので、画面右上の「プラグインの検索」という入力欄に「WP Mail SMTP by WPForms」と入力。

以下をコピーしてご利用ください。
入力すると、すぐに結果が表示されます。
一番最初に表示された鳥のようなマークのものが該当のプラグインです。

※マークは変更になる場合があります。
「今すぐインストール」をクリックして、そのまま、「有効化」ボタンもクリックしましょう。


このプラグインが有効になると、専用のセットアップの画面が開きます。

「ダッシュボード」ボタンからワードプレスの管理画面に戻ることもできます。

その場合は管理画面左メニュー内の「設定」から操作していくことも可能ですが、特に設定項目の違いはないので、このままセットアップウィザードで進めていきます。
セットアップ画面では、画面中央の「始めましょう」をクリック。

すると、メーラー選択画面に移動するので、Gmailを選択して画面右下の、「保存して続行」をクリックします。

ポップアップで確認画面が表示されるので「I Understand,Continue」をクリックして、設定を続けていきます。

次の画面では「Client ID」「Client Secret」を入力する項目がありますが、それぞれを作成してからになるので、このページはいったんこのままにしてWEBアプリを作っていきましょう。

WP Mail SMTPの設定
GoogleアカウントでWebアプリを作成する
いきなり難しそうな話になりましたが、説明通り進めていけば簡単に作成できますのでご安心ください。
利用したいGmailのアカウントで、専用の「ID」と「パスワード」を作るというイメージです。

これがそのまま「Client ID」「Client Secret」になります。
まずは、利用したいGmailのアカウントにログインした状態で「Google CloudPlatform」にアクセスします。

Google CloudPlatformに移動すると「Google CloudPlatformでGmailAPIにアプリケーションを登録する」という名前のフォームが表示されます。

「利用規約」の同意にチェックを入れて「居住国」が「日本」になっていることを確認し、「同意して続行」をクリックします。

Googleからのメールを受け取るかの項目はどちらでも構いません。
「同意して続行」をクリックしても反応がないように感じますが、裏ではちゃんと動いているので、画面が変わるまで少しお待ちください。
画面が切り替わると、「APIが有効になっている」という表示が出るので、そのまま「認証情報に進む」をクリック。

認証情報の作成画面に移動するので、アクセスするデータの種類で「ユーザーデータ」にチェックを入れて、「次へ」をクリック。

次に、アプリ情報の入力画面が表示されるので必要事項を入力します。

アプリ名には何用に使うかわかりやすいように「WP Mail SMTP」と入れておきましょう。

「ユーザーサポートメール」にはご利用になる「メールアドレス」を入力します。
クリックするとメールアドレスが選択できるようになっているので選択しましょう。

「アプリのロゴ」は空欄で構いません。
「デベロッパーの連絡先情報」も先ほどのメールアドレスでOKです。

そのまま「保存して次へ」をクリック。
次の「スコープ」という項目は省略可能なので「保存して次へ」をクリックして飛ばします。
次に、「OAuthクライアントID」という項目で「アプリケーションの種類」をクリックして選択項目から「ウェブアプリケーション」を選択します。

「名前」の部分は識別用に使うだけなので「WP Mail SMTP」などと入力しておきましょう。

次の「承認済みのJavaScript生成元」は飛ばして、「承認済みのリダイレクトURI」にある、「+URIを追加」ボタンをクリック。

表示される入力欄に決められたURLを入力します。

Gmailを利用する場合は、このURLを入力してください。
このURLはプラグインのセットアップ画面にも表示されているのでそちらからコピーしてご利用ください。

入力ができたら、「作成」ボタンをクリックしてこの手順を完了します。

次の画面でクライアントIDが出てきますが、ここではいったん無視して、一番下の「完了」をクリックしましょう。

すると、APIキーやクライアントIDなどの項目が並んだページが表示されます。
このまま画面左メニューにある「OAuth同意画面」をクリック。

公開ステータスという項目が「テスト」になっているので、「アプリを公開」をクリック。

すると、「Googleアカウントを持っているすべてのユーザーがアプリを利用できるようになります」
というポップアップが表示されますが、このアプリにアクセスできるのはあなただけなので心配しなくても大丈夫です。

このアプリは、ワードプレスのサイト管理画面でのみ使用されます。

ポップアップ内の「確認」ボタンをクリックすると、公開ステータスが、テストから本番環境に移行します。

次に、画面左のメニューから「認証情報」をクリック。

表示された項目の真ん中にある「OAuth 2.0 クライアントID」という項目の中から右端にある鉛筆マークの「OAuthクライアントを編集」ボタンをクリックすると、「Client ID」と「Client Secret」が表示されます。

移動した先の画面右側に「クライアントID」と「クライアントシークレット」がそれぞれ表示されます。

入手したIDとキーの貼り付け
「クライアントID」と「クライアントシークレット」をそれぞれ間違いのないように丁寧にコピーしてプラグインのセットアップ画面に貼り付けましょう。

貼り付けできたら「Googleと連携」ボタンをクリックします。

するとアカウント確認画面が表示されます。

※アカウントがひとつの場合は表示されない可能性があります。
使用するアカウントを選択すると「このアプリはGoogleで確認されていません」という警告のような画面が表示されますが自分だけが使うアプリを作っただけなので、気にする必要はありません。

画面左下にある「詳細」ボタンをクリックして、表示された「(安全ではないページ)に移動」をクリックします。


すると、ポップアップで権限の付与が表示されるので、「許可」をクリック。

すると、ご自身のWEBサイトがあなたの代わりにメールを送信する許可を求める画面が表示されます。
内容を確認して改めて「許可」をクリック。

すると、認証成功の画面が表示されます。

「OK」をクリックすると、先ほどの画面に戻るので、スクロールして「Close and exit the Setup Wizard」をクリックしてワードプレスの管理画面に戻ります。

テスト送信で確認
後は正しく設定ができたか、テストメールを送信して確認するだけです。
ワードプレスの管理画面に戻ってきたら、WP Mail SMTPの設定画面が表示されているので、画面上部のタブから、「メールテスト」をクリックします。

送信先のメールアドレスに、ご自身が利用しているメールアドレスを入力して「メールを送信」をクリック。

これで、入力したメールアドレス宛にメールが届くので、迷惑メールに振り分けられず受信トレイに入っていたら成功です。

まとめ
お疲れ様でした。
ワードプレスでサイトを運営していると、何かしらの理由でメールを送信する場面は出てきますよね。
そんなときに、迷惑メール扱いになってしまっては開封してもらえないかもしれません。
自分宛に送るような場合でも、迷惑メールに入ってしまうと探すのが大変になってしまいます。
そんな場合はこのWP Mail SMTPを利用してみましょう。
ポイントは正しく「クライアントID」と「クライアントシークレット」を 取得することだけです。