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

这也造成了许多 WordPress的开发者 住在…… WordPress泡沫, 没有动力去学习新的现代前端开发技术, 有时会陷入做事的“旧方式”.

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

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

• 圣人 作为你的起始主题，
• 基石 作为一个现代WordPress样板，
• 格子 管理不同环境的部署和供应.

Roots团队还在开发另外两个工具: 橡子一个插件构建框架，以及 三叶草，一个插件样板. 因为它们都是α, 它们不包括在本文中, 但你一定要留意他们.

到底什么是根栈

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

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

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

根鼠尾草

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

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

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

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

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

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

但也:

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

文件和文件夹结构与圣人

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

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

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

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

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

• WordPress >= 4.7
• PHP >= 7.1.3(启用php-mbstring)
• 作曲家
• 节点.js >= 8.0.0
• 纱

基石

基石就像打了兴奋剂的WordPress!

如果圣人能改善你的 主题的发展， 基石改进了整个WordPress安装. 它通过提供 现代项目样板, 具有改进的文件夹结构和安全性(例如，不将您的配置文件放在网站根目录下), 配置和ENV文件, 以及适当的依赖管理(是的, 包括WordPress插件和主题).

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

文件和文件夹结构

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

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

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

基岩要求是:

• PHP >= 7.1
• 作曲家

格子

格子是一个 现代LEMP堆叠 管理你的发展, 登台和生产服务器无缝衔接, 旨在使它们尽可能地彼此相似(“开发”) & 生产平价”). 这意味着如果您的自定义WordPress站点在您的开发环境中工作, 可以放心地假设它也可以在生产环境中工作，并且您可以放心地进行部署.

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

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

格子建议的文件夹结构

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

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

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

格子的需求

• 作曲家
• Virtualbox >= 4.3.10
• Vagrant >= 2.1.0

为什么要使用它

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

框架不可知的入门主题

太多的WordPress初学者主题迫使你使用特定的CSS框架，你可能不喜欢，也可能不知道, 但圣人完全是框架不可知论者. 在安装期间, 您可以选择自动包含引导 4, 布尔玛, 基金会, 速子, 顺风CSS, 或者根本没有框架，如果你想从头开始或使用其他东西(提示:最近我开始喜欢顺风CSS很多).

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

$ vendor\bin\sage meta #指定元数据 
                          # theme(名称等.就是这样 
                          #时尚.css).
$ vendor\bin\sage config #指定主题的开发URL和 
                          # theme目录.
$ vendor\bin\sage预设#设置一个主题
                          是否支持框架 
                          #框架.

现代构建过程

与Webpack, 包含在圣人中, 您将不必再考虑编译资产, 连接和缩小JavaScript和CSS代码, 优化图片, 检查JavaScript和样式错误, 管理外部库. 构建过程将使用一个简单的 纱构建 (or 纱构建:生产 如果你想让你的资产优化为生产使用)，在你的主题中生成所有的静态文件 / dist / 文件夹.

现代PHP和需求

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

圣人和基石都需要一个相同版本的PHP 7.1(虽然如果你可以选择7).3、请这样做).

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

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

更好的依赖和包管理

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

另外, 圣人使用纱作为应用程序代码的包和依赖管理器，并启动构建过程.

更好的模板文件

WordPress缺少一个真正的模板引擎, 所以圣人采用了Laravel的刀锋，它遵循DRY原则: 不要重复自己.

这是什么默认的单.叶片.PHP模板文件看起来像，只有6行代码:

@extend(“布局.应用程序”)
@section(“内容”)
    @while(have_posts()) @php the_post() @endphp
        @include(“泛音.content-single - '.get_post_type ())
    @endwhile
@endsection

Blade模板引擎完全分离了视图和控制器，它的语法更加优雅, 简洁的, 可读的, 而且比PHP标记更容易编写. 这里的经验法则是将所有PHP代码从模板文件中删除(或者至少尝试这样做)。.

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

Browsersync

通过运行 纱线开始 您将启动一个Browsersync会话. Browsersync是一个用于在开发过程中同步浏览器测试的模块. 它将监视对前端资产所做的更改, 与Webpack一起工作, 它会自动将更改注入浏览器会话.

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

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

当使用基石时，格子也需要很少的配置.

缺点

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

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

如何开始

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

我们将专注于采用全栈(圣人), 基石, 和格子), 但你可以使用其中一个或它们的任意组合. 圣人 can be used as a starting point for a st和-alone theme on any WordPress installation; 基石 can be used with any WordPress theme you’d like; 和 格子 deploys are configured for 基石-based sites 和 take care of everything needed, 但稍加修补, 它可以定制几乎任何需要.

如何创建一个新项目

用格子创建一个新的WordPress项目, 基石, 圣人很简单, 只需几个命令行.

在你想要的文件夹中安装格子.g. 例子.com):

$ mkdir示例.com && cd的例子.com
$ git clone——depth=1 git@github.com:根/格子.git 
$ rm -rf trellis/.git

安装基岩 /网站/ 子文件夹:

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

安装和构建圣人:

$ composer create-project roots/sage your-theme-name 
$ CD your-theme-name/
美元的纱 && 纱构建

部署

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

$ ansible-playbook部署.yml -e "site= env="

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

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

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

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

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

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

快乐的编码!