宝塔パネルで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 https://edgeone.naibabiji.com/wp-content/uploads/photo.jpg
↓
插件检测浏览器支持WebP格式
↓
服务器内部重定向到: /wp-content/uploads-webpc/photo.jpg.webp
↓
浏览器收到WebP格式图片，但地址栏仍显示photo.jpg

この設計の利点

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

検証方法：

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

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

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

Cloudflare CDNを使用して画像が変換されていない？

Cloudflareの無料CDNを使用している場合、ソースコードを確認すると元のjpgやpng画像のままで、webp形式の画像が出力されていません。これは、プラグインがブラウザのAccept 判断を利用してWebPまたはAVIFを返す必要があるためですが、この機能は無料版のCloudflareではサポートされておらず、Converter for Mediaもデフォルトでは画像のURLを変更しないため、CF側では yuantu.jpg として認識されます。

画像を yuantu.jpg.webp のようにサポートさせる必要があります。これにより、CFはjpgとwebpの両方の画像を同時にキャッシュします。以下のコードをテーマの関数ファイルに追加してください。

/**
 * WordPress + Cloudflare Free + Converter for Media
 * 仅在 WebP 文件真实存在时，将 jpg/png 图片包装为 picture。
 * 支持 uploads 目录 + 当前主题目录图片。
 */

function nbj_get_webp_info($src, $uploads) {
    $src_raw  = html_entity_decode($src);
    $src_path = parse_url(esc_url_raw($src_raw), PHP_URL_PATH);

    if (!$src_path || strpos($src_path, '..') !== false) {
        return false;
    }

    /**
     * 1. 处理媒体库 uploads 图片
     */
    $uploads_baseurl = $uploads['baseurl'];
    $uploads_basedir = $uploads['basedir'];

    $uploads_base_path = parse_url(esc_url_raw($uploads_baseurl), PHP_URL_PATH);

    if ($uploads_base_path && strpos($src_path, $uploads_base_path . '/') === 0) {
        $relative = ltrim(substr($src_path, strlen($uploads_base_path)), '/');

        if (!$relative) {
            return false;
        }

        $webp_url  = str_replace('https://edgeone.naibabiji.com/wp-content/uploads/', '/wp-content/uploads-webpc/uploads/', $src_raw) . '.webp';
        $webp_path = dirname($uploads_basedir) . '/uploads-webpc/uploads/' . $relative . '.webp';

        return [
            'url'  => $webp_url,
            'path' => $webp_path,
        ];
    }

    /**
     * 2. 处理当前主题目录图片
     * 规则：/wp-content/themes/your-theme/xxx.jpg
     * 对应：/wp-content/themes/your-theme/xxx.jpg.webp
     */
    $theme_baseurl = get_stylesheet_directory_uri();
    $theme_basedir = get_stylesheet_directory();

    $theme_base_path = parse_url(esc_url_raw($theme_baseurl), PHP_URL_PATH);

    if ($theme_base_path && strpos($src_path, $theme_base_path . '/') === 0) {
        $relative = ltrim(substr($src_path, strlen($theme_base_path)), '/');

        if (!$relative) {
            return false;
        }

        $webp_url  = $src_raw . '.webp';
        $webp_path = rtrim($theme_basedir, '/') . '/' . $relative . '.webp';

        return [
            'url'  => $webp_url,
            'path' => $webp_path,
        ];
    }

    return false;
}

function nbj_wrap_webp_picture($content) {
    if (is_admin() || is_feed() || (defined('REST_REQUEST') && REST_REQUEST)) {
        return $content;
    }

    if (stripos($content, '<img') === false) {
        return $content;
    }

    $uploads = wp_upload_dir();

    // 支持 jpg/png，以及 jpg/png 后面带 query string 的情况
    $pattern = '/<img\b[^>]*\bsrc=(["\'])([^"\']+\.(?:jpe?g|png)(?:\?[^"\']*)?)\1[^>]*>/i';

    return preg_replace_callback($pattern, function ($m) use ($uploads) {
        $img_tag = $m[0];
        $src     = html_entity_decode($m[2]);

        if (
            strpos($img_tag, 'data-nbj-webp') !== false ||
            strpos($src, 'uploads-webpc') !== false ||
            strpos($src, '.webp') !== false
        ) {
            return $img_tag;
        }

        $webp = nbj_get_webp_info($src, $uploads);

        if (!$webp || !is_file($webp['path'])) {
            return $img_tag;
        }

        $img_tag = preg_replace('/<img\b/i', '<img data-nbj-webp="1"', $img_tag, 1);

        return '<picture data-nbj-webp="1">'
            . '<source srcset="' . esc_url($webp['url']) . '" type="image/webp">'
            . $img_tag
            . '</picture>';
    }, $content);
}

add_filter('the_content', 'nbj_wrap_webp_picture', 999);
add_filter('widget_text_content', 'nbj_wrap_webp_picture', 999);

add_action('template_redirect', function () {
    if (
        !is_admin()
        && !is_feed()
        && !(defined('REST_REQUEST') && REST_REQUEST)
        && ob_get_level() === 0
    ) {
        ob_start('nbj_wrap_webp_picture');
    }
});

2/5 - (1 vote)