WPFormsの通知先や迷惑メールを確認しても直らず、LIFE STEP LABではWP Mail SMTPとGmailを連携してメールを送る方法を設定しました。
この記事は、WP Mail SMTP無料版とGmail APIを使う手動設定の手順書です。Google Cloudの準備からOAuth、リダイレクトURIの登録、接続後のテストまで、実際の画面に沿って進めます。
まだ原因の切り分けが済んでいない方は、先にWPFormsのメールが届かないときの基本確認をご覧ください。
設定の全体像｜WP Mail SMTPとGmailを連携する
先に結論です。
僕の場合は、WP Mail SMTPを導入して、Google / Gmailと連携することで解決しました。
大まかな流れは次のとおりです。
| 手順 | やること |
|---|---|
| ① | WPFormsの通知設定を確認 |
| ② | WP Mail SMTPをインストール |
| ③ | Google / Gmailを選択 |
| ④ | Google Cloudでプロジェクトを準備 |
| ⑤ | Gmail APIを有効化 |
| ⑥ | Google Auth Platformを設定 |
| ⑦ | OAuthクライアントを作成 |
| ⑧ | リダイレクトURIを登録 |
| ⑨ | Client ID・Client Secretを設定 |
| ⑩ | Googleアカウントと接続 |
| ⑪ | WP Mail SMTPからテスト送信 |
| ⑫ | WPFormsから実際に問い合わせを送信 |
「12個もあるの？」と思うかもしれません。
僕も最初はそう思いました。
ただ、実際には画面を開く→指定された項目を設定する→次へ進むの繰り返しです。
この記事では順番に説明していきます。
今回使うWP Mail SMTPとGmail APIの仕組み
そこで使ったのがWP Mail SMTPです。
WordPressのメール送信を、選んだメールサービスへつなぐプラグインです。今回選ぶ「Google / Gmail」は、GoogleのGmail APIを利用します。GmailのSMTPサーバーへパスワードで接続する方式とは設定が異なります。
メールの送信方法を整える
導入前
環境によって届かないことがある
今回の設定
Gmail APIやOAuthって何？
設定を進めると、
- Gmail API
- OAuth
- Client ID
- Client Secret
- リダイレクトURI
といった言葉が出てきます。
ここで、
「お問い合わせフォームを直したいだけなのに急に難しすぎない？」
と思うかもしれません。
僕もそうでした。
でも、今回の設定であれば、最初から仕組みを完璧に理解する必要はありません。
| 用語 | 初心者向けのイメージ |
|---|---|
| Gmail API | Gmailの機能を利用するための仕組み |
| OAuth | Googleアカウントとの連携を許可する仕組み |
| Client ID | Google側がアプリを識別する情報 |
| Client Secret | 認証に使う秘密情報 |
| リダイレクトURI | Google認証後の戻り先として登録するURL |
Gmail APIの機能については、Google公式のGmail API概要も参考になります。
この記事では、何をどこに設定したのかを順番に見ていきます。
注意
Client Secretなどの認証情報はブログやSNSで公開しないようにしてください。
スクリーンショットを公開するときも、メールアドレス・Client Secret・不要なプロジェクト固有情報などは隠しておきましょう。
WP Mail SMTP＋Gmailを設定する手順
ここから実際の設定に入ります。画像の文字が小さい場合は、画像をタップまたはクリックして拡大表示できます。
① WP Mail SMTPをインストールする
WordPress管理画面から、
「プラグイン」→「新規プラグインを追加」
と進みます。
検索欄に、
WP Mail SMTP
と入力します。
表示されたWP Mail SMTPを、
「今すぐインストール」→「有効化」
の順に進めます。
無料版でも設定できる？
僕が今回行った方法は、無料版を使った手動設定です。
WP Mail SMTPにはGoogleとの設定を簡単にするOne-Click Setupもありますが、こちらは有料プラン向けの機能です。
この記事では、Google CloudでOAuth情報を作成する手動設定を進めます。
② 「Google / Gmail」を選択する
WP Mail SMTPを有効化したら、
「WP Mail SMTP」→「設定」
を開きます。
メーラーの一覧から、
「Google / Gmail」
を選択します。
ここからGoogle側の設定に入っていきます。
③ Google Cloudでプロジェクトを準備する
Google Cloud Consoleを開き、今回使用するGoogleアカウントでログインします。
すでに今回の設定で使用するプロジェクトがある場合は、そのプロジェクトを選択します。
新しく作成する場合は、プロジェクト選択画面から「新しいプロジェクト」を選びます。
プロジェクト名は、
「LIFE STEP LAB」
など、自分があとから用途を判断できる名前でOKです。
「そもそもプロジェクトって何？」
となるかもしれませんが、今回でいえば、
Gmail APIやGoogle認証に関する設定をまとめておく箱
くらいのイメージで大丈夫です。
なお、公開用スクショでは、記事の理解に必要ないプロジェクトIDやプロジェクト番号などは隠しておくと安心です。
④ Gmail APIを有効化する
続いて、
「APIとサービス」→「ライブラリ」
へ進みます。
検索欄で、
Gmail API
と検索します。
Gmail APIを開いて、まだ有効になっていなければ「有効にする」をクリックします。
すでに有効になっている場合は、「有効なAPIとサービス」などからGmail APIを確認できます。
ここでは、Gmail APIを有効にできればOKです。
⑤ Google Auth Platformを設定する
次に、Googleとの認証に必要な設定を行います。
Google CloudからGoogle Auth Platformを開きます。
ここには、
- ブランディング
- 対象
- クライアント
- データアクセス
などの項目があります。
Google側の画面はアップデートで名称や配置が変わる可能性があるので、スクショと完全に同じ場所にない場合は、項目名を目印にしてください。
ブランディングを設定
「ブランディング」を開きます。
ここではGoogle認証時に表示されるアプリ情報を設定します。
僕の場合はアプリ名を、
LIFE STEP LAB
としました。
ユーザーサポートメールなどを求められた場合も、画面に沿って自分が管理している情報を設定します。
「対象」を確認する
続いて「対象」を確認します。
僕が確認した環境ではユーザータイプは「外部」になっていました。
また、WP Mail SMTPの手動Gmail設定では、OAuthアプリの公開ステータスについても確認します。
「テスト」になっている場合は、WP Mail SMTPの現在の公式手順を確認しながら「本番環境（Production）」への変更を進めてください。
「本番環境」はアプリの公開ステータスを示すもので、Googleによる検証完了を意味するものではありません。
Google側は画面変更が比較的多いため、この記事の表示を完全再現することより、現在の画面で同じ目的の設定を行うことを優先してください。
⑥ OAuthクライアントを作成する
ここから少しややこしく見えますが、先に流れを整理すると、
WP Mail SMTPでリダイレクトURIを確認
↓
GoogleでOAuthクライアントを作成
↓
リダイレクトURIを登録
↓
GoogleからClient ID・Client Secretを取得
↓
WP Mail SMTPへ入力
です。
どの情報を、どちらへ渡す？
① リダイレクトURI
② Client ID・Client Secret
Google Auth Platformから、
「クライアント」→「クライアントを作成」
へ進みます。
アプリケーションの種類は、
「ウェブ アプリケーション」
を選択します。
名前は、自分が用途を判断できるものでOKです。次の手順でリダイレクトURIを登録してから、作成を完了します。
すでに作成済みの場合は、認証情報の一覧から対象のOAuthクライアントを開いて設定を確認できます。以下は作成後の一覧画面です。
⑦ リダイレクトURIを登録する
ここは僕が特に迷ったところです。
一度WordPressへ戻って、
「WP Mail SMTP」→「設定」→「Google / Gmail」
を確認します。
そこにAuthorized Redirect URI（承認済みリダイレクトURI）が表示されています。
僕の設定時には、
https://connect.wpmailsmtp.com/google/
が表示されていました。
ただし、実際に設定するときは自分のWP Mail SMTP画面に現在表示されているURIを確認してください。
これをコピーします。WP Mail SMTP側の入力欄は、次の「⑧」の画像でも確認できます。
Google Cloudへ戻り、OAuthクライアントの、
「承認済みのリダイレクトURI」
へ貼り付けます。
ここで注意したいのが、「承認済みのJavaScript生成元」と間違えないこと。
今回登録するのは、
「承認済みのリダイレクトURI」
です。
⑧ Client ID・Client SecretをWP Mail SMTPへ設定する
OAuthクライアントを作成すると、
Client ID
Client Secret
が発行されます。
Google側で取得した情報を、WP Mail SMTPの対応する欄へ入力します。
覚え方としては、
Google Cloud＝発行する側
WP Mail SMTP＝入力する側
です。
Client Secretは公開しない
ここは重要です。
Client Secretはブログ・SNS・動画などで公開しないでください。
公開用のスクリーンショットでは必ず隠します。
もし誤って秘密情報を公開してしまった場合は、そのまま放置せず、認証情報の無効化や再作成など適切な対応を行ってください。
⑨ Googleアカウントと接続する
Client ID・Client Secretを設定して保存したら、WP Mail SMTPからGoogleアカウントとの接続を開始します。
今回メール送信に使用するGoogleアカウントを選択し、表示される内容を確認しながら認証を進めます。
「このアプリはGoogleで確認されていません」と表示された場合
認証途中で警告が表示される場合があります。
ここで大切なのは、
「警告が出てもとりあえず進めばいい」
ではないということです。
自分自身でGoogle Cloudに作成したOAuthアプリであることや、アプリ名・Googleアカウントなどを確認したうえで判断してください。
自分で作った覚えのないアプリの場合は、そのまま認証を許可しないでください。
接続が完了したら、WP Mail SMTP側でGoogleアカウントが正常に接続されていることを確認します。
これでGoogleとの接続は完了です。
ただし、まだ終わりではありません。
「設定できた」ではなく「実際にメールが届いた」まで確認します。
WP Mail SMTPからテストメールを送信する
WordPress管理画面から、
「WP Mail SMTP」→「ツール」→「メールテスト」
へ進みます。
受信を確認できるメールアドレスを入力して、テストメールを送信します。
送信成功と表示されたら、実際にGmailなど受信先のメールを開きます。
ここでメールが届いていれば、WP Mail SMTPからメールを送信できることを確認できました。
でも、今回の目的はWPFormsのお問い合わせ通知を受け取ること。
最後に本番と同じ方法で確認します。
WPFormsから実際にお問い合わせを送信する
まずWPFormsで対象フォームを開き、
「設定」→「通知」
を確認します。
特に送信先メールアドレスが正しいか確認してください。
次に、自分のサイトのお問い合わせページを開きます。
読者が問い合わせるときと同じように、
- 名前
- メールアドレス
- 問い合わせ内容
などを入力して送信します。
テストだと分かるように、
「お問い合わせフォーム動作確認テスト」
などと入力しておくと分かりやすいです。
送信完了画面が表示されたら、通知先のメールを確認します。
ここまで確認できれば、今回の設定は完了です。
僕の場合も、
WPFormsでは送信完了
↓
でもメールが届かない
↓
WP Mail SMTP＋Gmailを設定
↓
テストメール成功
↓
WPFormsから実際に送信
↓
問い合わせ通知も受信
という流れで解決できました。
Gmail連携後に届かない場合の確認ポイント
接続やテスト送信でエラーが出たときは、次の項目を確認します。通知先・迷惑メール・Reply-Toなどの基本確認は、WPFormsの原因別チェック記事にまとめています。
① Google接続：接続済み表示を確認します。認証エラーがある場合は、その内容を残します。
② OAuth情報：Client IDとSecretが同じクライアントのものか、承認済みリダイレクトURIがWP Mail SMTP側と一致するか確認します。
③ Gmail APIと対象プロジェクト：OAuthクライアントを作成したプロジェクトでGmail APIが有効か確認します。
④ 送信元メールアドレス：接続したGoogleアカウント、または利用可能な設定済みエイリアスを使います。サイトのドメインに合わせるためだけに、別の未設定アドレスへ変更しないでください。僕の設定では「送信元メールアドレスを強制使用」をオンにしています。
それでも解決しない場合は、表示されたエラーコード・エラーメッセージを残しておくのがおすすめです。
「届かない」だけで調べるより、具体的なエラー内容が分かる方が原因を探しやすくなります。
設定完了までのチェックリスト
最後に全工程をまとめます。
| ✓ | 確認項目 |
|---|---|
| □ | WPFormsの通知先を確認した |
| □ | WP Mail SMTPをインストールした |
| □ | Google / Gmailを選択した |
| □ | Google Cloudのプロジェクトを準備した |
| □ | Gmail APIを有効にした |
| □ | Google Auth Platformを設定した |
| □ | OAuthクライアントを作成した |
| □ | リダイレクトURIを登録した |
| □ | Client ID・Client Secretを設定した |
| □ | Googleアカウントと接続した |
| □ | WP Mail SMTPのテストメールを送った |
| □ | 実際に受信できた |
| □ | WPFormsから問い合わせを送った |
| □ | WPFormsの通知メールも受信できた |
全部チェックできれば完了です。
よくある質問
WP Mail SMTPは無料版でも使える？
今回僕が行ったGoogle / Gmailとの手動連携は無料版で設定しました。
Googleとの設定を簡単にするOne-Click Setupなど、有料プラン向けの機能もあります。
この記事は無料版でGoogle Cloudを設定する方法を紹介しています。
Gmail APIは有料？
今回のような利用で「Google Cloudを開いた瞬間に料金が発生する」というものではありません。
ただし、Googleの利用条件・割り当て・料金体系などは変更される可能性があります。
設定時にはGoogleのGmail API公式情報も確認してください。
Client Secretをブログに載せてもいい？
載せないでください。
公開用スクリーンショットではClient Secretを隠します。
メールアドレスなど、手順上見せる必要のない個人情報も同様です。
WP Mail SMTPのテストは成功するのにWPFormsだけ届かない場合は？
まずWPFormsの通知設定を確認します。
テストメールが届いているなら、
「メール送信全体がおかしい」
と決めつけるのではなく、WPForms側の通知先などを確認して原因を切り分けてみてください。
Google Cloudの画面が記事と違います
Google CloudやGoogle Auth Platformは、アップデートによって画面構成や名称が変更されることがあります。
スクリーンショットと完全に同じ画面を探すより、
「今何を設定しようとしているのか」
を基準に、現在の項目名を確認してください。
画面が記事と違う場合は、WP Mail SMTP公式のGmail設定ガイドで最新の手順を確認してください。
一度設定したら今後は確認しなくても大丈夫？
お問い合わせフォームは、問題が起きても「問い合わせが来ない」だけなので気づきにくいです。
そのため、サイトの大きな変更やプラグイン更新後などには、実際にフォームからテスト送信しておくと安心です。
まとめ｜Gmailとの接続からフォームの受信確認まで
今回はWP Mail SMTPのGoogle / Gmailメーラーを選び、Google CloudでGmail APIとOAuthを設定する流れを紹介しました。リダイレクトURIはGoogle側へ、発行されたClient ID・SecretはWP Mail SMTP側へ入力します。
接続できたら、WP Mail SMTPのテストメールと実際のWPForms通知の両方を受信して完了です。
LIFE STEP LABでも実際の問い合わせ通知を受信できました。設定途中で迷ったときは、この記事の各手順と公式ガイドを見比べながら、一つずつ確認してください。
ブログの準備全体を見直したい方は、副業ブログの始め方やWordPress開設後に行った初期設定も参考にしてください。
コメント