【wordpress】Googleフォトにある画像を表示するプラグイン

wordpressで画像を表示する際に、Googleフォトにアップロードしてある画像を表示するプラグイン「Photo Express for Google」をご紹介します。

以前はプラグインを使わず、右クリックで「画像アドレスをコピー」してimgタグで表示してました。
が・・・少し経つと画像が表示されなくなるという事態に。。。

なので、プラグインを使用してGoogleフォトにアップロードしている画像を表示することにしました。

使用するプラグインは「Photo Express for Google」というプラグインです。
簡単に画像を挿入することができ、画像のサイズ指定なども出来てすごい便利です！

こんな感じで、投稿画面でGoogleフォトの画像がモーダル上に表示されて、クリックで簡単に画像を挿入できます。

Photo Express for Googleをインストール

プラグイン新規追加で「Photo Express for Google」を検索し、インストール

「プラグインを有効化」リンクをクリック

Photo Express for Googleの設定

Googleフォトの画像を挿入できるように設定していきます。
設定を行わないと、以下のように画像が表示されず、Googleフォトの画像が挿入できませんでした。
投稿画面の「メディアを追加」の横にアイコンが表示されているので、クリックしてみるとわかります。

Photo Express for Googleの設定画面表示

「設定」 > 「Photo Express for Google」で設定画面を表示出来ます。

「Click here to configure private access to Google Photo」リンクをクリック

「Google OAuth Client Details」の設定のStep1の画面が表示されます。
9、10に記載されているURLをテキストエディターなどに残しておいてください。後で使用します。

「Google Developer Console」リンクをクリック

Google APIのプロジェクト作成画面が表示されます。
プロジェクト名に任意の名称を入力し、同意するの「はい」にチェックを入れて「保存」ボタンをクリック。
プロジェクト名は何でもいいです。「Google Photo WordPress Plugin」とかで良いかと思います。

OAuth同意画面の設定

プロジェクトの作成が完了すると認証情報の画面になり、「OAuth同意画面」のタブが出てくるので、「OAuth同意画面」のタブをクリック。
メールアドレスにはGoogleにログインしたメールアドレスが入力されていると思いますので、そのままでOK。
「ユーザーに表示するサービス名」に任意の名称を入力します。
「Google Photo WordPress Plugin」とかで良いかと思います。
「保存」ボタンをクリックし、保存します。

認証情報の設定

「認証情報」タブをクリックし、「認証情報を作成▼」ボタンをクリック
「OAuthクライアントID」を選択。

認証情報の入力画面が表示されるので、以下の内容を入力し、「作成」ボタンをクリック

OAuthクライアントID（OAuth Client ID）とOAuthクライアントシークレット（OAuth Client secret）が表示されるので、テキストエディタなどに保存しておいてください。
保存したら、この画面（Google API）は閉じてもOKです。

wordpressのPhoto Express for GoogleでOAuthの設定

wordpressのPhoto Express for Google設定画面に戻って、先ほどのOAuthクライアントID（OAuth Client ID）とOAuthクライアントシークレット（OAuth Client secret）を入力します。

入力が完了したら、「Save Details」ボタンをクリック。
「Continue」ボタンが表示されるので、クリック。

Photo Express for GoogleのSTEP2の設定

「link」リンクをクリック。
「写真と動画を管理」の許可リクエスト画面表示されるので、「許可」をクリック。

ここでエラー画面が表示される場合があります。
「400. That' an error. Error: redirect_uri_mismatch」のエラーです。
これは、「認証情報の設定」のところで「承認済みのJavaScript生成元」「承認済みのリダイレクトURI」を未入力または、間違っている場合にエラーになります。

以上で完了です。
Successfully・・・が画面に表示されていればOKです。

お疲れさまでした！