具有根堆栈的现代 WordPress 开发工作流程

WordPress 已经存在了很长时间，至少按照互联网标准来说，它的理念一直是保持向后兼容性。 鉴于当今在线 WordPress 网站的数量庞大，这种对兼容性的关注是可以理解的。 然而，虽然这可以帮助那些仍然使用旧版 PHP 和 MySQL 的遗留环境（这本身就是一个安全风险，但这不是今天文章的主题），但它也导致新的 WordPress 版本没有充分利用最新的 PHP 功能。

这也导致许多 WordPress 开发人员生活在 WordPress 泡沫中，没有动力去学习新的和现代的前端开发技术，有时会陷入“好方法”的做事中。

您可以为 WordPress 采用现代开发工作流程吗？

您当然可以，WordPress Roots 堆栈可以帮助您像 2019 年一样进行开发，其中包含三个令人惊叹的工具：

• 鼠尾草作为您的入门主题，
• 作为现代 WordPress 样板的基岩，
• 格状结构来管理不同环境的部署和供应。

Roots 团队还有两个额外的工具正在开发中：Acorn，一个插件构建框架，和 Clover，一个插件样板。 由于两者都处于 alpha 阶段，因此本文不包含它们，但您绝对应该关注它们。

究竟什么是根堆栈

最初被称为 Roots 主题，它是一个坚如磐石的 HTML5 入门主题，旨在为新的 WordPress 网站提供一个更干净的起点。 随着时间的推移，它演变成一整套工具，贯穿所有主要的现代 Web 技术和标准（从 Grunt 到 Gulp 和 Webpack、LESS 和 SCSS、NPM 和 Yarn、Bootstrap、PSR-2 编码标准和 DRY 原则），从而迫使采用它的 WordPress 开发人员不断学习并了解现代前端开发技术所提供的最新技术。

今天，Roots 成长为一整套不断扩展的工具，旨在帮助您构建更好的 WordPress 网站，遵循从开发到登台和生产的整个周期，并通过迫使您走出舒适，让您成为更好的开发人员由所谓的 WordPress 泡泡提供的区域。

但是让我们看看它们提供的三个主要工具，它们是什么，以及为什么你应该考虑使用它们。

根贤者 9

Roots Sage 9 是专业维护的WordPress 入门主题的最后一次迭代，最初于 2011 年作为 Roots 发布。在其生命周期中，它经历了许多变化、改进和重新考虑最佳实践，最终成为今天是介绍 WordPress 开发的现代前端开发工作流程的一个很好的起点。

Sage试图做的是采用MVC模式（Model-View-Controller），Views和Controller完全分离； 这使我们能够重用视图，它们不一定需要“知道”数据来自哪里，但它们只是等待控制器提供一些数据来显示。

Sage 9 包含的控制器并不是您在其他框架（如 Laravel）中可能已经熟悉的实际控制器，主要区别在于 Sage 9 控制器使用基于模板的路由而不是基于 URL 的路由。 基本上，您让 WordPress 处理 URL 路由并为模板文件编写控制器。

通过在整个开发过程中增加一些程度的复杂性，Sage 9 可能不是初学者的最佳选择，因为您将需要大量学习才能最终掌握它并能够在生产中使用：正确依赖和资产管理、代码版本控制、新的项目结构、从 Laravel 派生的新模板引擎、DRY（不要重复自己）原则，你必须坚持严格的编码标准，这与什么有点不同WordPress 推荐； 但如果您是一位经验丰富的开发人员，这可能是一个很好的开端。

如果您想全力以赴，请记住 Roots 团队的开发人员之一 Ben Word 的以下建议：

Sage 不是一个主题框架，它是一个入门主题。 您应该很少需要更新它，并且通常您不应该从中创建子主题。 作为入门主题，Sage 旨在用作新项目的起点。

但是也：

如果 Underscores 是 1,000 小时的领先优势，Sage 就是 10,000 小时的领先优势。

Sage 的文件和文件夹结构

Sage 的文件和文件夹结构与我们习惯于在下划线等其他入门主题中看到的有点不同，甚至在 Sage 8 的先前主要版本中也有所不同。

这是您在安装 Sage 后会发现的内容：

 ├── app/ # it contains all the PHP code of your theme │ ├── controllers/ # your Controllers, it already contains a few │ │ # examples to use as a starting point │ ├── admin.php # setup for the WordPress theme customizer │ ├── filters.php # a good place to group all your theme │ │ # filter hooks │ ├── helpers.php # for various helper functions you want │ │ # to reuse in your theme │ └── setup.php # the main theme setup file ├── config/ # theme configuration files ├── dist/ # all built theme assets, never edit this! ├── resources/ # original theme assets, edit this instead! │ ├── assets/ # all front-end assets │ │ ├── build/ # Webpack and ESLint config │ │ ├── fonts/ # theme fonts │ │ ├── images/ # theme images │ │ ├── scripts/ # theme JS scripts │ │ ├── styles/ # theme SCSS stylesheets │ │ └── config.json # settings for compiled assets │ ├── views/ # all theme Blade templates │ │ ├── layouts/ # base Blade templates │ │ └── partials/ # partial Blade templates │ ├── functions.php # Composer autoloader and theme includes, │ │ # normally you should not edit this unless │ │ # you know what you're doing │ ├── index.php # required by WordPress but left blank │ │ # intentionally, never edit this! │ ├── screenshot.png # the screenshot used in the WordPress admin │ └── style.css # required by WordPress, it should contain │ # only the theme meta information ├── vendor/ # Composer packages, never edit this! ├── composer.json # autoloading for `app/` files ├── composer.lock # Composer lock file, never edit this └── package.json # Node.js dependencies and scripts

另外，代码编辑器和 IDE 使用的其他一些文件，例如 .editorconfig、.eslintrc.js、.stylelintrc.js、phpcs.xml 等。

以下是 Sage 9 基本要求的快速概览：

• WordPress >= 4.7
• PHP >= 7.1.3（启用 php-mbstring）
• 作曲家
• Node.js >= 8.0.0
• 纱

基岩

基岩就像类固醇上的 WordPress！

如果 Sage 改进了您的主题开发，Bedrock 改进了整个 WordPress 安装。 它通过提供现代项目样板、改进的文件夹结构和安全性（例如，通过在网站根目录中不包含您的配置文件）、配置和 ENV 文件以及适当的依赖管理（是的，包括 WordPress 插件和主题）来做到这一点.

用一句话来描述它，我们可以说 Bedrock 是一个独立的 WordPress 项目，它可以自动安装核心文件和所需的插件。

文件和文件夹结构

如果您查看基本的基岩安装，您可能会在开始时感到迷茫。 Bedrock 将 web、配置和依赖文件分离到它们自己的文件夹中。 这是裸骨结构的样子：

 ├── config/ # WordPress configuration files │ ├── environments/ # configuration files for other │ │ │ # environments, they will override │ │ │ # production configuration │ │ ├── development.php # overrides for WP_ENV === 'development' │ │ └── staging.php # overrides for WP_ENV === 'staging' │ └── application.php # main configuration for production │ # environment, it's the equivalent of │ # the wp-config.php file ├── vendor/ # Composer packages, never edit this! ├── web/ # the new root folder of the webserver │ ├── app/ # your new wp-content folder │ ├── wp/ # WordPress core files, never edit this! │ ├── index.php # WordPress view bootstrapper │ └── wp-config.php # required by WordPress, never edit this! ├── .env # all environment variables: db name, │ # user and password, salts, current │ # environment, site urls, and others ├── composer.json # here you can manage versions of │ # WordPress, plugins and other │ # dependencies └── composer.lock # Composer lock file, never edit this

加上其他一些不太重要的文件。

基岩要求是：

• PHP >= 7.1
• 作曲家

格子

Trellis 是一个现代 LEMP 堆栈，可以无缝地管理您的开发、登台和生产服务器，旨在使它们尽可能地相似（“开发和生产平价”）。 这意味着，如果您的自定义 WordPress 站点在您的开发环境中工作，那么可以安全地假设它也可以在生产环境中工作，并且您可以放心地进行部署。

对于本地开发，Trellis 使用 Vagrant，通过一个简单的vagrant up您将拥有一个运行适当现代环境的虚拟机。

使用 Ansible playbook 管理对暂存和生产环境的配置和部署，这些 playbook 是告诉 Ansible 做什么的 YAML 文件。

格状结构建议的文件夹结构

Trellis 有一个建议的文件夹结构，仅由两个子文件夹组成：

 ├── trellis/ # the clone of the Trellis repository └── site/ # the Bedrock-based WordPress website

我建议保持原样，但可以根据您的喜好和需求进行定制。

格子要求

• 作曲家
• 虚拟机 >= 4.3.10
• 流浪者 >= 2.1.0

为什么你应该使用它

如果 WordPress 已经按原样工作，为什么要切换到更复杂的堆栈并花费大量时间来掌握它？ 因为有明显的优势，也有一些不太明显的优势。 让我们试着看看它们是什么。

与框架无关的入门主题

太多的 WordPress 入门主题迫使您使用特定的 CSS 框架，您可能喜欢也可能不喜欢甚至知道，但 Sage 完全与框架无关。 在安装过程中，如果你想从头开始或使用其他东西，你可以选择自动包含 Bootstrap 4、Bulma、Foundation、Tachyons、Tachyons、Tachyons，或者根本不包含任何框架（提示：最近我开始喜欢 Tailwind CSS 很多）。

专业提示：在 Windows 机器上，您可能会在安装过程中收到“Windows 平台不支持 TTY 模式”消息，并且您将无法选择框架或配置 Sage。 如果您想利用自动配置，则必须从主题文件夹中手动运行这三个命令：

 $ vendor\bin\sage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendor\bin\sage config # to specify your theme's dev URL and # theme directory. $ vendor\bin\sage preset # to set up the theme with one of the # supported frameworks or no # framework at all.

现代构建过程

使用 Sage 中包含的 Webpack，您无需再考虑编译资产、连接和缩小 JavaScript 和 CSS 代码、优化图像、检查 JavaScript 和样式错误以及管理外部库。 构建过程将通过简单的yarn build （或yarn build:production ，如果您希望您的资产针对生产使用进行优化）来处理所有这些，在您的主题/dist/文件夹中生成所有静态文件。

现代 PHP 和要求

您可以运行 WordPress 的最低 PHP 版本是 PHP 5.2.4，这将确保所有在旧环境中运行其网站的用户向后兼容，但旧版本的 PHP (<= 7.0) 已正式结束生命，因此它们不再受支持，它们可能会使您的站点面临安全漏洞和性能问题。

Sage 和 Bedrock 都需要 PHP 7.1 的健全版本（尽管如果您可以选择 7.3，请这样做）。

Sage 9 还完全采用 PSR-2 编码标准（最广泛使用和接受的编码

PHP 社区使用的标准），这与 WordPress 编码标准有点不同，但它们允许您拥有更清洁和更易于维护的代码，特别是如果您在团队中工作或必须与他人共享您的代码。

更好的依赖和包管理

Roots 堆栈大量使用 Composer 来管理所有依赖项和包，包括 WordPress 核心、插件和主题。 如果您使用第三方工具来管理 WordPress 更新（如 ManageWP、MainWP 或 InfiniteWP），这可能是一个问题，但有人可能会争辩说，将所有内容置于版本控制之下可以让您获得更多控制权，并且更容易回滚到以前的工作如果出现问题，版本。

此外，Sage 使用 Yarn 作为应用程序代码的包和依赖管理器并启动构建过程。

更好的模板文件

WordPress 缺乏真正的模板引擎，因此 Sage 采用了 Laravel 的 Blade 并遵循 DRY 原则来弥补这一不足：不要重复自己。

这是默认的 single.blade.php 模板文件的样子，只有 6 行代码：

 @extend('layouts.app') @section('content') @while(have_posts()) @php the_post() @endphp @include('partials.content-single-'.get_post_type()) @endwhile @endsection

Blade 模板引擎将 Views 和 Controllers 完全分离，其语法比 PHP 标签更优雅、简洁、易读、更易编写。 这里的经验法则是将所有 PHP 代码留在模板文件之外（或至少尝试这样做）。

使用 Blade 的另一个好处是模板继承：基本布局模板（默认为/resources/views/layouts/app.blade.php ）定义包含公共网站元素的块，然后由其子模板继承。 模板继承非常适合从单个模板中删除重复标记并保持内容干燥。

浏览器同步

通过运行yarn start ，您将启动 Browsersync 会话。 Browsersync 是一个用于在开发时同步浏览器测试的模块。 它将监视对您的前端资产所做的更改，并与 Webpack 一起工作，它会自动将更改注入您的浏览器会话。

快速、简单、安全的 WordPress 部署

Trellis 提供零停机时间的 WordPress 部署。 当您启动部署时，Trellis 将 git clone 您的存储库，运行 composer install 然后将符号链接更新到当前版本，因此它永远不会直接编辑当前在生产中提供的文件。

使用 Bedrock 时，Trellis 也需要很少的配置。

缺点

使用完整的 Roots 堆栈的唯一缺点（除了学习新东西，这根本不应该被视为问题）是您必须使用对网格友好的托管服务提供商，如 Kinsta、DigitalOcean droplet 或任何其他主机至少支持 SSH、Composer 和 WP-CLI，以及更新 Web 根路径的选项。

这使得大部分廉价（ish）共享主机退出游戏，这是您和/或您的客户在开始新项目之前必须考虑的事情。

如何开始

这可以被认为是对著名的“WordPress 5 分钟安装”的新尝试，但对于现代前端开发人员而言。 它为以后的开发增加了几度复杂性，但最终，您可以获得的好处绝对值得。

我们将专注于采用全栈（Sage、Bedrock 和 Trellis），但您可以只使用它们中的一个或任意组合。 Sage 可以用作任何 WordPress 安装中独立主题的起点； Bedrock 可以与您喜欢的任何 WordPress 主题一起使用； 和 Trellis 部署是为基于基岩的站点配置的，并负责处理所需的一切，但只要稍加修改，它就可以根据几乎任何需求进行定制。

如何创建新项目

使用 Trellis、Bedrock 和 Sage 设置一个新的 WordPress 项目非常简单，只需几个命令行即可。

在您想要的文件夹中安装格子（例如example.com ）：

 $ mkdir example.com && cd example.com $ git clone --depth=1 [email protected]:roots/trellis.git $ rm -rf trellis/.git

在/site/子文件夹中安装 Bedrock：

 $ composer create-project roots/bedrock site $ cd site/web/app/themes/

安装和构建 Sage：

 $ composer create-project roots/sage your-theme-name $ cd your-theme-name/ $ yarn && yarn build

部署

如果您根据官方文档正确配置了所有内容，则部署到登台或生产会更加容易。 只需一个命令行即可（从example.com/trellis/文件夹运行）：

 $ ansible-playbook deploy.yml -e "site=<domain> env=<environment>"

您还可以轻松回滚您的部署，只需运行：

 $ ansible-playbook rollback.yml -e "site=<domain> env=<environment>

关于在 Windows 上设置开发环境的提示

如果你在 google 上搜索如何安装和使用 Roots 堆栈，尤其是 Trellis，你会发现很多教程都集中在 Linux 或 MacOS 上，但在 Windows 上可用的信息很少，你会发现两个主要问题： Ansible 不可用对于 Windows，Vagrant 在 Windows 机器上通常非常慢。

当我最初想到这篇文章时，Windows 的官方 Trellis 文档建议在 Vagrant 虚拟机内运行 Ansible，但这是一种很老套的做事方式，而且不是很可靠。

从那时起，他们更新了文档，添加了有关使用 WSL（Linux 的 Windows 子系统）设置所有内容的正确说明，因此无需重新发明轮子并编写有关它的教程。 很高兴知道在安装 Trellis 之前可以遵循三页详细的分步说明：Windows 安装程序、Windows 安装程序：Sage 和 Windows 安装程序：Trellis。

快乐编码！