【PR】『SEO作業会』リリースしました

公開日:2018年7月30日 ⇒最終更新日:2018年7月31日

プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

Pocket


「外部サーバーに画像データを置いて、サイトを軽くして表示速度をアップさせたい!」

 

「長年ブログを運用していて、写真もいっぱい貼っててそろそろ重くなってきたから外部から画像URLだけ引っ張ってくる形にしたい!」

と私自身が考えていて、1日かけてワケ分からんプラグイン(「Google Drive Embedder」「Google Drive WP Media」「Google Apps Login」)の使い方調べたりとかインストールしてAPI開設したり認証キー作ったり英語のYouTube動画見たり奮闘してたのですが。

  • プラグイン不要
  • Googleフォト不要
  • 今使っているGoogleドライブに保存してるファイルそのまま使える

方法を見つけたのでシェアします。

Googleドライブの共有リンクのURLを一部だけ変える!

icon arrow1 r プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法Googleドライブのダウンロードはこちら

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

↑↑ココの共有リンクをコピーすると、

https://drive.google.com/open?id=◎◎

となっているはずです。

この「◎◎」の部分が、Googleドライブに保管したファイル1個1個に割り当てられた「ID」と呼ばれるものです。

そのIDを、

https://drive.google.com/uc?export=view&id=

の最後にくっつけると、WordPressのMedia Libraryに画像データを取り込むことができます。

その後の流れ↓↓

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

↑↑上にある画像、すべてGoogleドライブから引っ張ってます。

慣れたらテキストエディタにコピペの方が早いかも・・・

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法何度かこの作業をやってみてますが、↑↑の「③で作ったURLをコピペする」というプロセスが1番ダルい手間がかかって効率を下げる要因だなと感じました。

一手間かかるというだけでなく、コピペしてから数秒間待ってプレビュー画面を生成してから「投稿に挿入」ボタンを押さないと画像が反映されないという小さなイライラもあるんですね。

 

そこで「テキストエディタ」を見てみて、今まで埋め込んでいたGoogleドライブの画像の部分のHTMLコードを調べました。

結果的に、

<img class=”aligncenter size-full” src=”https://drive.google.com/uc?export=view&id=◎◎”>

この表記をテキストエディタの該当箇所にコピペして、「◎◎」の部分だけ共有リンクのIDに差し替えれば良いことが分かりました。

ちなみに上記は中央揃えにするという設定だけ加えています。

画像のサイズは別にテキストエディタを使わずとも、ビジュアルエディタで再び画像をクリックして直接サイズ調整すればOKです。

 

ちなみに、私はGoogleドライブの有料課金プラン(月額1300円くらい)を何年も使っています。

  1. Googleスプレッドシート(エクセルっぽい奴)
  2. Googleドキュメント(ワードっぽい奴)
  3. Googleスライド(パワポっぽい奴)
  4. Googleフォーム(アンケートフォーム)

のデータも一括で管理できてるので、これらをよく使うって方はお得じゃないかな?と思います。

どれもクラウドサービスなので、自動バックアップがあり保存し忘れが起こらないですし、データが重くても共有リンク1つで誰かとシェアできるし、突然PCが壊れてもOK(別のPC、スマホからいつでもログインして編集・管理・共有できる)なのでメッチャ便利なんですよね。

また、動画データもドロップボックス上よりGoogleドライブ上の方がサクサク再生できます。

トコトン無料が良いという方は?

Googleドライブは無料プランで15GBまで開放してくれます。(有料プランは1TB~)

が、どうしても課金に抵抗が有るって方は、GmailアカウントごとにGoogleドライブのアカウントを作って、それぞれに画像データをアップロードして、自分のワードプレスブログに埋め込む形が良いと思います。

1つの携帯電話番号につき、年間2個までGmailアカウントを作成できるので、そのやり方で行くと30GBまでは無料でサクッと画像を含めた各種ファイルを保存できますね!

もしかしたらその内使えなくなる無料プランの裏ワザかも知れませんが、ご参考までに。

Googleドライブから取り込んだ画像をアイキャッチとして利用するプラグイン

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

外部画像をアイキャッチ画像として利用するには、「Featured Image From URL」というプラグインをインストール⇒有効化してください。

 

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

そしたら、

「Auto Set Featured Image: configuration」

という欄にある

「use the first image as featured image」をONに設定してください。

特に保存ボタンなどはないので、OFF⇒ONにするだけで大丈夫です。

もちろんWP側から別途、内部にある画像をアイキャッチにしても良いです。好みですね。

有難い先人たちの教え抜粋

※アイキャッチの自動設定は先ほどのプラグインで対応できますが、他に使えなくなる機能があるかは私も実装したばかりで分かりません。

 

つまり

日本のユーザー ⇔ 日本のサーバー = 近い

日本のユーザー ⇔ 海外のサーバー = 遠い

よって、海外のサーバーを経由するGoogleドライブは、遠いため反応も遅い。

Googleドライブからワードプレスに画像を取り込むメリットにサイト高速化は有り得ませんでした!

サイトの容量そのものを減らすことだけがメリットです。

 

※とんまあさんのツイートを見て、1個だけ対策を思いつきました。

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

Googleドライブにアップロードする画像のファイル名の末尾に、埋め込む記事のパーマリンクの数字を付けるという手法です。

 

 プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法

 

このようにすれば、万が一Googleドライブ側のURLの仕様が改変されて、今まで埋め込んできたブログ記事内の画像がすべて消えてしまったとしても、

「この画像はあの記事用の奴か!」

と1個1個すぐにファイル名から判別できます。

1度埋め込んだ後からGoogleドライブ側でファイル名を変更しても、取り込む際のURLは変わらないため、ブログに影響は出ません。

ただし、これはワードプレスのパーマリンクの設定で、末尾に数字が出るようにしている人にしか使えない対策になります。

 

同じ画像を複数の記事で使う場合はどうするか?

「◎◎-4710-1124」

のように、画像を使った記事のパーマリンクの数字の部分をファイル名に継ぎ足していく形が良いかなと。

 

記事の中で複数の画像を使っている場合、順番や貼っていた箇所は分からなくなるのでは?

貼っていた箇所は、Googleドライブ側の仕様でURLが変わってしまったら空欄の非表示状態になって目立っているはずなので見つけやすいと思います。

 

ただし、まさに今ご覧頂いている当記事のように、複数の画像を埋め込んでいる場合、どの画像がどの順番かは記事の文脈を毎度読み取らないと復旧作業を進められません。

それはネックですね、時間がかかります。

ただ、それらのデメリットを差し引いても、

  • 画像を気軽に外部サーバーに置けること
  • しかもGoogleという世界有数で信頼性の高いサーバーであること
  • サイト全体がフワッと軽くなること
  • おかげで記事の表示速度がバツグンに上がること
  • ネット回線が重い地域の人や、回線の混みがちな都会の格安SIM利用者にも見てもらいやすくなること
  • おかげで直帰率&離脱率が下がり、SEOにプラスの評価が加わること
  • 万が一アクセスが爆発した際に、503エラーなど転送量爆発でサーバーダウン、サイト真っ白状態になってしまってアクセスはもちろん本来なら増加するはずだった収益の取りこぼしも防ぎやすくなること(テキストデータだけなら転送量はほとんど上がらないため)

これらのメリットを考えると、個人的には当記事でご紹介した手法に切り替えたいと考えました。

先ほど竹洞さんのご指摘にもあったように、高速化はおろか通常よりも遅いサイトになってしまうので、やはり外部サーバーを1個借りるより他に無さそうです。

すでにGoogleドライブには課金して常にバックアップ体制をとっているので、外部サーバーを専用に借りるよりもむしろ低コストですし。

あるいは、icon arrow1 r プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法がんちゃん氏の記事を参考に、画像の定期的な圧縮をしても良いと思います。

icon arrow1 r プラグイン不使用!Googleドライブの画像ファイルをワードプレスに埋め込む方法15分で出来る!WordPress高速化。表示速度改善でコンバージョンを上げる方法

あなたの参考になれば幸いです。

 

Pocket


【PR】『SEO作業会』リリースしました

コレだ!という1本の柱をつくりたいあなたへ

コメントを残す