具有Roots Stack的现代WordPress开发工作流 _Web开发

本文概述

你可以采用WordPress的现代开发工作流程吗？
Roots Stack到底是什么
Roots Sage9
Bedrock
Trellis
为什么要使用它
缺点
如何开始
关于在Windows上设置开发环境的提示

WordPress已经存在了很多年, 至少在互联网标准方面, 它的哲学一直是保持向后兼容。鉴于当今在线的WordPress网站数量众多, 因此对兼容性的理解是可以理解的。但是, 虽然这可以帮助仍然使用旧版PHP和MySQL版本的旧环境的用户(这本身就有安全风险, 但这不是今天的文章主题), 但是这也导致较新的WordPress版本无法充分利用最新的PHP功能。
这也导致许多WordPress开发人员生活在WordPress泡沫中, 没有被激励去学习新的和现代的前端开发技术, 有时甚至被困在做事的” 好方法” 中。
你可以采用WordPress的现代开发工作流程吗？你当然可以, 并且WordPress Roots栈可以通过三个出色的工具帮助你像2019年一样发展：

Sage作为你的入门主题,
Bedrock作为现代WordPress样板,
Trellis用于管理对不同环境的部署和配置。

Roots团队还开发了另外两个工具：Acorn(一个插件构建框架)和Clover(一个插件样板)。由于两者均处于alpha状态, 因此本文中未包含它们, 但是你一定要注意它们。
许多顶级品牌在其网站上使用Sage和/或Bedrock。在” 根展柜” 中找到它们。
Roots Stack到底是什么最初被称为Roots主题, 它是坚如磐石的HTML5入门主题, 旨在为新的WordPress网站提供更清洁的起点。随着时间的流逝, 它演变成一整套工具, 通过了所有主要的现代Web技术和标准(从Grunt到Gulp和Webpack, LESS和SCSS, NPM和Yarn, Bootstrap, PSR-2编码标准和DRY原理), 因此, 迫使采用它的WordPress开发人员必须不断学习并紧跟现代前端开发技术所提供的最新信息。
如今, Roots逐渐成长为一整套工具, 旨在通过跟踪从开发到分阶段到生产的整个周期, 帮助你构建更好的WordPress网站, 并通过迫使你摆脱困境来使你成为更好的开发人员区域由所谓的WordPress泡沫提供。
但是, 让我们看一下它们提供的三种主要工具, 它们的用途以及为什么要考虑使用它们。
Roots Sage9

文章图片
【具有Roots Stack的现代WordPress开发工作流】Roots Sage 9是专业维护的WordPress入门主题的最后一次迭代, 最初于2011年作为Roots发布。在其生命中, 它经历了许多更改, 改进和对最佳实践的重新考虑, 最终成为了今天是介绍WordPress开发的现代前端开发工作流程的一个很好的起点。
Sage试图做的是采用MVC模式(模型-视图-控制器), 其中视图和控制器是完全分离的。这样一来, 我们就可以重用视图, 视图不一定需要” 知道” 数据的来源, 而只是等待控制器将其输入以供显示。
Sage 9附带的控制器不是你在Laravel等其他框架中可能已经熟悉的实际控制器, 主要区别在于Sage 9 Controller使用基于模板的路由而不是基于URL的路由。基本上, 你可以让WordPress处理URL路由, 并为模板文件编写控制器。
通过在整个开发过程中增加一定程度的复杂性, Sage 9可能不是初学者的最佳选择, 因为你将学到很多知识以最终掌握它并可以在生产中使用：适当依赖关系和资产管理, 代码版本控制, 新的项目结构, 从Laravel派生的新模板引擎, DRY(不要重复自己)原理, 并且你必须遵守严格的编码标准, 这与标准有所不同WordPress推荐；但是如果你是一个经验丰富的开发者, 那将是一个很好的开端。
如果你想全心投入Sage, 请记住Roots团队的开发者之一Ben Word的以下建议：

Sage不是主题框架, 而是入门主题。你几乎不需要更新它, 并且通常不应该从中创建子主题。作为入门主题, Sage旨在用作新项目的起点。

但是也：

如果Underscores是1, 000小时的领先时间, Sage是10, 000小时的领先时间。

带有Sage的文件和文件夹结构
Sage的文件和文件夹结构与我们在其他入门主题(例如Underscores)甚至在以前的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
纱

Bedrock

文章图片
Bedrock就像类固醇上的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

加上一些其他不太重要的文件。
Bedrock要求是：

PHP> = 7.1
作曲家

Trellis

文章图片
Trellis是现代的LEMP栈, 用于无缝管理你的开发, 登台和生产服务器, 旨在使它们尽可能彼此相似(“ 开发和生产平价” )。这意味着, 如果你的自定义WordPress网站可以在你的开发环境中使用, 可以肯定地认为它也可以在生产环境中使用, 并且可以放心地进行部署。
对于本地开发, Trellis使用了Vagrant, 只需简单的流浪汉, 你就可以拥有运行适当的现代环境的虚拟机。
使用Ansible剧本管理向暂存和生产环境的供应和部署, Ansible剧本是可以告诉Ansible怎么做的YAML文件。
Trellis建议的文件夹结构
Trellis建议的文件夹结构仅由两个子文件夹组成：

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

我建议保留原样, 但可以根据你的喜好和需求对其进行自定义。
Trellis要求

作曲家
虚拟箱> = 4.3.10
无业游民> = 2.1.0

为什么要使用它如果WordPress已经按原样工作, 为什么还要切换到更复杂的栈并花大量时间来掌握它呢？因为有明显的优势, 而有些则不那么明显。让我们尝试看看它们是什么。
框架不可知的入门主题
太多的WordPress入门主题会迫使你使用一个特定的CSS框架, 你可能会或可能不会喜欢甚至不知道, 但是Sage完全与框架无关。在安装过程中, 如果你要从头开始或使用其他功能, 则可以选择自动包含Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS, 或者根本不包含任何框架(提示：最近我开始喜欢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和样式错误以及管理外部库。构建过程将通过简单的纱线构建(或如果你要优化资产以供生产使用优化的纱线构建：生产)来处理所有工作, 并在主题/ 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克隆你的存储库, 运行composer install, 然后将符号链接更新为当前版本, 因此它将永远不会直接编辑生产中当前提供的文件。
当使用Bedrock时, Trellis也只需要很少的配置。
缺点使用完整的Roots栈的唯一缺点(除了学习新知识外, 根本不应该认为是一个问题)是, 你必须使用像Trestas一样友好的托管服务提供商, 例如Kinsta, DigitalOcean Droplet或任何其他至少支持SSH, Composer和WP-CLI, 以及用于更新Web根路径的选项。
这样一来, 大多数廉价的(ish)共享托管都将留在游戏中, 这是你和/或你的客户在开始新项目之前必须考虑的事项。
如何开始这可以看作是著名的” WordPress 5分钟安装” 的新尝试, 但对于现代前端开发人员而言。它为以后的开发增加了一定程度的复杂性, 但是最后, 你可以肯定获得的好处是值得的。
我们将重点介绍采用完整的栈(Sage, Bedrock和Trellis), 但是你可以仅使用其中的一个或任意组合。 Sage可以用作任何WordPress安装上独立主题的起点；Bedrock可以与你想要的任何WordPress主题一起使用；和Trellis部署针对基于Bedrock的站点进行了配置, 并照顾了所有需要的内容, 但是稍作修改, 就可以针对几乎任何需求进行定制。
如何创建一个新项目
使用Trellis, Bedrock和Sage设置新的WordPress项目非常容易, 仅需几个命令行即可。
在所需的文件夹(例如example.com)中安装Trellis：

$ 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上设置开发环境的提示如果你搜索有关如何安装和使用Roots栈的信息, 尤其是Trellis, 你会发现很多针对Linux或MacOS的教程, 但对于Windows却没有什么可用的信息, 你会发现两个主要问题：Ansible不可用对于Windows, Vagrant在Windows计算机上通常非常慢。
当我最初想到这篇文章时, 用于Windows的官方Trellis文档建议在Vagrant虚拟机中运行Ansible, 但这是一种不可靠的处理方式, 并且不是很可靠。
从那时起, 他们就使用WSL(适用于Linux的Windows子系统)进行所有设置的正确说明对文档进行了更新, 因此无需重新设计轮子并编写有关它的教程。很高兴知道, 在安装Trellis之前, 你可以按照以下三页的详细分步说明进行操作：Windows安装程序, Windows安装程序：Sage和Windows安装程序：Trellis。
编码愉快！
相关：如何进行现代WordPress开发(第1部分, 前端)和第2部分(后端)