WordPress已经存在很长时间了, 至少从互联网的标准来看是这样, 它的理念一直是保持向后兼容性. 考虑到今天在线的WordPress网站的数量，这种对兼容性的关注是可以理解的. However, 虽然这可以帮助那些仍然使用旧PHP和MySQL版本的遗留环境的人(这本身就是一个安全风险), 但这不是今天文章的主题。), 它还导致较新的WordPress版本不能充分利用最新的PHP功能.

This has also caused many WordPress developers to live in a WordPress bubble, 没有动力去学习新的现代前端开发技术, 有时会陷入做事的“旧方式”.

你能在WordPress中采用现代的开发流程吗?

你当然可以，而且 WordPress Roots stack 在这里帮助你像2019年一样发展，有三个神奇的工具:

• Sage as your starter theme,
• Bedrock 作为一个现代WordPress样板，
• Trellis 管理不同环境的部署和供应.

Roots团队还在开发另外两个工具: Acorn一个插件构建框架，以及 Clover, a plugin boilerplate. 因为它们都是α, 它们不包括在本文中, 但你一定要留意他们.

到底什么是根栈

最初被称为根主题, 它是一个坚如磐石的HTML5入门主题，旨在为新的WordPress网站提供一个更清晰的起点. Over time, 它演变成了一整套工具, 通过所有主要的现代web技术和标准(从Grunt到Gulp和Webpack), LESS and SCSS, NPM and Yarn, Bootstrap, PSR-2编码标准和DRY原则), 从而迫使采用它的WordPress开发人员不断学习并跟上现代前端开发技术所提供的最新内容.

Today, 根在不断扩展中成长为一整套工具, 旨在通过遵循整个周期来帮助您构建更好的WordPress站点, 从开发到登台和生产, 通过强迫你走出所谓的WordPress泡沫提供的舒适区，让你成为一个更好的开发人员.

但是让我们看一下它们提供的三个主要工具, what they are, 以及为什么你应该考虑使用它们.

Roots Sage 9

根圣人9是一个专业维护的最后迭代 WordPress starter theme这首歌最初于2011年以《欧博体育app下载》的名字发行. During its life, 它经历了很多变化, improvements, 重新考虑最佳实践, 最终成为今天介绍WordPress开发的现代前端开发工作流的一个很好的起点.

What Sage is trying to do is to adopt a MVC pattern (Model-View-Controller) where Views and Controller are completely separated; this enables us to reuse Views, 哪些不一定需要“知道”数据来自哪里, 但它们只是等待控制器提供一些要显示的数据.

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

通过在整个开发过程中增加一定程度的复杂性, 对于初学者来说，Sage 9可能不是最好的选择, 因为您需要学习很多东西才能最终掌握它并能够在生产环境中使用:适当的依赖项和资产管理, code versioning, a new project structure, 一个来自Laravel的新模板引擎, DRY(不要重复自己)原则, and you’ll have to stick to strict coding standards which are a bit different from what WordPress recommends; but if you are a seasoned developer it can be a great head start .

如果你想和塞吉一起全身心投入, 请记住本·沃德的这条建议, Roots团队的一位开发人员:

Sage不是一个主题框架，它是一个入门主题. 你应该很少需要更新它，通常你不应该从它创建子主题. 作为一个入门主题，Sage是用来作为一个新项目的起点.

But also:

如果说“下划线”领先1000个小时，那么“Sage”则领先10000个小时.

文件和文件夹结构与Sage

Sage的文件和文件夹结构与我们在其他入门主题中看到的有点不同，比如 Underscores，甚至在Sage 8之前的主要版本中也是如此.

这就是你在安装Sage后会发现的:

├──app/ #它包含主题的所有PHP代码
│├──controllers/ # your controllers，它已经包含了一些
作为起点的例子
│   ├── admin.设置WordPress主题定制器
│   ├── filters.PHP #是一个很好的地方来分组你所有的主题 
││#过滤器挂钩
│   ├── helpers.PHP #用于您想要的各种辅助函数 
在您的主题中重用
│   └── setup.PHP #的主题设置文件
├──配置/ #主题配置文件
├──dist/ #所有已构建的主题资源，永远不要编辑这个!
├──resources/ #原创主题资源，编辑这个!
│├──assets/ #所有前端资产
││├──build/ # Webpack和ESLint配置
││├──fonts/ # theme fonts
││├──images/ # theme images
││├──scripts/ # theme JS脚本
││├──styles/ # theme SCSS stylesheet
│   │   └── config.编译资产的Json #设置
│├──views/ #所有主题刀片模板
││├──layouts/ # base刀片模板
││├──partials/ # partial Blade模板
│   ├── functions.php # Composer自动加载器和主题包括:
通常你不应该编辑这个，除非
你知道你在做什么
│   ├── index.php #是WordPress必需的，但留空
有意地，永远不要编辑这个!
│   ├── screenshot.在WordPress管理中使用的截图
│   └── style.css是WordPress所必需的，它应该包含
│#仅显示主题元信息
├──vendor/ # Composer包，不要编辑这个!
├── composer.Json #自动加载' app/ '文件
├── composer.# Composer锁定文件，永远不要编辑它
└── package.json        # Node.js dependencies and scripts

此外，代码编辑器和ide使用的一些其他文件，例如 .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml, etc.

下面是对Sage 9基本需求的快速概述:

• WordPress >= 4.7
• PHP >= 7.1.3 (with php-mbstring enabled)
• Composer
• Node.js >= 8.0.0
• Yarn

Bedrock

Bedrock就像打了兴奋剂的WordPress!

If Sage improves your theme development， Bedrock改进了整个WordPress安装. It does so by providing a modern project boilerplate, 具有改进的文件夹结构和安全性(例如，不将您的配置文件放在网站根目录下), configuration and ENV files, 以及适当的依赖管理(是的, 包括WordPress插件和主题).

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

File and Folder Structure

如果您查看基本的Bedrock安装，一开始可能会感到迷茫. Bedrock将web文件、配置文件和依赖文件分离到各自的文件夹中. 这是裸骨结构的样子:

├──config/ # WordPress配置文件
│├──environments/ #配置文件
环境，它们将覆盖
│││#生产配置
│   │   ├── development.php #覆盖WP_ENV === 'development'
│   │   └── staging.php #覆盖WP_ENV === 'staging'
│   └── application.用于生产的PHP #主配置
│# environment，它相当于 
│# the wp-config.php file
├──vendor/ # Composer包，不要编辑这个!
├──web/ # web服务器的新根目录
│├──app/ #你的新wp-content文件夹
│├──wp/ # WordPress核心文件，永远不要编辑这个!
│   ├── index.# WordPress视图引导器
│   └── wp-config.WordPress需要php #，不要编辑这个!
├── .Env #所有环境变量:db名称， 
│#用户和密码，盐，电流
│# environment、站点url和其他
├── composer.Json #在这里你可以管理
│# WordPress、插件等
│# dependencies
└── composer.# Composer锁定文件，永远不要编辑它

还有其他一些不太重要的文件.

Bedrock requirements are:

• PHP >= 7.1
• Composer

Trellis

Trellis is a modern LEMP stack to manage your development, 登台和生产服务器无缝衔接, 旨在使它们尽可能地彼此相似(“开发”) & production parity”). 这意味着如果您的自定义WordPress站点在您的开发环境中工作, 可以放心地假设它也可以在生产环境中工作，并且您可以放心地进行部署.

为了当地的发展，Trellis利用了Vagrant，使用了一个简单的 vagrant up 您将拥有一个运行在适当的现代环境中的虚拟机.

准备和部署到您的登台和生产环境是用Ansible剧本来管理的, 哪些是告诉Ansible要做什么的YAML文件.

格子建议的文件夹结构

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

├──trellis/ # trellis存储库的克隆
──site/ #基于bedrock的WordPress网站

我建议保持原样，但也可以根据自己的喜好和需要进行定制.

Trellis Requirements

• Composer
• Virtualbox >= 4.3.10
• Vagrant >= 2.1.0

Why You Should Use It

如果WordPress已经正常工作了, 为什么要切换到更复杂的堆栈并花费大量时间来掌握它呢? 因为有明显的优势，也有一些不太明显的优势. 让我们看看它们是什么.

框架不可知的入门主题

太多的WordPress初学者主题迫使你使用特定的CSS框架，你可能不喜欢，也可能不知道, 但Sage完全是框架不可知论者. During installation, 您可以选择自动包含Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS, 或者根本没有框架，如果你想从头开始或使用其他东西(提示:最近我开始喜欢顺风CSS很多).

PRO TIP: on a Windows machine, 在安装过程中，您可能会收到“Windows平台不支持TTY模式”的消息，并且您将无法选择框架或配置Sage. 如果你想利用自动配置，你必须在主题文件夹中手动运行这三个命令:

$ vendor\bin\sage meta #指定元数据 
                          #   theme (the name, etc., that goes 
                          #   in style.css).
$ vendor\bin\sage config #指定主题的开发URL和 
                          #   theme directory.
$ vendor\bin\sage预设#设置一个主题
                          是否支持框架 
                          #   framework at all.

A Modern Build Process

With Webpack, included in Sage, 您将不必再考虑编译资产, 连接和缩小JavaScript和CSS代码, optimizing images, 检查JavaScript和样式错误, 管理外部库. 构建过程将使用一个简单的 yarn build (or yarn build:production 如果你想让你的资产优化为生产使用)，在你的主题中生成所有的静态文件 /dist/ folder.

Modern PHP and Requirements

可以运行WordPress的最低PHP版本是PHP 5.2.4, 这将确保在遗留环境中运行网站的所有用户的向后兼容性, but old versions of PHP (<= 7.0)已经正式到达生命的终点, 因此，它们不再受支持，并且可能使您的站点暴露于安全漏洞和性能问题.

Sage和Bedrock都需要一个相同版本的PHP 7.1(虽然如果你可以选择7).3, please do so).

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

PHP社区中使用的标准), 和WordPress编码标准有一点不同, 但是它们可以让您拥有更干净、更易于维护的代码, 特别是当您在团队中工作或必须与其他人共享代码时.

更好的依赖和包管理

Roots堆栈大量使用Composer来管理所有依赖项和包, including WordPress core, plugins, and themes. 这可能是一个问题，如果你使用第三方工具来管理WordPress更新(如ManageWP), MainWP or InfiniteWP), 但是有人可能会争辩说，把所有的东西都置于版本控制之下可以给你更多的控制，并且在出现问题时更容易回滚到以前的工作版本.

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

Better Template Files

WordPress缺少一个真正的模板引擎, 所以Sage采用了Laravel的刀锋，它遵循DRY原则: Don’t Repeat Yourself.

这是什么默认的单.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模板引擎完全分离了视图和控制器，它的语法更加优雅, concise, readable, 而且比PHP标记更容易编写. 这里的经验法则是将所有PHP代码从模板文件中删除(或者至少尝试这样做)。.

使用Blade的另一个好处是模板继承:一个基本布局模板(默认是 /resources/views/layouts/app.blade.php)定义了包含常见网站元素的块, 然后由它的子模板继承. 模板继承可以很好地从单个模板中删除重复标记并保持DRY.

Browsersync

By running yarn start 您将启动一个Browsersync会话. Browsersync是一个用于在开发过程中同步浏览器测试的模块. 它将监视对前端资产所做的更改, working together with Webpack, 它会自动将更改注入浏览器会话.

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

Trellis提供零停机WordPress部署. When you launch a deploy, Trellis将git克隆您的存储库, 运行composer install，然后将符号链接更新到当前版本，这样它就不会直接编辑当前在生产环境中提供的文件.

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

Drawbacks

使用完整的根堆栈的唯一缺点(除了学习新东西之外), 这根本不应该被认为是一个问题)，你必须使用像Kinsta这样的网格友好型托管提供商, DigitalOcean水滴或任何其他至少支持SSH的主机, Composer and WP-CLI, 以及更新web根路径的选项.

这让大多数廉价的共享主机退出游戏，这是你和/或你的客户在开始新项目之前必须考虑的事情.

How to Get Started

这可以被认为是著名的“WordPress 5分钟安装”的新版本，但适用于现代前端开发人员. 它为以后的开发增加了一定程度的复杂性, but in the end, 你能得到的好处绝对是值得的.

我们将专注于采用全栈(Sage), Bedrock, and Trellis), 但你可以使用其中一个或它们的任意组合. Sage can be used as a starting point for a stand-alone theme on any WordPress installation; Bedrock can be used with any WordPress theme you’d like; and Trellis deploys are configured for Bedrock-based sites and take care of everything needed, but with a bit of tinkering, 它可以定制几乎任何需要.

How to Create a New Project

用Trellis创建一个新的WordPress项目, Bedrock, and Sage is quite easy, just a few command lines away.

在你想要的文件夹中安装Trellis.g. example.com):

$ mkdir example.com && cd example.com
$ git clone——depth=1 git@github.com:roots/trellis.git 
$ rm -rf trellis/.git

Install Bedrock in the /site/ subfolder:

$ composer创建项目根/基岩站点 
$ cd site/web/app/themes/

Install and build Sage:

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

Deploying

如果您已经根据官方文档正确配置了所有内容，那么部署到登台或生产环境就更容易了. 只需一个命令行(从 example.com/trellis/ folder):

$ ansible-playbook deploy.yml -e "site= env="

你也可以很容易地回滚你的部署，只需运行:

$ ansible-playbook rollback.yml -e "site= env=

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

如果你谷歌一下如何安装和使用根堆栈, especially Trellis, 你会发现很多关于Linux或MacOS的教程, 但是关于Windows的信息很少，你会发现两个主要问题:Ansible不能用于Windows, 而Vagrant在Windows电脑上运行通常非常慢.

当我最初想到这篇文章时，Windows的官方Trellis文档建议在Vagrant虚拟机中运行Ansible, 但这是一种拙劣的方法，而且不太可靠.

从那时起，他们更新了文档，提供了关于如何使用WSL (Linux的Windows子系统)设置一切的适当说明。, 所以没有必要重新发明轮子并编写教程. 很高兴知道，在安装Trellis之前，有三页的详细分步说明可以遵循: Windows Setup, Windows Setup: Sage and Windows Setup: Trellis.

Happy coding!