プラグイン WordPress

【WordPress】Photo Express for Googleで記事に画像を挿入する方法 。投稿画像が表示されない問題も解決済み。

投稿日:

 

どうも白夜霧です。今回はWordPressとGoogle フォトを連携させるプラグイン

Photo Express for Google」の設定方法の覚書となります。

わりと説明分が長いので、ご注意を。

 

スポンサーリンク

AdSense_336px

 

「Googleフォト」の画像を記事に貼り付ける

読まなくてもいい御託

WordPressでのブログ運用の場合。記事はもちろんのこと、記事内に貼り付ける画像もサーバーに保存される。サーバーと言うとイメージがつかみにくい人もいると思うが、ようは24時間動き続けているパソコンです。

 

ネットから画像を自分のパソコンに保存するのと同じで、ブログの場合は画像を記事に貼り付けるためにパソコンにダウンロードするのではなく、パソコン(サーバー)に画像をアップロード(保存)している。

 

画像をアップロードすれば、その容量分だけサーバーの容量を消費する。画像データなんて大した容量ではないと思うが、デジカメやスマホで撮った画像の容量は枚数が多くなると馬鹿に出来なくなる。

 

画像を貼りまくって、サーバーの容量が足りません。なんて事にならないように日頃から出来る限り容量の節約を心がけるべきだと思う。サイトの表示スピードにも影響するからね。

 

今回は、その容量食いでもある画像を契約しているレンサバではなく、容量無制限の「Google フォト」に保存してその画像を記事に貼り付けるためのプラグインの設定方法となります。

 

準備

準備と言っても、Googleのアカウントさえ持っていれば後は問題なし。

 

「Photo Express for Google」のインストール

google_photo_plugin_1.png

 

 

「ダッシュボード」→「プラグイン」→「新規追加」から「Photo Express for Google」を検索。作者が「thhake」であることを必ず確認してからインストール。

 

アカウントの認証

設定」から「Photo Express for Google」を選択。

google_photo_plugin_2.png

 

 


 

google_photo_plugin_3.png

 

 

Gonfigure OAuth Configuration」の「Click here to configure private access to Google Photo」を選択。

 

 


 

google_photo_plugin_4.png

 

 

英語で色々書いてありますが、Googleのサービスを利用してWebサービスを作り、認証コードを取得するまでの流れが説明されています。

この時、認証設定で使用する「9」と「10」の項目に記載されているURLを適当なエディタにコピーして下さい。

コピーしたら「Google Developer Console」をクリック。

 

Google APIsでWebアプリを作成する。

google_photo_plugin_5.png

 

Google APIsの画面から左上の「プロジェクトを選択」をクリック。

 


 

右上の「」をクリック。

google_photo_plugin_6.png

 


 

google_photo_plugin_7.png

 

プロジェクト名』に任意の名前を入れる。

『新機能の・・・』や『すべての・・・』はお好きにどうぞ。

各入力が完了したら「作成」をクリック。プロジェクトの作成が開始されます。

 


 

google_photo_plugin_8.png

 

 

プロジェクトの作成には数秒かかります。作成の完了は右上の通知アイコンで確認。作成が完了したら左上に作成したプロジェクト名が表示されていることを確認。

 


 

※表示されていない場合は、左上の「▼」をクリックして作成したプロジェクトを選択して下さい。

google_photo_plugin_9.png

 

認証情報を作成する

google_photo_plugin_10.png

 

左のメニューから「認証情報」→『OAuth 同意画面』を選択し、各項目を入力して「保存」。

メールアドレス Googleフォトを利用するアカウントのメールアドレス
ユーザーに表示するサービス名 任意の名前で可。さっきのプロジェクト名と同じにしておけばOK。
その他 ホームページのURL」はとりあえず入力。それ以外の「サービスロゴのURL」「プライバシーポリシーのURL」「利用規約のURL」は省略可能。

 


 

次に同じ画面の「認証情報」から「認証情報を作成」のドロップダウンから「OAuthクライアントID」を選択。

google_photo_plugin_11.png

 


 

 

google_photo_plugin_12.png

 

アプリケーションの種類』を「ウェブアプリケーション」に選択。

名前』は任意。※プロジェクト名と同じでOK。

 

承認済みのJavaScript生成元」にはコピーしたURLの「9」の方を貼り付ける。

承認済みのリダイレクトURI」は「10」のURLを貼り付ける。

各項目の入力が完了したら「作成」をクリック。

 


 

google_photo_plugin_13.png

 

作成が完了すると「クライアントID」と「クライアントシークレット」が発行される。

※IDのコピーは右のアイコンをクリックすればコピー可能。

 

プラグインとの認証設定

 

google_photo_plugin_15.png

 

発行された値をWordPressの設定画面の『Google OAuth client ID』と

Google OAuth client secret』に貼り付け『Save Details』をクリックする。

保存が完了すると「設定を保存しました。」と表示されます。

保存が成功すると表示される「Continue」をクリックする。

※設定の保存が成功したら「Google APIs」は閉じて問題なし。入力したIDも後で確認可能。

 


 

Step 2:Google OAuth Consent』が表示される。英文内の「link」を選択。

google_photo_plugin_16.png

 


 

 

google_photo_plugin_17.png

 

(※認証時に入力した名前)にアクセスを許可しますか?』と表示されるので、「許可」をクリック。

※複数アカウントを持っている場合は、アカウント選択画面が表示される。選択するのは「Google フォト」を利用するアカウント。

 


 

google_photo_plugin_18.png

 

自動的に設定画面に戻り「Successfully aquired an OAuth 2 access token. You can now access private photo albums.」と表示されていればGoogleフォトとの認証は完了。認証をやり直す場合は「Click here to revoke the token」で認証が解除出来ます。

 

プラグイン内の各設定

 

表示の設定

google_photo_plugin_19.png

 

Display properties」を設定する。下記は最低限必要な部分のみ解説します。

Google user name for site Googleフォトのアカウントのメールアドレスを設定して下さい。※設定必須。
Picasa icon 記事投稿画面に表示されるアイコン。※後でわかります。

 

 

画像の設定

google_photo_plugin_20.png

 

Image properties」を設定する。ここは実際に画像を貼り付けて、試しながらちまちまいじる部分だと思って下さい。※ここも必要最低限の内容です。

Single image thumbnail size 記事内に貼り付ける画像のサイズ設定。『Scale』は貼り付ける画像の基準をその画像の「高さ」にするか「幅」にするかの設定。基本は『Width(幅)』でOK。問題は『proportionally to XXX pixels.』の値。これは好みの問題なので、一概に推奨値はない。『WordPressでプラグインを使わずに普通に画像を貼り付けた場合と同じような表示にしたい』という場合は値をわざと大きな値にする。こうすることで、大きな画像を貼り付けても幅基準で縮小して全体を表示してくれる。この設定に関しては、一度デフォルトのままやってみて「ああ、こうなるんだ。」と理解してからやったほうがいい。
Image alignment 貼り付けた画像の表示位置のデフォルト位置。
Returen HTML insterad of shotcode 記事編集画面で、画像をHTMLにするかショートコードにするかの設定。チェックを入れればビジュアル表示で画像が表示されます。WPのデフォルトと同じように使いたいのであれば、チェック推奨。

 

 

その他・広告の表示

google_photo_plugin_21.png

 

一番下の「Advertising」項目の『Footer link』のチェックボックスを外す。

各設定を変更したら『変更を保存』をクリックして設定は完了です。

 

注意

上記設定は画像一枚単位ではなく、このプラグインを利用して貼り付けた画像全てに影響する。つまり、途中から設定を変えればこのプラグインを利用した過去記事の画像の表示も変わります。注意して下さい。

 

Googleフォトに画像をアップロードする。

Googleフォト」ページを開く。

 

ここで記事に貼り付ける画像をアップロードする。アップロード時の注意点として、Googleフォトにアップロードした画像は通常非公開。つまり、アップロードした本人しか見えない状態となっています。

 

プラグインを利用して画像を記事に貼り付ける場合、Googleフォトにアップロードした画像を公開(共有)設定に変更して、誰でも見えるようにする必要があります。

 

画像のアップロード方法と注意

google_photo_plugin_22.png

 

画像のアップロードはものすごく簡単。開いているGoogleフォトのページに対して画像をドロップ&ドラックすれば勝手にアップロードしてくれる。複数の画像も全て一括でアップロード出来ます。

 

画像を追加し、アップロードが完了すると左側に通知が表示される。ここで注意して欲しいのは、通知の『共有アルバム』という項目。

 

共有設定にするならここで共有アルバムを作ればいい」と考えるのが普通ですが、ここで共有アルバムに作成してしまうとプラグインの方でそのアルバムにアップロードした画像が表示されません(選択出来ない)。

 

これに関しては、Googleフォト側の仕様変更にプラグイン側の対応していないのでしょう。プラグイン自体も最新のWPへの対応はしてませんし・・・。

 

私もこの問題に悩まされて、やっぱりこのプラグイン使うのやめようかなぁ・・・とまで思いましたが、回避方法というかそうならない方法(手順)がわかったのでご紹介します。

 

アルバムを作る

google_photo_plugin_23.png

 

まず、共有アルバムを作る場合はアップロード完了通知のアルバムに追加」でアルバムを作って下さい。「共有アルバム」は選択しては行けません。もちろん、左側のメニューの「アルバム」から作成してもOKです。

 


google_photo_plugin_24.png

 

新しいアルバムを作るか、もしくは既存のアルバムに追加するかを選択します。既存のアルバムに追加するのであれば、アルバムのページを開いた状態で画像をドラッグ&ドロップすればそのアルバムに追加されます。※アルバムを作ってから画像を追加する、というのは出来ないっぽいです。

 


 

 

google_photo_plugin_27.png

 

今回は「新しいアルバム」を作成します。「新しいアルバム」の場合、アルバムの名前をつける必要があります。

 

アルバムの名前は記事のタイトル、または記事のジャンルと紐づくような名前を付けると管理が楽になると思います。

 

アルバムの名前を入力したら左上のチェックをクリック。これでアルバムの作成は完了です。

 

アルバムを共有設定にする

google_photo_plugin_25.png

 

次に、作成したアルバムの共有設定を行います。

アルバムの開いた状態から右上メニューの「共有オプション」を選択。

 


 

 

google_photo_plugin_26.png

 

共有のトグルボタンをONに切り替えてください。

共有をONにすると「共同編集」と「コメント」の設定が可能になります。この部分に関してはOFFでも問題ありません。複数人で同じアルバムを使っているのであれば、デフォルトのままONにして下さい。

設定の確定ボタン等はないため、共有をONにしたら右上の「×」で共有オプションを閉じて大丈夫です。

 

共有設定が完了すると、アルバムに「共有中」と表記されます。

google_photo_plugin_28.png

 

記事に画像を貼り付ける

google_photo_plugin_29.png

 

プラグインとGoogleフォトの認証が完了すると、記事編集画面の「メディアを追加」の右にアイコンが追加されます。

 


 

google_photo_plugin_30.png

 

アイコンを押すと、Googleフォトの画像がアルバム単位で表示され、ここから画像を選択します。

 


 

google_photo_plugin_31.png

 

画像を選択したら「Insert」をクリックすることで記事に画像が追加されます。複数の画像をクリックしてからInsertを押せば、選択した画像を複数一気に貼り付けられます。

 

まとめ

正直、使いづらい部分が結構目立ちますが、レンサバの容量を食わないというのは、後々効いてくるでしょう。慣れない内はちょっと使いにくいと思いますが、頑張ってください。

サムネイルも外部から設定できるプラグインもあるので、それはまた今度。

 

AdSense_336px

AdSense_336px

-プラグイン, WordPress
-, , , ,

Copyright© My,WebNote - 備忘録 - , 2017 AllRights Reserved