在开始配置前，需要确保已经完成以下准备工作：
- 服务器已安装宝塔面板
- 网站使用Nginx作为Web服务器
- WordPress已安装Converter for Media插件
配置步骤详解
第一步：进入宝塔面板网站设置
登录宝塔面板后，按照以下步骤操作：
- 在左侧菜单点击”网站”
- 找到需要配置的WordPress网站
- 点击右侧的”设置”按钮
- 切换到”配置文件”标签页
建议：在修改前，先将当前配置文件内容复制保存到本地，作为备份。
第二步：修改Nginx配置文件
添加Converter for Media专用配置
在配置文件中找到server { ... }块，在合适位置添加以下代码：
# 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
添加位置要求：
- 必须在
server { ... }块内 - 在其他
location { ... }指令之前 - 在所有
include指令之前
修改现有图片处理规则
找到原有图片处理规则：
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;
}
修改完成后点击保存，确保没有报错提示。
验证配置效果
检查插件工作状态
完成配置后，回到WordPress后台：
- 进入Converter for Media插件设置页面
- 查看是否有错误提示
- 尝试批量转换图片
如果插件可以正常设置选项并处理图片，说明配置已生效。
确认WebP图片加载
由于插件设计原理，网页源代码中显示的图片URL不会改变，需要通过以下方法验证：
- 打开浏览器开发者工具（F12键）
- 切换到”网络(Network)”标签
- 刷新网页
- 查看图片请求的响应头
验证要点：
- 检查
Content-Type字段是否为image/webp或image/avif - 确认图片实际加载的是WebP格式而非原始格式
常见问题说明
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 图片仍显示原始格式 | 浏览器不支持WebP | 检查浏览器是否支持WebP格式 |
| 部分图片未转换 | 转换后文件比原图大 | 这是插件设计行为，会保留原始格式 |
| 插件报错 | Nginx配置错误 | 检查配置代码是否准确添加 |
技术原理说明
Converter for Media插件采用智能重定向机制：
- 浏览器请求原始图片（如
photo.jpg） - 服务器检测浏览器支持的图片格式
- 内部重定向到WebP格式图片（
photo.jpg.webp） - 浏览器接收WebP图片，但URL保持不变
这种设计具有以下优势：
- 不影响SEO优化，保持URL结构不变
- 兼容不支持新格式的老旧浏览器
- 无需修改主题模板或内容
- 对用户完全透明，自动处理