WordPressで月10万円稼ぐなら海外FXアフィリエイト
JPEGやPNGから完全にWebpに切り替えた
主要ブラウザ全てがWebpに対応したので、重い腰を上げてWordPressで表示している全ての画像ファイルを完全にWebpに切り替えることにしました。
Nginx+WordPress環境です。
今までの運用
- webpをサポートしていないブラウザにはjpgやpngを見せていた
- 画像を置くディレクトリに元のファイル(jpg/png)とwebpが混在していた
まだWebpをサポートしていないブラウザがある時期によく推奨されていた方法ですね。
幅広いブラウザをサポートできるのがメリットで、画像ディレクトリにムダなファイルが増えていくのがデメリット。
WordPressでこの方法を使っていた人には参考になるかと思います。
現在の運用
- 画像ディレクトリにはwebpのみを設置
Webpへの移行手順
念の為jpgとpngをwebpに再変換
画像ディレクトリに移動して以下を実行。
find . -type f ( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" ) -exec sh -c '
for file; do
output="${file}.webp"
if [ ! -e "$output" ]; then
cwebp "$file" -o "$output"
echo "Converted: $file -> $output"
else
echo "Skipped (already exists): $output"
fi
done
' sh {} +jpg.webpとかpng.webpとかのファイル名をwebpにする
find . -type f -regex '.*.(png|jpg).webp' -exec bash -c '
for file; do
new_name="${file%.*.*}.webp"
if [ ! -e "$new_name" ]; then
mv "$file" "$new_name"
echo "Renamed: $file -> $new_name"
else
echo "Skipped (already exists): $new_name"
fi
done
' _ {} +jpgとpngを削除
find . -type f ( -name "*.jpg" -o -name "*.png" ) -exec rm -f {} ;記事中のjpgやpngをwebpに置換
プラグイン Search Regexを使います。
正規表現はオン。
- 置換対象
(https://example.com(?:/[^"/]+)*/img/[^"]+).(?:jpe?g|png)
example.comとimgはそれぞれ自分の環境に合わせて変更。
- 置換後の文字
$1.webp
データベースのjpgとpngをwebpに置換
管理人の環境では特に問題は起きませんでしたが、当然ながらバックアップは忘れずに。
UPDATE wp_posts
SET guid = REGEXP_REPLACE(guid, '(https?://[^"]+/[^"]+).(?:jpe?g|png)', '1.webp')
WHERE post_type = 'attachment'
AND post_mime_type IN ('image/jpeg', 'image/png')
AND guid REGEXP '.(jpe?g|png)$';
UPDATE wp_posts
SET post_mime_type = 'image/webp'
WHERE post_type = 'attachment'
AND post_mime_type IN ('image/jpeg', 'image/png')
AND guid REGEXP '.(webp)$';
UPDATE wp_postmeta
SET meta_value = REGEXP_REPLACE(meta_value, '(.*).(?:jpe?g|png)$', '1.webp')
WHERE meta_key = '_wp_attached_file'
AND meta_value REGEXP '.(jpe?g|png)$';
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, '.jpg', '.webp')
WHERE meta_key = '_wp_attachment_metadata'
AND meta_value LIKE '%.jpg%';
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, '.jpeg', '.webp')
WHERE meta_key = '_wp_attachment_metadata'
AND meta_value LIKE '%.jpeg%';
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, '.png', '.webp')
WHERE meta_key = '_wp_attachment_metadata'
AND meta_value LIKE '%.png%';
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, 's:10:"image/jpeg"', 's:10:"image/webp"')
WHERE meta_key = '_wp_attachment_metadata'
AND meta_value LIKE '%s:10:"image/jpeg"%';
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, 's:9:"image/png"', 's:10:"image/webp"')
WHERE meta_key = '_wp_attachment_metadata'
AND meta_value LIKE '%s:9:"image/png"%';
Nginxで非対応ブラウザにはjpgやpngを見せていた記述を削除
↓こんなヤツですね。不要なので削除します。
location ~* .(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
expires 100d;
access_log off;
}削除した後はNginxを再起動。
プラグインの操作
- プラグインObject Cacheを使っている場合はキャッシュをクリアする
- 大体メディアライブラリでサムネイルが表示されなくなるのでForce Regenerate Thumbnailsなどのプラグインをインストールして実行する
Webp移行後のチェック
プラグインLink Checkerなどのリンク切れチェック用のプラグインを入れておけば画像のリンク切れに気づきやすいです。
今までWebpように行っていた↓のような小細工も必要なくなり、今後はメディアライブラリにWebpをアップロードするだけなのでスッキリしました。
プラグインなしでWordPressの画像アップロード時にWebPを生成する
WordPress関連記事
- WordPressテーマUnderStrapのカスタマイズ例
- WordPressのメディアや記事全文の文字を置換して日付も更新するSQL
- プラグインを使わずにWordPressのショートコードで広告を管理する
- WordPressの絵文字やEasy Table of Contents関係のファイルの読み込みを止める
- WordPressの投稿画面のツールバー・ショートカットキーをカスタマイズする
- プラグインなしでアップロード画像をWebPに変換
- プラグインなしでWordPressの画像入れ替えをする
- WordPressでAMPを使うのをやめた
- Webpに完全に切り替えた
WordPressで月10万円稼ぐなら海外FXアフィリエイト