こんにちは!管理人のサターンニュースです。今回のテーマはWordPress WebP 自作です。

駆け出しエンジニア、Web制作の現場に身を置いて3年。 最近は趣味のシステム開発熱が高まっていて、休日もコードとにらめっこしています。

さて、今回のテーマは「WordPressの画像高速化」についてです。

結論から言うと、「既存の重たいプラグインを使わずに、アップロードした画像を自動でWebP(ウェッピー)化して軽量化する自作プラグインを作っちゃいました」というお話です。

「サイトが重い」「SEO対策で画像の表示速度を上げたい」と悩んでいる方、あるいは「自分で仕組みを作ってみたい」という方に、私の試行錯誤の過程をシェアしたいと思います。

なぜ既存のプラグインではダメだったのか

ブログやサイト運営で避けて通れないのが「画像の容量問題」ですよね。 高画質の写真をそのまま載せると、ページの読み込みが遅くなり、ユーザーにとってもGoogle先生(SEO)にとってもマイナスになります。

そこで一般的によく使われるのが、画像を自動圧縮してくれるプラグインです。 でも、これらが意外と「重い」んです。

多機能すぎてサイト全体の動作がもっさりしたり、設定が複雑だったり。 「もっとシンプルに、必要な機能だけ欲しい!」

STEP1:functions.phpでWebP化とリサイズを自動化

まずは手始めに、WordPressのテーマファイル内にある functions.php に直接コードを書く方法を試しました。

やりたいことは非常にシンプルです。

  1. 画像がアップロードされたらフックする。
  2. 画像を次世代フォーマットのWebPに自動変換する。
  3. 横幅が大きすぎる画像は1200px以下にリサイズする。

これを実装したところ、効果はてきめん! 余計なプラグインを読み込まないのでサイトはサクサク動き、画像の容量も劇的に軽くなりました。

「これでSEOも検索順位もバッチリだ!」と、最初は満足していたんです。

STEP2:不便さを解消するためにプラグイン化

しかし、運用していくうちに「ある問題」が発生しました。

それは、「設定変更の面倒くささ」です。

基本的には「全画像をWebP化&1200px」で問題ないのですが、たまに「この画像だけは元のサイズのままにしたい」とか「リサイズ幅を800pxに変えたい」という場面が出てきます。

その都度、FTPソフトを開いて functions.php のコードを書き換える……。 いやいや、さすがにそれはスマートじゃありません(笑)。 コードをいじる際、うっかりミスでサイトが真っ白になるリスクもありますしね。

そこで思いついたのが、「この機能をプラグイン化してしまおう!」というアイデアです。

自作プラグイン「WebP conversion for WP J」の誕生

というわけで、勢いで自作プラグインを作りました。 その名も「WebP conversion for WP J」。

主な機能は以下の通りです。

  • 画像の自動WebP変換機能
  • リサイズ幅の任意設定(管理画面から変更可能)
  • シンプル設計でサイトへの負荷を最小限に

functions.php に書いていたロジックを独立させ、管理画面から「画像の大きさ」を数値で自由に入力できるように改良しました。 これで、コードを触ることなく、その時の状況に合わせて柔軟に画像設定を変えられるようになりました。

自作プラグインのシンプルな設定画面
WordPress管理画面:プラグイン化後

まとめ:快適なサイト作りは楽しい!

結果として、サイト閲覧も快適になり、管理の手間も減り、システムを作る楽しさも再確認できて一石三鳥でした。

Web制作の仕事をしていると「既存のものを使う」だけでなく、「なければ作る」という選択肢が持てるのが面白いところですね。

今後もこのブログでは、YouTube活動の息抜きに、こうした「趣味で作ったシステム」や「日々の技術的な所感」を、アイデアの掃き溜めとしてゆるく公開していこうと思います。

システムに興味がある方も、そうでない方も、のんびりとお付き合いいただければ幸いです。

設定画面:画像サイズも任意に変えられるように、ホントに必要最低限のものだけ