
编辑注:以下客座文章由 XWP 的高级工程师兼架构师 Jaroslav Polakovic 撰写,最初发表于XWP 博客
当我们第一次开始与Cowgirl Magazine合作时,由于其完全兼容 AMP,他们已经拥有了一个相当快速的网站。然而,他们使用的是一个专有的 AMP 插件。因此,他们实际上发现自己与插件维护者在设计和功能更新方面紧密相连。由于他们的供应商反应越来越迟钝,Cowgirl Magazine 找到 XWP 寻求摆脱这种情况的方法。
在我们的发现阶段,我们发现专有的 AMP 插件不仅与当前使用的主题紧密耦合,还与为 Cowgirl Magazine 提供一些关键功能的几个扩展紧密耦合:自定义布局的能力、放置和定义广告的工具、设置活动覆盖层以及放置活动小部件。三个关键要求变得明确
- 我们必须打破供应商锁定……
- 同时不影响广告收入……
- 同时保持网站的整体外观和感觉。
为了让 Cowgirl Magazine 摆脱这种供应商锁定,XWP 建议技术迁移到WordPress 插件的官方 AMP。为了保持预算精简,我们还着手确定一个现代的、兼容 AMP 的替代 WordPress 主题,该主题将支持行业标准发布者工具和插件。输入:Newspack。
Newspack 带您走得更远
Newspack 是一个由 Automattic 在 WordPress.com 基础设施之上运行的商业发布平台,但其关键技术部分——Newspack 主题和Newspack 插件——都是开源的,并且包含面向发布者的功能。
我们最终选择 Newspack 主题和插件来替换旧版设置,因为 Newspack 即使在其默认状态下,也会通过正确地执行一些关键任务,让发布者更接近终点线。
1. AMP 兼容性
Newspack 与官方 AMP 插件无缝集成,甚至被正式认可为兼容主题。对于 Cowgirl Magazine,我们只需使用 Newspack 主题启用 WordPress 插件的 AMP,我们就在几分钟内运行了一个有效的 AMP 网站。
2. 现代前端布局
Newspack 的前端代码利用flexbox 布局。这允许开发人员在不更改页面标记的情况下重新排序页面上的元素。
为什么这一点如此重要?每个发布者都希望自己的网站独一无二。这通常包括对主题布局进行更改,在 WordPress 中,通常通过创建一个子主题来解决,该子主题会覆盖父主题的某些模板。
通过限制被覆盖模板的数量,每当父主题更新时,新功能和更改更有可能按预期应用于网站。减少被覆盖模板的数量有助于维护网站。
在 Cowgirl Magazine 网站上,我们能够重新排列网站页眉和页脚中的项目,以匹配之前的设计,而无需更改底层 HTML。
3. 开放生态系统
Newspack 插件的核心是汇编和配置其他面向发布者的插件。Newspack 构建了一个工具生态系统,该生态系统与一些扩展插件配合良好,这些扩展插件主要用于支持 Newspack 的网站。这不会导致陷入另一个供应商锁定陷阱吗?幸运的是,答案是否定的,因为该系统高度模块化。即使是少数几个必需的插件也可以在初始设置后关闭。
没有使用Newspack Blocks的用途?不要安装该插件。您不希望Newspack Ads来管理您的广告单元?用另一个广告管理器替换它。不喜欢Newspack Campaigns?随意使用另一个插件或您自己的实现。
4. 与发布者关心的工具兼容
Newspack 插件附带对 WordPress 发布者依赖的多个行业标准工具的明确支持:Yoast SEO、Jetpack、Google Site Kit和更多。在 Cowgirl Magazine 上,我们必须确保我们提出的任何解决方案都与 Yoast SEO 配合良好,而 Newspack Theme 开箱即用。
配置结束的地方
我们花了一天时间构建概念验证网站,这足以让我们通过配置将大多数现有的 Cowgirl Magazine 网站功能迁移到 Newspack 之上,其中包括设置
- 有效的 AMP 网站。
- Yoast SEO 和 Schema 插件。
- 大多数广告位和广告单元。
- 广告系列覆盖和频率。
- Mailchimp 集成。
- 基本网站布局、页眉布局和小部件位置。
我们对 Newspack 在无需编写任何代码行的情况下将我们带到何种程度感到印象深刻。但 Newspack 不是可视化网站构建器,并且配置必须在某个地方结束。有一些自定义项,我们需要挽起袖子,并针对 Newspack 集成一些自定义代码。
虽然代码干净且结构良好,但我们也遇到了几个小挑战。Newspack 主题通过 WordPress Customizer 公开了大量合乎逻辑的自定义选项,但它不包含许多 钩子,这些钩子将允许子主题创建者修改父模板输出,而无需覆盖整个模板或诉诸于利用 输出缓冲 来捕获和删除标记等不太常规的解决方案。
对于其他 Newspack 功能插件(如广告)也是如此。虽然 AMP 广告受 Newspack 广告插件支持,但更高级的自定义(如添加 rtc-config 参数以促进基本标头竞价或 data-multi-size 以增加广告竞争)无法实现,因为该插件未定义第三方开发人员可用来更改 <amp-ad> 组件输出的钩子。
不过,此类问题并不难解决,结果不言自明。我们能够在保留原始网站的外观和感觉的同时,以出乎意料的低工作量,在旧网站的核心替换 AMP 插件和 AMP 主题。我们还能够将自己保持在客户预算的限制之内。锦上添花的是什么?由于标记和样式不那么复杂,新的 Cowgirl Magazine 网站比以前更快。