解决两大痛点:WordPress 对接 EdgeOne 鉴权与视频尺寸强制控制插件

背景

最近在折腾博客的 CDN 和多媒体排版时,遇到了两个非常棘手的问题。

第一个问题是 CDN 鉴权。 我使用的是腾讯云的 EdgeOne (EO) 来加速站点,为了防止资源被恶意盗链,我开启了 Type-A 鉴权(Token 签名)。但问题来了:WordPress 默认插入的图片或视频链接都是原始 URL,无法自动生成带 token 的签名链接。如果每次发文章都要手动去算一遍 MD5 再填进去,链接过期了还得重算,这简直是噩梦。

第二个问题是古腾堡的视频尺寸。 不知道大家有没有发现,在很多 WordPress 主题中,即使你在古腾堡编辑器里设置了视频宽度为 500px,发布后前台依然是 width: 100% 撑满全屏。这是因为主题的 CSS 优先级太高,覆盖了 HTML 属性。

为了同时解决这两个问题,我不想安装臃肿的大型插件,于是自己手搓了一个轻量级的解决方案:EdgeOne Gutenberg Authentication

今天把这个插件分享出来,希望能帮到有同样需求的站长。


插件功能介绍

这个插件非常纯粹,没有多余的依赖,核心功能就两点:

1. 自动化 EdgeOne 鉴权 (Type-A)

你只需要在后台填入 EdgeOne 的密钥,插件会在前台页面渲染时(PHP端),自动把内容里的图片和视频链接替换为带签名的安全链接。

  • 实时签名:基于用户访问时间实时生成,安全系数极高。
  • 无损编辑:数据库里保存的依然是原始链接,以后如果你换了 CDN,关掉插件即可,不会导致链接失效。

2. 强力尺寸控制 (Universal Sizing)

针对主题 CSS 覆盖宽高的问题,我采用了一种“暴力但有效”的方案。

  • 强制生效:插件不仅会写入 width 属性,还会自动注入内联样式 style=”width: …; height: …”。在 CSS 规则中,内联样式的优先级极高,从而确保你设置多大,前台就显示多大。
  • 智能单位:支持输入 600 (自动补齐 px) 或 80%。
  • 通用支持:同时支持图片视频区块。

使用教程

第一步:安装插件

由于这是一个自用的小插件,我没有上传到 WP 官方库。你可以直接下载我打包好的 Zip 上传。

第二步:配置 EdgeOne

进入 WordPress 后台 设置 -> EdgeOne 鉴权
填入你在腾讯云控制台获取的 Primary Key (主密钥)

⚠️ 重要提示1:EdgeOne 的规则是 从上往下匹配,命中即停Token 规则必须放在最前面

⚠️ 重要提示2:在腾讯云 EdgeOne 的控制台(站点加速 -> 缓存配置)中,请务必将“查询字符串”设置为 “忽略全部查询字符串”

原因:鉴权生成的 token 每秒都在变。如果不忽略参数,CDN 会认为每个请求都是新文件,导致无法命中缓存,直接回源,拖慢网站速度。

第三步:在文章中使用

  1. 进入古腾堡编辑器,选中一个图片或视频。
  2. 看右侧侧边栏,你会发现多了一个 “EdgeOne & 尺寸设置” 面板。
  3. 打开 “启用 EdgeOne 鉴权” 开关,即可保护该资源。
  4. 在 “宽度” 输入框填入你想要的大小(例如 500),发布后即可看到效果。

来自河北
上一篇