使用自定义短代码重构 Divi 博客

我最近为 Rev6 重新设计了博客。Rev6 是一个使用 WordPress、Divi 和 Cloudways 构建的健身平台。

我没有使用标准的 Divi Blog 模块，因为它缺乏自定义 URL 路由和会员功能所需的控制力。相反，我在子主题中构建了一套自定义短代码系统。

这种方法将逻辑保留在版本化的 PHP 中，而不是将其隐藏在页面构建器的数据库里。

该设置使用了以下短代码：

  • [rev6_blog_sidebar] 用于导航和搜索
  • [rev6_sort_dropdown] 用于排序
  • [rev6_post_grid] 用于布局
  • [rev6_author_bar] 用于署名栏
  • [rev6_author_bio] 用于作者介绍部分
  • [rev6_related_posts] 用于相关阅读

以下是我在这次构建过程中的技术心得：

  1. 避免偷懒的 CSS Grid 技巧 我曾经使用 "grid-row: 1 / span 999" 来让侧边栏跨越整个页面。这导致产生了数千个空行和巨大的空白区域。请改用命名的网格区域（named grid areas），这样更简洁也更安全。

  2. 在检查代码之前先检查数据 我曾花时间调试一个无法显示的“相关文章”部分。代码本身是完美的，问题出在数据上。该分类下只有一篇文章，而我的代码排除了当前文章，导致结果为零。在函数中寻找 Bug 之前，务必先验证数据库内容。

  3. 理解文件与数据库之间的区别 当我从测试环境（staging）迁移到正式环境（live）时，布局显示异常。我尝试用 CSS 来修复，但失败了。问题在于，导入操作移动的是模板，而不是数据库内容。像模块宽度和文章分配这类信息是存储在数据库中的。如果迁移后布局发生变化，请检查数据库，而不是样式表。

  4. 绝不要将完整的数据库推送到生产环境 全量同步会覆盖订单和注册信息等真实的业务数据。请使用针对性的数据传输，而不是盲目的全量推送。

  5. 缓存是第一步 在经过优化的网站上，CSS 优化工具经常会剔除它们认为未使用的样式。如果你的样式看起来只应用了一半，请先清理缓存并重新生成 CSS。

重新设计后的版本已经上线。它拥有简洁的编辑布局和自定义作者系统。编写代码是容易的部分，而环境带来的挑战才提供了真正的教训。

来源：https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g