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

本文概述

• 你可以采用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 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部分(后端)