自作ツール&スクリプト

【WordPress】外部参照している画像を内部参照に変更する方法

eyecatch-wordpress-change-reference-images

すいみん
こちらのCGメソッドの記事では外部参照している画像を内部参照へ変更する方法を紹介します!内部参照をすることによって画像の管理を一箇所に集めることができます、これによって画像最適化などもしやすくなります!

はてなブログからWordPressに移行して2020年4末でもうすぐ2年になります!
しかし画像の殆どは「はてなフォトライフ」と「Googleフォト」から参照しているので、今回は画像をWordPressに全て収集して、参照を内部からに変更してみました!

本記事のポイント
* 「はてなフォトライフ」と「Googleフォト」から参照している画像をWordPressに移行する
* WordPressの画像パスを一括置換する
* 画像すべてに画像圧縮ソフトですべて最適化を行う

はてなブログの画像(はてなフォトライフ)をWordPressに移動する方法

下記のサイトがすごくまとまっているので、こちらをリファレンスとして作業します!

参考 【Wordpress】はてなフォトライフから画像ファイルを一括移行する(記事中で利用されている画像ファイルのみ) - 踊るびあほりっく踊るびあほりっく

現在の全投稿記事のテキストをダウンロードする

WordPressのダッシュボードを開きます。

  1. ダッシュボード>ツール>エクスポート
  2. 投稿にチェックを入れて「エクスポートファイルをダウンロード」
    「cg.WordPress.2020-02-08.xml」という感じの名前のファイルがダウンロードできます

「サクラエディタ」を使って画像URLを抽出

1.「サクラエディタ」をダウンロード&起動
参考 サクラエディタサクラエディタ 2. さきほどダウンロードした「cg.WordPress.2020-02-08.xml」を開きます
3.「Ctrl+G」を押します
4. 下記の条件で画像のURLを取得します。
https://cdn-ak.f.st-hatena.com/images/fotolife.*png|https://cdn-ak.f.st-hatena.com/images/fotolife.*gif|https://cdn-ak.f.st-hatena.com/images/fotolife.*jpg
* 「現在編集中のファイルから検索」を有効
* 「正規表現」を有効
* 「該当部分」にチェック
* 「結果のみ」にチェック

「DSダウンローダー」を使って全画像をダウンロードする

  1. 下記のサイトから「DSダウンローダー」をダウンロード&インストール
    参考 DSダウンローダーDSダウンローダー
  2. 「DSダウンローダー」を起動
    ※起動しない時は右クリックから管理者起動する
  3. 先に抽出したURLを全てコピーして「DSダウンローダー」でペースト
  4. リストを全選択して、右クリック「直ちにダウンロード」
    ※最新のWindowsだとDownloadボタンが反応せず…
    ※SKIPやTIMEOUTしてしまったらもう一度試す
  5. 「マイドキュメント」に画像がダウンロードされてます

Googleフォトの画像(はてなフォトライフ)をWordPressに移動する方法

先の項目と同じ手順で、ダウンロードします。

Googleフォトの「サクラエディタ」での検索条件は下記になります。

https://lh3.googleusercontent.com.*png|https://lh3.googleusercontent.com.*gif|https://lh3.googleusercontent.com.*jpg
ポイント
同様に別のサービスから画像を参照している時は上記の検索条件のURL部分を差し替えてgrepしましょう!

画像を年・月フォルダに分けて仕分けする

  • 事前に画像をWordPress用にフォルダ分けして画像を格納しておきましょう

2020
 L01
 L02

みたいな感じです。

※Googleフォトの画像は仕分けせず、1つのフォルダ格納してしまいましょう

FPTを使って画像をアップロードする

※サーバーとのFTP接続方法に関して割愛します。各サーバーのヘルプを調べましょう!

追加したい画像をすべて/wp-content/uploadsにアップロードしましょう!

画像をWordPressに登録する

  1. プラグイン「Add From Server」を追加して有効化
  2. メディア>Add From Serverから各画像フォルダへアクセス
  3. チェックを入れてImportするだけで一括で画像登録ができます。

画像のパスを「Search Regex」で一括置換する

  1. プラグイン「Search Regex」を追加して有効化
  2. ツール>「Search Regex」からRegexをチェックしてあとは条件を入力して画像パスを一括置換します。

はてなフォトライフの場合

Search Pattern

"https://cdn-ak.f.st-hatena.com/images/fotolife/m/はてなID/201701.."

※最後の2つのドットは必須なので消さないように!

Replace Pattern

https://ドメイン/wp-content/uploads/2017/01/

年と月の部分を変更しつつ置換していきます。

Googleフォトの場合

手順の流れは一緒です。

Search Pattern

"https://lh3.googleusercontent.com/([\s\S]*?)/s1024/"

Replace Pattern

https://ドメイン/wp-content/uploads/2020/02/

「s1024」などサイズ違いがあれば、それぞれ変更して一括置換しちゃいましょう

注意
極一部の特殊例ですが、今回当たってしまったので記述しておきます。
Jetpack プラグインのMarkdownを使うと別のフィールドに編集データが格納されてしまうようです。
結果、データベースが文字置換されても、編集データは古いまま!!
ですので下記の参考記事から、別フィールド「post_content_filtered」にも文字置換が必要になります。
参考 Search Regex による Markdown 記法の一括置換 – Xakuro SystemXakuro System

以上で、参照画像の内部化の完了です!



[おまけ]画像の最適化

  1. FTPから画像をダウンロード
  2. 画像圧縮ソフトで画像圧縮する
    ・PNGならPngyu
    ・JPGならAntelope
    あたりで、がっと画像を突っ込んで圧縮処理をかけてしまいましょう
  3. 終わった後はFTPで上書きアップロードすればOKです
【Pngyu】まとめてPNGを軽くするツールの紹介 【XGuetzli】jpgをほとんど劣化せずに軽量化するソフトの紹介
ポイント
もちろんTinyPngやらJPEGminiでもよいです、ウェブサービスとりフリーソフトのほうが制限なく処理が早いので大量の画像をさばく時におすすめです


外部参照している画像を内部参照へ変更する方法まとめ

やろうやろうと思って2年近く放置していましたが、画像を軽くしたかったので画像の集約&内部参照をしてみました!

FTPの扱いや文字置換など、いろいろ触ってWordPress学びが多かったです。
データをまとめることによって、画像の最適化が簡単になり表示スピードもアップするはずなので、今後の結果が楽しみです。



以上、すいみん(@cg_method)でした!