Google Photo(旧Picasa)をWordPressブログに連携する方法

遊びネタ

こんにちわ!Naomiです!
ブログを書いていると写真のファイルサイズが大きくて徐々にサーバのHDDが圧迫されるということが発生すると思います。

私もそれが心配で調べてみたところGoogle Photoの写真をWordpressの記事に引っ張ってくる方法があることがわかりました!

今回設定して使い始めましたので備忘録として、実施方法を残しておこうと思います。

Googleアカウントを作成する

まず、Googleアカウントを作成します。ここはGmailを使っている人であればアカウントは持っているはずです。
私ももれなく持っていますので、特に何もすることはなかったです。

Googleアカウントの作成はGoogleのページから→アカウント作成と進み、Googleの指示にしたがって作成しましょう。

おそらく迷う点はないはず。

Photo Express for Googleをインストールする

Google PhotoをWordpressで使うにはPhoto Express for Googleというプラグインを使用します。

このプラグインの前身として、Picasa and Google Plus Expressというプラグインがあったのですが2015年頃にプライベートのGoogle Photoアルバムへアクセスできなくなったようです。

そのあと、有志によって作成されたプラグインが私も導入したPhoto Express for Googleになります。

インストール方法は他のプラグインと同様です。
Wordpressの管理画面から下記のように進みます。

プラグイン
→新規追加
→検索窓でPhoto Express for Googleを打鍵
→検索結果から対象プログラムを選択
→インストール

※作成者がthhakeとなっていることを確認しましょう。変な偽プラグインをインストールしないように。

Photo Express for Googleの初期設定

続いて初期設定ですが、ここがちょっとややこしいです。Google Photoへのアクセスを許可するために認証関連の設定を追加していきます。
内容を理解するというよりも、あまり意味は深く考えずに手を動かしてしまったほうがいいと思います!

以下、手順です。

WordPress側でのアカウント認証の準備

まずはWordpress側でアカウント認証に使う情報を取得します。

Photo Express for Googleの設定ページから上の方にある下記のリンクをクリックします。

GooglePhoto記事_12.png

Click here to configure private access to Google Photo

続いて次のページが下記のように表示されますので、項目の9,10のURL文字列をコピーして適当なテキストファイルに貼って起きましょう。

GooglePhoto記事_2.png

そこまで完了したら同ページの下記リンクをクリックしてGoogleの設定ページにジャンプしましょう。

Google Developer Console

Google側での認証

WordPressの設定ページで入手した情報を使ってGoogle側でのアカウント認証をしていきます。

ジャンプしたページから下記の窓をクリックして小さい窓を出します。

GooglePhoto記事_3.png

続いて、「新しいプロジェクト」をクリックしましょう。

GooglePhoto記事_4.png

プロジェクト作成画面が開きますのでプロジェクト名を任意で決めます。
例:Google Photo WordPress Pluginなど

任意で名前を入れたら「作成」ボタンをポチッとしましょう。

GooglePhoto記事_5.png

続いて、最初の窓をクリックして作成したプロジェクトを選択します。
ここではGoogle Photo WordPress Pluginです。

GooglePhoto記事_6.png

すると左の行に「認証情報」がありますのでここをクリックします。

上部タブより「OAuth同意画面」を選択します。
下記3箇所を入力します。

GooglePhoto記事_6.png

・メールアドレス:Googleアカウントに登録しているアドレス
・ユーザに表示するサービス名:Google Photo WordPress Pluginでいいです
・ホームページURL:WordpressのサイトURLを入れましょう

次に「認証情報」タブを選択します。
「認証情報作成」を選択して、OAuthクライアントIDをクリック。

GooglePhoto記事_7.png

ウェブアプリケーションのチェックボックスにチェックを入れて、下記3箇所を埋めます。

GooglePhoto記事_8.png

・名前:Google Photo WordPress Pluginとしました
・承認済みの JavaScript 生成元:Wordpress側で入手した項番9のURL
・承認済みのリダイレクト URI:Wordpress側で入手した項番10のURL

最後に「作成」ボタンをぽちっと!

作成が完了すると、「クライアントID」と「クライアントシークレット」が表示されますのでコピーしてテキストに貼って起きましょう。

GooglePhoto記事_9.png

これで、Google側でやる事は終わりです。

Photo Express for Google側で認証設定

Googleの方で入手した情報を使って、認証設定をしていきます。

このページで下記2箇所を埋めましょう。

GooglePhoto記事_10.png

Google OAuth client ID:Googleの方で入手したID文字列
Google OAuth client secret:Googleの方で入手したパスワード

save detailsをポチッとします。

続いてContinueをポチッとしましょう!

GooglePhoto記事_13.png

その先でlinkのリンクをクリックします。

GooglePhoto記事_14.png

するとGoogle側に飛びますので、下記のように画面を進めて許可させます。

GooglePhoto記事_15.png

GooglePhoto記事_16.png

あと、いじる部分は下記がとりあえず重要かと思います。

GooglePhoto記事_11.png

イメージサイズの設定部分ですね。
WidthとHeightのどちらかを選択して、ピクセル数を入れるとこれが最大の値になりますのでそこに合わせて画像が調整されます。
ここはやりながら進める感じが良いかと思います。

投稿に挿入してみる

ここまで正常にできていれば、投稿画面にこのようなマークが出ているはずなのでクリックすると自分のGoogle Photoアルバムの中身が表示されますのでクリックすれば投稿に挿入できます!

GooglePhoto記事_17.png

まとめ

Photo Express for Googleは最初の初期設定がやや面倒ですが、一度入れてしまうと画像挿入ではサーバのHDDを利用しないで良いという素晴らしい恩恵があります。

ぜひ導入されるといいと思います!