【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」を検索し、インストール

Photo Express for Googleをインストール

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

プラグインを有効化

Photo Express for Googleの設定

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 OAuth Client Details Step1

Google OAuth Client Details Url

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

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

OAuth同意画面の設定

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

認証情報の設定

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

Google Developer 認証情報タブ Google Developer OAuthクライアントID選択

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

アプリケーションの種類 ウェブアプリケーション
名前 任意の名称。「Google Photo WordPress Plugin」など
承認済みのJavaScript生成元 「Photo Express for Googleの設定画面表示」で保存しておいた9のURL
承認済みのリダイレクトURI 「Photo Express for Googleの設定画面表示」で保存しておいた10のURL
Google Developer 認証情報入力

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)を入力します。
Photo Express for GoogleでOAuthの設定

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

Photo Express for Google OAuthのContinueボタン

Photo Express for GoogleのSTEP2の設定

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

Photo Express for GoogleのSTEP2の許可リクエスト画面

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

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

お疲れさまでした!

SNSでもご購読できます。