宝塔面板修改nginx配置支持Converter for Media插件

Converter for Media是WordPress平台一款热门的将图片免费转换为webp格式的插件,默认情况我们使用宝塔面板建站时服务器软件都是选择的nginx,这个情况下,需要手动配置nginx的配置来让Converter for Media正常工作。新手可能看不懂官方的文档,所以本文奶爸手把手教大家在宝塔面板修改网站的nginx配置文件以保证Converter for Media的正常工作。

1、打开宝塔面板的网站设置界面

在宝塔面板的网站列表里面,选择你需要配置的网站,切换到配置文件界面,把默认内容先复制一份到本地保存备用。

Wp blog 325

2、修改配置文件

需要添加的代码

Code
# 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行之后添加。

修改现有图片处理规则

找到原配置文件下面的内容:

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

修改为下面的内容:

Code
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结构保持不变,不影响搜索引擎优化
  • 兼容性:不支持新格式的老浏览器仍能收到原始格式图片
  • 无侵入性:不需要修改主题模板或页面内容
  • 自动化:用户无感知,完全后台自动处理

如何验证:

要确认插件是否正常工作,不要查看网页源代码,而是:

  1. 浏览器开发者工具(鼠标右键或者快捷键F12) → 网络(Network)标签
  2. 刷新页面查看图片请求
  3. 检查响应头中的Content-Type字段
  4. 应该看到image/webpimage/avif而不是image/jpeg
Wp blog 326

当你发现某张图还是老格式,证明转换后的图比原图大,所以插件抛弃了那张图的处理。

给本文打分 post

需要专业的技术解决方案?

我们的专业团队可以帮助您实现技术目标,提供从设计到开发的全方位服务。

咨询专业服务
🔒

评论已关闭

本文的评论功能已关闭,如有问题欢迎通过其他方式联系我们。

×
二维码

扫码关注