基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています最近のメジャーなウェブブラウザで表示が可能になった「WebP」形式の画像。今までは「png」形式よりも容量の少ない「jpg」形式の画像が主流でしたが、「WebP」形式は更に軽量な画像配信ができるので、ページの容量減による表示速度の向上が期待できます。WordPress5.8では、WebP形式の画像が正式にサポートされ、WebP形式の画像を直接アップロード・管理できるようになり、まさに主流となりつつあります。現状WebP形式の画像を直接生成できる画像ソフトは少なく、ウェブツールなどを使って一旦変換する必要がありますから、まだまだ少し使いづらい部分があります。Express】は過去・未来含め、「jpg」「png」形式の画像からWordPress上で「WebP」形式の画像を生成し、ブラウザの利用可否によって配信を判断してくれるプラグイン。今まで通りの形式の画像をアップロードすれば自動で「WebP」形式の画像を生成してくれるので便利です。公式ページにも書かれている通り、このプラグインはGithub上にアップされているWebP形式の画像の生成および配信に必要なライブラリ(特定の機能を持つプログラム)を組み合わせて機能させているプラグインです。個人的には処理が少なく必要最小限な機能のみを持つプラグインなので、高機能な手組プラグインと比べて動作が軽い点でおすすめのプラグインです。本ページを最後に編集したときの環境・バージョンなどプラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。プラグインを使用(試用)したテスト環境・公式ページなどこの紹介記事作成にあたって、試用(テスト)を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。0.25.9公式サイト(wordpress.org上):https://wordpress.org/plugins/webp-express/公式サイト(作者サイト):本記事を参考にWordPressサイトへプラグインの導入を検討される方へWordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。WordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。WordPress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介していますこのページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。Express】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、次項の設定方法をご覧いただければ問題なく使用できると思います。Express】プラグインのインストールと設定方法インストール方法インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。Express」をクリックして行います。項目がありますが、基本的には以下の部分にチェックを入れるのみで大丈夫でしょう。generation」は、WebP形式で配信できるブラウザからのアクセスかを判断して適切な画像を配信するための設定です。基本すべての項目にチェックを入れます。upload」にチェックを入れ、今後アップロードする画像については自動的にWebP画像を生成するようにします。Convert(一括変換)」を行う必要があります(未WebP化されていない画像だけが一括変換されるので、こまめに行えばそれほど時間はかかりません)。rules」をクリックして、以下のような完了画面が出れば設定完了です。Convert(一括変換)」をクリックします。この処理には結構時間がかかりますので、余裕を持って作業するようにしましょう1つ1つの画像の変換が行われ、最終行に「Done(完了)」と表示されれば完了です。Convert)が必要です。実際にいくつかのサイトで2021年7月17日現在使用していますが、メディアの編集画面でサイズ変更したり、何等かの方法で画像を入れ替えたりしてもWebPへの変換候補とはならないようです。確認する限りでは、メディア一覧上で画像を削除した場合でも、生成済みのWebP画像が同時に削除されるという機能はないようです。Convert」を行う必要があります。この点については、改善されるといいなと感じる一方、画像をきちんとメンテナンスしてから変換していけば特に問題もないのでは?とも感じました。すべての画像に対して変換される点に注意このプラグインでは、一括変換の際、uploadsフォルダの中にあるすべての画像と、設定によりテーマフォルダの中にある画像すべてに対してWebP画像の生成が実行されます。以前に使っていたテーマやプラグインが生成したカスタムサイズの画像など、実際にはサイト上で何も使用していない画像も含まれますテーマについては、themesフォルダ内にあるすべてのテーマの画像が対象になります。従って余分なファイルやテーマがあればあるほど一括変換に時間がかかりますので、整理を行ってから一括変換するようにしましょう。Express】プラグインの便利な使い方・カスタマイズ方法などこのプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。設定を行った後にページを表示して、ソース確認をしてみると、画像が今まで通りの「.jpg」や「.png」のままになっててあれ?と思うかも知れません(私もその一人です)。これについては、公式ページ上できちんと解説されていますが英語で分かりにくいかと思いますので、図を示しつつできるだけ分かりやすく紹介させていただきます。簡単に確認する方法1.サイトの管理画面からプラグインを一時無効化します。Insightsでサイトトップページや画像が使われているページの検証をしてみます。3.以下の画像のように、「次世代フォーマットでの画像の配信」という項目が表示されていたら、WebPでの画像配信がされていないことが確認できます。環境によってはキャッシュ(一時保存機能)が働いているかも知れませんので、図のような改善項目が表示されないようでしたら、時間をおいて試してみてください。rules」ボタンをクリックして、下図のような画面が出て正常に更新されるかを確認してください。Insightsでサイトトップページや画像が使われているページの検証をしてみます。7.3で表示されていた「次世代フォーマットでの画像の配信」という項目が表示されなくなれば、きちんとプラグインが動作していることになります。デベロッパーツールを使ってきちんとソース上で確認する方法1.プラグインを有効にし、きちんと設定した状態でトップページやその他の投稿などを開きます2.キーボードの「F12」を押してデベロッパーツールを開きます3.「Network」タブ(赤枠)部分をクリックした後、ページをリロードします。4.ページ内の画像をクリックします(上図左の赤枠部分)5.Headersタブをクリックしてスクロールしていくと表示される「content-type」が「image/webp」になっていれば、HTML上ではjpgなどで表記されていてもきちんとWebPで配信されています。failed」と出るときは(考察)私が管理するサイトでの一括変換中に、以下のようなエラーが出ました。failed実際の画面がこちらです。それまでいくつかのサイトで一括変換した際には何もなかったのでちょっとびっくりしました。これらのファイルの状態をFTPクライアントで直接覗いて調べてみたところ、すべてファイル容量が「0(ゼロ)」のものでした。すべて「png」形式のファイルです。それと同じものが「jpg」形式で複製されていました。サイトの管理画面上も、「jpg」形式のファイルとして認識されているようです(下図)。エラーの出た画像が2020年7月と古いものなので、あくまでも想像の域を超えませんが、「png」形式のファイル作成日が「jpg」ファイルの作成日よりも古いことから、何かしらのプラグイン等を使って「png」形式の画像を「jpg」形式に変換したのではないかと推察します。私の場合、このファイルは既にサイズ「0」でサイト内にも実態がありませんし、代替の「jpg」形式の画像がきちんと認識されているので、不要と判断してFTPで削除し、解決しました。その他、公式フォーラムでは処理の問題などというやり取りがあるようですが、このエラーが出たときはサーバー内を確認してみるのも原因を探る方法の1つかも知れません。このエラーが出だすと、変換が遅くなったり、ストップしたりすることがあるので、サーバーのCPU使用率を見てストップしているようでしたら一旦処理画面を閉じ、一括変換を再試行すると再開されます(エラーのあるファイルを削除しないまま再開すると最初の方はエラーだらけになります)。移転後のサイトで画像が壊れたときの対処すべてのサイトについてという話ではないと思いますが、私の所有するサイトで実際に起こったのでメモとして紹介しておきます。移転後以下のような現象が発生しました。管理画面のメディア一覧の画像サムネイルがすべて壊れている表示画面の画像がすべて壊れているファイル・フォルダの移動に失敗したのかと、FTPで確認するも、画像は正しく残っていましたので、画像に対して何かをしているのはこのプラグインだけ。そこで、一度プラグインの停止を行って確認したら、きちんと画像が表示されました。このプラグインで何かが発生しているのは間違いないと確信し、再有効化してみたところ、問題なく表示されるようになりました。プラグインの無効化→有効化で解決できてしまったので、何が要因なのかというところまでは突き止められませんでしたが、恐らく移転によってパーマリンク構造の不整合が起き、個別投稿ができなくなっていたのと関係がありそうです。パーマリンクの不整合に関しては管理画面のパーマリンク設定を開いて何もせずに更新すれば解消されたのですが、このプラグインの紐づけはクリアできなかったようで、恐らくそれが原因でしょう。プラグインを停止→再有効することでリフレッシュされたのだと想像します。同じ現象が発生した方は一度試してみる価値はあると思います。私の場合は、念のため、プラグインの設定画面から.htaccessへの記述を含めた設定の更新をして対処を終えました。実際に使用していて感じた「メンテナンス性」と「一括変換前の画像整理の必要性」について加筆しました。