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

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

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

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

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

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

[peg-image src="https://lh3.googleusercontent.com/-nVeVuWBpYak/V1bixMEvTNI/AAAAAAAAAN0/93vWZL2mdfwQofjEGWCe61AqbTk0smV0wCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-08%2B0.01.10.png" href="https://picasaweb.google.com/107888545635181725503/Web#6293466863979416786" caption="Photo Express for Googleモーダル" type="image" alt="Photo Express for Googleモーダル" image_size="992x592" ]

Photo Express for Googleをインストール

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

[peg-image src="https://lh3.googleusercontent.com/-K6UKCWEdKXc/V153jsjh0aI/AAAAAAAAAOc/y656T8bSQswNKlRnZNx0WJXFeU-1va-mACHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B22.45.09.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295600784249835938" caption="Photo Express for Googleをインストール" type="image" alt="Photo Express for Googleをインストール" image_size="1085x486" ]

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

[peg-image src="https://lh3.googleusercontent.com/-EsWYD39NGNQ/V1561_nAXFI/AAAAAAAAAPw/Sj2GijuG0HEgSEadgv8rYPbTMQDiwYmqQCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B22.45.36.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604397137222738" caption="プラグインを有効化" type="image" alt="プラグインを有効化" image_size="853x233" ]

Photo Express for Googleの設定

Googleフォトの画像を挿入できるように設定していきます。
設定を行わないと、以下のように画像が表示されず、Googleフォトの画像が挿入できませんでした。
投稿画面の「メディアを追加」の横にアイコンが表示されているので、クリックしてみるとわかります。
[peg-image src="https://lh3.googleusercontent.com/-f0QE54scTK4/V1561zbWK5I/AAAAAAAAAPw/xtE4FacUlZgwATsHXtGYB0K-fgtRlNm_QCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B22.59.36.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604393867094930" caption="Googleフォトの画像が表示されない" type="image" alt="Googleフォトの画像が表示されない" image_size="801x565" ]

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をテキストエディターなどに残しておいてください。後で使用します。
[peg-image src="https://lh3.googleusercontent.com/-MoAcwRkbqFI/V15610WCfyI/AAAAAAAAAP4/1F2lkkeUxok_O3q0aZvieAjfAnkU5v6VgCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.00.29.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604394113269538" caption="Google OAuth Client Details Step1" type="image" alt="Google OAuth Client Details Step1" image_size="849x318" ]

[peg-image src="https://lh3.googleusercontent.com/-LpcdL-SdBZI/V15_Plt8FMI/AAAAAAAAARI/puFd1S5JsO8KBiC8ySxn6wRl9NUwJvaNwCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.07.52-2.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295609234910090434" caption="Google OAuth Client Details Url" type="image" alt="Google OAuth Client Details Url" image_size="1050x509" ]

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

Google APIのプロジェクト作成画面が表示されます。
プロジェクト名に任意の名称を入力し、同意するの「はい」にチェックを入れて「保存」ボタンをクリック。
プロジェクト名は何でもいいです。「Google Photo WordPress Plugin」とかで良いかと思います。
[peg-image src="https://lh3.googleusercontent.com/-0B_GwMSIjJk/V1561xdug5I/AAAAAAAAAP4/wZ1WNq-2s-gNUsvkt2qb8Bdij2Jvbe44gCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.03.02.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604393340208018" caption="Google Developer Consoleプロジェクト作成画面" type="image" alt="Google Developer Consoleプロジェクト作成画面" image_size="604x450" ]

OAuth同意画面の設定

プロジェクトの作成が完了すると認証情報の画面になり、「OAuth同意画面」のタブが出てくるので、「OAuth同意画面」のタブをクリック。
メールアドレスにはGoogleにログインしたメールアドレスが入力されていると思いますので、そのままでOK。
「ユーザーに表示するサービス名」に任意の名称を入力します。
「Google Photo WordPress Plugin」とかで良いかと思います。
「保存」ボタンをクリックし、保存します。
[peg-image src="https://lh3.googleusercontent.com/-bWTg-rq8NYs/V15612xg07I/AAAAAAAAAP4/TVGGlinRPvM5QHa56s-ju3JvtSqonrDIwCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.06.02.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604394765374386" caption="Google Developer OAuth同意画面" type="image" alt="Google Developer OAuth同意画面" image_size="740x567" ]

認証情報の設定

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

[peg-image src="https://lh3.googleusercontent.com/-fvVWlOPVbbw/V15617rzINI/AAAAAAAAAP4/XfrsJxxnZb0qsZGjaOkb64XM_Sl1c4rSQCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.03.20.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604396083585234" caption="Google Developer 認証情報タブ" type="image" alt="Google Developer 認証情報タブ" image_size="1006x492" ]

[peg-image src="https://lh3.googleusercontent.com/--Ul443tDcBk/V15615sBabI/AAAAAAAAAP4/5beh3oCIsEQYuXjfeAY6lgl6vHUwJn1owCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.05.33.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604395547650482" caption="Google Developer OAuthクライアントID選択" type="image" alt="Google Developer OAuthクライアントID選択" image_size="546x376" ]

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

[peg-image src="https://lh3.googleusercontent.com/-A6VTAWu4HGY/V1561wXGyrI/AAAAAAAAAP4/shId93BdawAOKatWzLE0rmYCvbmoveu_wCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.06.35.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604393044003506" caption="Google Developer 認証情報入力" type="image" alt="Google Developer 認証情報入力" image_size="664x566" ]

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）を入力します。
[peg-image src="https://lh3.googleusercontent.com/-SIlVDPw-waU/V15-3Iml-KI/AAAAAAAAAQ8/xinW9iAHLdcltjYMbw3yCLcfz85Lo9ZsQCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.07.52.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295608814777792674" caption="Photo Express for GoogleでOAuthの設定" type="image" alt="Photo Express for GoogleでOAuthの設定" image_size="1050x509" ]

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

[peg-image src="https://lh3.googleusercontent.com/-FIXSiFo5zI0/V1561916JUI/AAAAAAAAAP4/o0vAFcwabU8mvB3mU8JIP5OvGgsVKCVSACHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.08.39.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604396662859074" caption="Photo Express for Google OAuthのContinueボタン" type="image" alt="Photo Express for Google OAuthのContinueボタン" image_size="225x91" ]

Photo Express for GoogleのSTEP2の設定

「link」リンクをクリック。
「写真と動画を管理」の許可リクエスト画面表示されるので、「許可」をクリック。
[peg-image src="https://lh3.googleusercontent.com/-ZJfPOB-Vaj0/V15615RyJ3I/AAAAAAAAAP4/nssHv1XlU8kukcnDXzmE4GOoPvO_Q1d_gCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.09.11.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604395437598578" caption="Photo Express for GoogleのSTEP2" type="image" alt="Photo Express for GoogleのSTEP2" image_size="1062x141" ]

[peg-image src="https://lh3.googleusercontent.com/-NgC1YLQvppQ/V1561_3LmjI/AAAAAAAAAP4/FhHR-tlEJmw6mqPZEAZHyKv7ro7cuKu4ACHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.11.50.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604397205068338" caption="Photo Express for GoogleのSTEP2の許可リクエスト画面" type="image" alt="Photo Express for GoogleのSTEP2の許可リクエスト画面" image_size="558x344" ]

ここでエラー画面が表示される場合があります。
「400. That' an error. Error: redirect_uri_mismatch」のエラーです。
これは、「認証情報の設定」のところで「承認済みのJavaScript生成元」「承認済みのリダイレクトURI」を未入力または、間違っている場合にエラーになります。
[peg-image src="https://lh3.googleusercontent.com/-xF-anMJkUjA/V15611HxqfI/AAAAAAAAAP4/gTOSknv5UN8EaTGU9ouueghQ6FGNKadawCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.09.28.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604394321881586" caption="400. That' an error. Error: redirect_uri_mismatch" type="image" alt="400. That' an error. Error: redirect_uri_mismatch" image_size="717x305" ]

以上で完了です。
Successfully・・・が画面に表示されていればOKです。
[peg-image src="https://lh3.googleusercontent.com/-OGI9dC3jxTM/V15616DeuEI/AAAAAAAAAP4/h7iwBYGJXlwVX-1c4s0jhPiTkuQYl87SwCHM/s144-o/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-06-07%2B23.12.10.png" href="https://picasaweb.google.com/107888545635181725503/Web#6295604395646040130" caption="Successfully" type="image" alt="Successfully" image_size="1086x102" ]

お疲れさまでした！