HOME  /WordPress(応用)
 /WP-Mail-SMTPを「Gmail API」で利用する方法
2021年02月09日

WP-Mail-SMTPを「Gmail API」で利用する方法

現在はこのプラグインではなく下記のプラグインを利用しています

 Gmail SMTPプラグインで、GmailのSMTPからメールを送る方法

理由は下記です。

 SynologyのWordPressサイトの性能改善事例

 

WP-Mail-SMTPをGmailで利用する方法には

①Gmailの「アプリパスワード」を使う

②Gmailの「API」を使う

方法があります。

 

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。

①の「アプリパスワード」を使う場合は下記を参照してください。

  Googleのアプリパスワードを使ってWordPressからメールを送信する方法

 

1.GmailのGmail APIを使う為の前提知識

Googleは、Googleアカウント単位で「Gmail」や「ドライブ」等の色々なアプリケーションを利用する機能を提供しています。

これはGoogleが提供するクラウド基盤(Google Cloud Platform)の中に、各種のアプリケーションを使う設定がされている為に利用できる仕掛けとなっています。

この「Google Cloud Platform」の中に「Gmail API」を立ち上げ、この中で「WP-Mail-SMTP」を認証する仕組みを作る事により、WordPressからのメールを受け取る方式です。

 

具体的には「Gmail API」の中でWordPressでメール送信をしたい「Authorized redirect URI」を認証した「Client ID」と「Client Secret」を作成し、「WP-Mail-SMTP」にセットする事によりメールをGmail経由で送る仕組みとなります。

 メモ

WordPressのURLを変更した場合は、「Gmail API」の設定を変更しないとメール送信ができなくなるので注意して下さい。

 

2.WP-Mail-SMTPインストールと確認

2-1.ダッシュボードの『プラグイン→新規追加』を実行し、検索画面で『WP-Mail-SMTP』を入力する。

下記のプラグインを見つけます。

■「今すぐインストール」を実行後、「有効化」ボタンを押します。

有効化が完了するとダッシュボードの中に『WP Mail SMTP』というメニュが追加されます。

 

3-2.「WP Mail SMTP→設定」を起動します。

①メーラはGoogle Gmailを選択します。

■Google Gmailを選択します。

 

②設定項目

上記の入力データは下記の「3.Gmail APIの呼び出しと設定」で作成します。

 

3.Gmail APIの呼び出しと設定

 メモ

Gmail APIを作成する手順は下記になります。

3-1.「Google Cloud Platform」に「プロジェクト」を作成する

「Gmail API」はプロジェクトという単位の中で稼動します。

3-2.「Gmail API」の呼び出しと「OAuth(オー オース)同意画面」の設定

「OAuth(オー オース)同意画面」がGmailにアクセスするIDになります。

3-3.「OAuth 2.0クライアント」の作成

「OAuth(オー オース)同意画面」を使ってアクセスするクライアントを定義します。

少し複雑ですが順番に説明していきます

3-1.「Google Cloud Platform」に「プロジェクト」を作成する

①Google Cloud Platformの呼び出し

下記のURLをクリックして下さい。

Google Cloud Platformの呼び出し

始めて「Google Cloud Platform」に入った場合は、利用規約への合意画面が表示されるので、合意をチェックしてください。

 

②Googleアカウントのチェック

下記画面が表示されます。

■右上のGoogleアカウントをクリックして、設定したいGoogleアカウントか?を確認します。

もし違う場合は、アカウントを変更して下さい。

 

③プロジェクトを作成します

作成したい「Gmail API」はプロジェクトの中の1機能となるので、始めに「プロジェクト」を作成します。

■上図の「プロジェクトの選択」をクリックします

下記、画面が表示されます。

■「新しいプロジェクト」をクリックします。

下記、画面が表示されます。

■システムが自動設定したプロジェクト名が表示されます。「作成」ボタンを押します。

プロジェクト名を変更しても良いですがあまり意味を持たないと思います。

下記ポップアップが表示されます。

■「表示」をクリックします。

下記のプロジェクト画面が立ち上がりました。

プロジェクトコードが表示されます。これで「Gmail API」を作成できる環境が整いました。

■「APIとサービス」をクリックします。

以降はこの画面で「Gmail API」の設定を行っていきます。

 

3-2.「Gmail API」の呼び出しと「OAuth(オー オース)同意画面」の設定

①「Gmail API」の呼び出し

APIサービスのメニュの中の「ライブラリ」から「Gmail API」を呼び込みます。

■「ライブラリ」をクリックします。

下記画面が表示されます。(下記は場面の一部分を表示しています)

■上記の検索BOXで「Gmail API」を検索し、表示された「Gmail API」をクリックします。

又はページの下の方にある「G suite」の「Gmail API」をクリックしても良いです。

■上記アイコンをクリックします。

下記画面が表示されます。

■「有効にする」をクリックします。

 

②Gmail APIの認証情報を作成します

下記画面が表示されます。

■「認証情報を作成」をクリックします。

認証情報の設定画面が表示されます。

■使用するAPI                :「Gmail API」を選択します。

■APIを呼び出す場所        :「ウェブサーバ」を選択します

■アクセスするデータの種類:「ユーザデータ」を選択します。

■「必要な認証情報」ボタンを挿入します。

下記画面が表示されます。

■「同意画面を設定」ボタンを押します。

下記画面が表示されます。

■ユーザタイプは「外部」を選択します。

作成者が「Google Cloud Platform」ユーザの場合は「内部」になるようです。

■「作成」ボタンを挿入します。

下記画面が表示されます(下記画面は必要な部分しか表示していません)

■アプリケーション名:任意の名前を付けます(例:WORDPRESS)

■その他に色々な設定がありますが、デフォルトで良いです。

■画面の下にある「保存」ボタンを挿入します。

下記画面が表示されます。

 上記で行った事

「WordPressサーバ」と「Gmailサーバ」の会話は「権限の認可」の「公開標準」である「OAuth 2.0」というプロトコールを使います。

上記の「OAuth(オー オース)同意画面」の「WORDPRESS」というという名称は、「Gmailサーバ」にアクセス権を要求する名前になります。

あとは誰がこの「WORDPRESS」を使ってGMAILにアクセス許可をするのか?の「OAuth 2.0クライアント」の設定を行います。

 

3-3.「OAuth 2.0クライアント」の作成

1)作成画面の呼びだし

■①を選択すると右の画面が表示されます。

■②をクリックするとプルダウンが表示されるので③をクリックします。

 

2)OAuthクライアントIDの作成

①アプリケーションの種類の設定

下記画面が表示されます。

■プルダウン▼をクリックして「ウェブアプリケーション」を選択します。

 

②クライアント名称の設定

下記が表示されます。

■クライアントを管理する為の重要な名前です。

複数のクライアントを作成する事も考えて名前を付けて下さい。

 

③JavaScript生成元

■ここにはWordPressのドメイン名を入れるのですが、この設定は通常不要です

このGoogleアカウントの「Search Console 」に「サイトのドメイン名を登録している」場合は有効ですが、メールを送りたいGoogleアカウントとサイトを管理したいGoogleアカウントが同一とは限りません。

 

④承認済みのリダイレクトURI

■「+URLを追加」をクリックして、「WP Mail SMTP」の「Authorized redirect URI」を貼り付けます。

■「作成」ボタンを挿入します。

下記画面が表示されます。

■「OK」で終了します。

下記が表示されます。

■上記のクライアントIDをクリックすると下記が表示されます。

以上で「Google Cloud Platform」での設定は終了です。

あとは「4.「WP-Mail-SMTP」側での追加設定」を実行します。

 

4.「WP-Mail-SMTP」側での追加設定

4-1.Gmail APIのデータを貼り付けます

■①②で設定を保存します

■③でGmailに認証を求めに行きます。

 

4-2.Gmailに認証を求めると

①始めに「どのGoogleアカウント」かの選択画面が表示されます。

設定したGoogleアカウントを選択して下さい。

 

②次に下記のエラーがでます。

このエラーは「JavaScript生成元のURL」が認証されてないからです。

しかしこの画面が出るのが通常です。気にしないで下さい。

■「詳細」をクリックします。

 

③警告メッセージが出ます。

■「安全でないページに移動」をクリックします

 

④ドメイン名への権限付与の画面が表示されます

■「許可」をクリック

 

⑤メールに指定ドメインへ権限を追加する確認画面が出ます

■「許可」をクリックします。

⑥認証が完了した事を示すメッセージが表示されます

■最後に「設定の保存」をクリックして終了です。

■接続を解除する場合は「Remove Connection」ボタンをクリックします。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

SynologyでWordPressを運用している時に、遅い!と感じる状況に遭遇しました。対策は①All in One SEOと②WP Mail SMTPの廃止です。この経緯を説明しています。

ここではWordPressからGmailのSMTPを介してメールを送る為に「Gmail SMTPプラグイン」を利用する方法を解説しています。このプラグインは「SMTP認証にOAuth2.0プロトコル」を利用するので、Gmailのセキュリティを守る事ができます。

WordPressサイトの公開後のプログラム変更は、サイトダウン等の危険性があるので難しくなります。そこで、私が行っているSyonologyを2台使った開発環境構築事例を紹介しています。

WordPressのメジャーアップデート(5.5や5.6)ではWordpressの更新が失敗する事があります。このような時にサイトを修復する方法を解説しています。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

ここでは、SynologyのNASの中でWordPressがどの様に稼働するか?を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

SynologyのNASのphpmyadminのセキュリティ対策として2要素認証を利用する方法を解説しています。尚、スマホを紛失した時の対応方法も解説しています。