ワードプレスにgoogleフォトの画像を挿入する方法8種！これで決まり

苦労したけどこれで一件落着

このブログにはgoogle+に投稿した画像をコピーして貼り付けてる記事があるんですが、google+もサービス終了のためその画像が表示されなくなってしまうのでどうしようか悩んでます。

画像を入れ替えるのが面倒で…。

WordPressにgoogleフォトの写真・画像を連携表示させる方法　プラグイン有と無　これからはこれで行こう

サーバーを画像で圧迫させないように、写真はワードプレス内にアップロードせず、グーグルフォトに保存してる画像を記事に表示させていました。

そこで便利だったプラグイン「Photo Express for Google」がgoogleのサービス終了の為使えなくなってしまったので今後の対策を考えてました。

ワードプレスにグーグルフォトの写真を挿入する方法は色々紹介されてますが、どんなものなのかそれぞれをまとめてここで紹介します。

プラグイン「Photo Express for Google」は今後NG　エラーに

他サイトでも紹介されていますが、もう使えないので注意して下さい。

これを知っておくと今後プラグインを選ぶ時にも参考になると思うので一応紹介しておきます。

このプラグインはPicasaウェブアルバムのデータをgoogle APIを使って呼び出す仕組みでした。

APIとはgoogleの提供するサービスに対して認証することで、他のアプリケーションから呼び出せる仕組みの物です。

Picasaウェブアルバムは2016 年 5 月 1 日にサービス終了しましたが、サービス終了後もgoogleフォトの画像はPicasaウェブアルバムに自動的に残るため、問題なく画像挿入は出来ていました。

が、2019年1月、googleがPicasa APIのサービスを終了してしまいました。

今後は「Google Photos APIs（Photos Library API）」に統一されます。

このプラグインは3年も更新されておらず、Photos Library APIに対応してくれるとも思えないので諦めて別の方法を使った方が良いですね。

設定までが面倒ですが、挿入に関してはべストでした。

ワードプレスの「メディアを追加」から挿入した画像と同じように、ドラックで画像サイズを変更したり、キャプションなども同じように簡単に指定できたので私には理想のプラグインでした。

エヌロン

本当がっくりした。

Photos Library APIを使った新たなプラグインが開発されるのを願ってます。

プラグイン「Google Photos embed」　一枚ずつの画像挿入が可能

「セルティスラボ」さんから提供のプラグイン、「Google Photos embed」ですが、こちらは現在も有効のプラグインです。

googleフォトの共有リンクを取得して、記事内にそのアドレスを貼り付けるだけで画像が表示されます。

貼るのはとても簡単なのですが、画像のサイズ指定やキャプション・Alt属性などを指定する時に面倒なので、私の理想とは違いました。

エヌロン

作者さんゴメンナサイ

https://photos.app.goo.gl/xxxxxxx

［embed width=”320″ height=”150″caption=” xxxxxxx”］ https://photos.app.goo.gl/xxxxxxx ［/ embed］

本当素晴らしいプラグインだと思うのですが、サイズ変更する時の値を考えるのも面倒に感じたので使うのをやめました。

それとgoogleフォトから共有リンクを取得する時ですが、現在は写真1枚単体の共有リンクを作成すると自動的に新たに共有アルバムが作成されてしまいます。

なので共有アルバムの数がとてつもない量になってしまいます。

アルバム一覧には表示されませんが、共有一覧に追加されていきます。

数が多すぎて探すのに苦労します。

それと、これって自分で画像アドレスをコピーして「メディア追加」から挿入しても同じですので、プラグイン導入の意味があまり感じません。

フォトエンベッドメーカー　共有アルバム単位での挿入

これも先ほどと同じ「セルティスラボ」さんの開発ツール「フォトエンベッドメーカー」です。

プラグインではなくweb上のツールなので素晴らしいです。

だけど、私の環境だとうまく埋め込みタグが取得できないことが多発します。

何度やり直してもちゃんと読み込まず、作者さんに問い合わせましたが解決しませんでした。

アルバム内の画像18枚までがサムネイルで表示され、クリックすると拡大表示します。

上限18枚というのがちょっと残念ですね。

実際に挿入してみました。

■例

スイーツアルバム / Photo Embed by Google Photos

<span class = "wp-caption-text"> ******** Photo Embed by Google Photos>/span>

<figcaption class = "wp-caption-text"> ******** </figcaption>

エヌロン

作者さんゴメンナサイ

一枚ずつ載せることも可能

1枚だけ載せたい場合は、同じように画像1枚の共有リンクを取得し、そのアドレスを貼り付ければ1枚だけ載せることも出来ます。

■例

先ほども書きましたが、現在は写真1枚単体の共有リンクを作成すると自動的に新たに共有アルバムが作成されてしまいます。

共有アルバムの数がとてつもない量になってしまうので、あまりやりたくはないかな、と感じてます。

共有リンクはいつまでも有効なので安心ですが、一度共有を解除してしまうとリンク切れを起こして表示されなくなるので注意です。

再度共有設定してもURLが変わってしまうので画像が表示されなくなります。

Googleフォトを埋め込むために必要なタグを使う

挿入が可能になるタグを使って記事内に表示させる方法を紹介しているブログがありました。 そのタグがこちら

<span itemtype = "http://schema.org/Photograph" itemscope = "itemscope"> <img class = "magnifiable" src = " 画像のURL " itemprop = "image"> </span>

これも特殊なタグを使っている訳ではなく、結局同じでリンク切れを起こして表示されなくなることがあります。

なのでこれも使えません。

この方法で画像が表示されなくなっているブログも見つけました。

WordPressが標準機能でgoogleフォトと連携　簡単挿入

WordPressが標準でグーグルフォトと連携し、簡単に記事内に挿入できるようになりました。

ですがこれは簡単にメディアライブラリに登録できてそのまま挿入できるというだけなので、結局は自分のサーバーにアップロードすることになってしまいます。

今回求めているものとは違いますね。

詳しくはこちらで紹介されています。

googlephoto APIを使った複数画像同時挿入のプラグイン　Photonic

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others

2019年1月にPicasa APIがサービス終了しましたが、Photos Library APIを使ったプラグインを見つけました。

「Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Picasa, Zenfolio and Instagram」https://aquoid.com/plugins/photonic/

これならグーグルフォトの画像が表示できると期待しました。

エヌロン

名前が長すぎだね

使ってみたのですが、これはアルバム内の画像を全部表示させるプラグインでした。

その他、日付指定でその日の画像一覧をでタイル表示させたり、スライドショーで表示することもできます。

写真家の方などには素晴らしいプラグインですね。

最初の方で紹介した「フォトエンベッドメーカー」のように枚数制限もなく、日付指定からの表示もできるしデザインも豊富なので、こちらはとても良さそうなプラグインです。

しかし1枚ずつ写真を載せることが出来ませんでした。

ブログ記事のように1枚ずつ載せたい場合には合わないですね。

プラグインは削除してしまいましたので、参考までに公式サイトのデモページへのリンクを載せておきます。

設定方法はこちら。

「Photos Library API」の設定方法からプラグイン導入までが書いてありますが、「Photo Express for Google」のプラグインを使っていた人ならすぐできると思います。

機会があったら後でこのプラグインを詳しく紹介することにしました。

で、書いた記事がこちら

エヌロン

素晴らしいプラグインだね

他にもプラグインはありましたが、どれも共有アルバム内の画像全部を表示させるというものだけでした。

「Google Photos API」を利用してアルバムのIDを取得して呼び出すようです。

このようなAPIを利用したプラグインが、表されないトラブルが最も少ないと思います。

googleフォトの画像アドレスをワードプレスの機能「メディアを追加」　「URLから挿入」で貼る

とてもオススメしない方法ですが、これを紹介しているブログがあったので書くことにしました。

■手順

1. googleフォトの画像を表示させる
2. 右クリックから「画像アドレスをコピー」
3. ワードプレス記事作成画面の「メディアを追加」
4. 「URLから挿入」にアドレスをペースト

これで画像を貼るとこうなります。

画像アドレス

https://lh3.googleusercontent.com/rqhzTEikHIzF5icKk08-DGavhRUVgQmx4_kSgRsUb-PU-fY9F8B-oAe1knDkDcrrvnbu0IqdOJ8uXJN9YFZw4kx4xbslYRqw4vEHq2qvB-dtdhtbIWyidMynlVwSrY_KdN62014s-lqRjU34B_cR_-aw-cJyrrPC_s06FC7qY3oaUXRMaJAidJ2dJ4gHy507yt7wapL_1F1__11y6zk5jKhQg2DvVR_UKWQsm0Ka6sNSocWEhvVGOpZ6zJ4Vg0Y-P6jyYVkA0ec7kiIMzThL6eFomR8dhnZV6rP_1_JHN3peUC3HojXWwdsa2U3J9Axa02EXJr1ne1SM027dv6lydbjsCt6z7ALKBG4COMs-mERdtaaMltg3wz_qt8XTqCE4_eo__YSyESb5aacPAvA7Re2264T0BcxZv5_dON9Dl9-G1OAFOjCBOXqjzbcc9mxXE2XzlOlAon803wDzzlEn2-2ni800QIFV7_vRWB3Ie9Rdk9OmqXdSVcmvM9CLs-5xWPHLIAEiboJy6tvLCmaLNrOeoVZDyo6ODQvjUXrXUFFkwEhhkTFDpUt3VXawU9WBiZOG4FC2i2o0p3WYulTqLMIUNcTk1pH4bgMFgnZZ99vDStt3D4wjyyGc70j4gNvgatx2EYB-aclcj9QJyXGpMWbkPyIpnfRaQrVS-3JNrRlGH41UGmQ8_hZgdgu7Jp0vBpcJ9arazeLMqK2NTw=w640-h480-no

やたら長いURLですね。

この方法でも最初は表示されていますが、この画像アドレスは知らぬ間に変わってしまい、リンク切れを起こして表示されなくなります。

なのでこの方法は使えません。

画像アドレスが変わらない？　絶対パスを取得して挿入

エヌロン

この方法で決定

先ほどのやり方では画像アドレスが変化してリンク切れを起こすので使えないと書きました。

エヌロン

それなら変化しない画像アドレスを取得できれば良いんじゃ？

と思い探ってみました。

■手順

まず記事内に載せる写真は共有アルバム内のものです。

1. 共有アルバムの共有リンクを取得
2. 共有リンクをchromのシークレットモードで開く
3. 載せたい画像をクリック
4. 右クリックから「画像アドレスをコピー」
5. ワードプレス記事作成画面の「メディアを追加」
6. 「URLから挿入」にアドレスをペーストして挿入

画像アドレス

https://lh3.googleusercontent.com/qfxv_kkrm3J21-ALjEYyOED2Kkqe-V964lTF_VbZdrs7KWdeglvYfHe133dlQGIqomtucWZP4UGAVOQlRxF9fZCnKeKAC7jUZSUF8lLWcwHWVLUnSVkswH7h7nk8219Ck7VR-Z73HoM=w640-h480-no

これが画像アドレスですが、同じ画像なのにだいぶ短くなりました。

シークレットモードで開くのはgoogleフォトにログインしてない状態にし、キャッシュに保存された画像が表示できないようにするためです。

シークレットモードで表示できている ＝ｲｺｰﾙ 他人からも見えている。ということなのでこれで大丈夫だと思います。

しばらくこの方法を使おうと思っているのですが、プラグインが開発されて以前の用に使えるようになることを願っています。