宝塔パネルでnginx設定を修正し、Converter for Mediaプラグインをサポート

Converter for MediaはWordPressプラットフォームで人気のある、画像を無料でwebp形式に変換するプラグインです。デフォルトでは、宝塔パネルを使用してサイトを構築する際、サーバーソフトウェアとしてnginxを選択している場合、Converter for Mediaを正常に動作させるにはnginxの設定を手動で構成する必要があります。初心者には公式ドキュメントが理解しにくいかもしれませんので、本記事ではNaibaが宝塔パネルでサイトのnginx設定ファイルを修正し、Converter for Mediaが正常に動作するように手順を詳しく説明します。

1、宝塔パネルのウェブサイト設定画面を開く

宝塔パネルのサイトリストから、設定したいサイトを選択し、設定ファイル画面に切り替えて、デフォルトの内容をまずローカルにコピーしてバックアップとして保存してください。

2、設定ファイルを修正する

追加する必要があるコード

# BEGIN Converter for Media
    set $ext_avif ".avif";
    if ($http_accept !~* "image/avif") {
        set $ext_avif "";
    }
    
    set $ext_webp ".webp";
    if ($http_accept !~* "image/webp") {
        set $ext_webp "";
    }
    
    location ~* ^/wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
        add_header Vary Accept;
        add_header Cache-Control "private";
        expires 365d;
        try_files
            /wp-content/uploads-webpc/$path.$ext$ext_avif
            /wp-content/uploads-webpc/$path.$ext$ext_webp
            $uri =404;
    }
    # END Converter for Media

正確な位置に追加する

Converter for Mediaの設定ファイルは、対応する位置に追加して初めて正常に動作します。具体的な位置の要件は以下の通りです：

• 在server { ... }ブロック内
• 他のlocation { ... }ディレクティブの前に
• すべてのincludeディレクティブの前に

上記のスクリーンショット情報を参考に、おおよそ14行目以降に追加してください。

既存の画像処理ルールを修正する

元の設定ファイルの以下の内容を見つけてください：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

以下の内容に変更してください：

location ~ .*\.(bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

保存をクリックし、エラーがなければ修正が正確であることを証明します。

3、プラグインが正常に動作しているかテストする

上記の設定修正が完了したら、宝塔パネルにエラーが表示されなければ、プラグインは正常に動作するはずです。この時点でプラグイン設定画面に戻り、設定が必要なプロンプトがまだあるかどうかを確認してください。プロンプトがなくなり、プラグインのオプションを正常に設定したり、以前の画像を一括処理したりできるようであれば、プラグインが正常に動作していることを証明します。

4、画像がwebp形式に変換されたかどうかを確認する方法

サイトのフロントエンドから画像アドレスを確認したり、画像を保存したりしても、以前の形式のままでwebpに変わっていない場合、これは正常な状況です。プラグイン作者は特に記事で説明しています：このプラグインは画像のURLを変更しないため、ウェブサイトのソースコードを表示すると、常にデフォルトの画像のURLが表示されます。プラグインはWebPおよびAVIF形式のファイルを出力するためのリダイレクトを作成し、これらの画像のMIMEタイプを変更しますが、URLは変更しません。

プラグインのワークフローは以下の通りです：

浏览器请求: GET /wp-content/uploads/photo.jpg
↓
插件检测浏览器支持WebP格式
↓
服务器内部重定向到: /wp-content/uploads-webpc/photo.jpg.webp
↓
浏览器收到WebP格式图片，但地址栏仍显示photo.jpg

この設計の利点

• SEOに優しい：URL構造が変わらず、SEOに影響しない
• 互換性：新しい形式をサポートしていない古いブラウザでも元の形式の画像を受け取れる
• 非侵入性：テーマテンプレートやページ内容を修正する必要がない
• 自動化：ユーザーは気づかず、完全にバックグラウンドで自動処理される

検証方法：

プラグインが正常に動作しているか確認するには、ウェブページのソースコードを確認するのではなく、以下の方法で行ってください：

1. ブラウザの開発者ツール（右クリックまたはショートカットキーF12） → ネットワーク(Network)タブ
2. ページをリフレッシュして画像リクエストを確認
3. レスポンスヘッダーのContent-Typeフィールド
4. を確認するimage/webp或image/avifではなくimage/jpeg

ある画像が古いフォーマットのままの場合、変換後の画像が元の画像よりも大きいため、プラグインがその画像の処理をスキップしたことを示します。