作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Stefano是意大利的一名网络开发人员, 有很强的HTML背景, CSS, JavaScript, and PHP. His specialty is WordPress.
WordPress已经存在很长时间了, 至少从互联网的标准来看是这样, 它的理念一直是保持向后兼容性. 考虑到今天在线的WordPress网站的数量,这种对兼容性的关注是可以理解的. However, 虽然这可以帮助那些仍然使用旧PHP和MySQL版本的遗留环境的人(这本身就是一个安全风险), 但这不是今天文章的主题。), 它还导致较新的WordPress版本不能充分利用最新的PHP功能.
This has also caused many WordPress developers to live in a WordPress bubble, 没有动力去学习新的现代前端开发技术, 有时会陷入做事的“旧方式”.
你当然可以,而且 WordPress Roots stack 在这里帮助你像2019年一样发展,有三个神奇的工具:
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, 以及为什么你应该考虑使用它们.
根圣人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的文件和文件夹结构与我们在其他入门主题中看到的有点不同,比如 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基本需求的快速概述:
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项目,它可以自动安装核心文件和所需的插件.
如果您查看基本的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:
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网站
我建议保持原样,但也可以根据自己的喜好和需要进行定制.
如果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.
With Webpack, included in Sage, 您将不必再考虑编译资产, 连接和缩小JavaScript和CSS代码, optimizing images, 检查JavaScript和样式错误, 管理外部库. 构建过程将使用一个简单的 yarn build
(or yarn build:production
如果你想让你的资产优化为生产使用),在你的主题中生成所有的静态文件 /dist/
folder.
可以运行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作为应用程序代码的包和依赖管理器,并启动构建过程.
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.
By running yarn start
您将启动一个Browsersync会话. Browsersync是一个用于在开发过程中同步浏览器测试的模块. 它将监视对前端资产所做的更改, working together with Webpack, 它会自动将更改注入浏览器会话.
Trellis提供零停机WordPress部署. When you launch a deploy, Trellis将git克隆您的存储库, 运行composer install,然后将符号链接更新到当前版本,这样它就不会直接编辑当前在生产环境中提供的文件.
当使用Bedrock时,Trellis也需要很少的配置.
使用完整的根堆栈的唯一缺点(除了学习新东西之外), 这根本不应该被认为是一个问题),你必须使用像Kinsta这样的网格友好型托管提供商, DigitalOcean水滴或任何其他至少支持SSH的主机, Composer and WP-CLI, 以及更新web根路径的选项.
这让大多数廉价的共享主机退出游戏,这是你和/或你的客户在开始新项目之前必须考虑的事情.
这可以被认为是著名的“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, 它可以定制几乎任何需要.
用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
如果您已经根据官方文档正确配置了所有内容,那么部署到登台或生产环境就更容易了. 只需一个命令行(从 example.com/trellis/
folder):
$ ansible-playbook deploy.yml -e "site= env="
你也可以很容易地回滚你的部署,只需运行:
$ ansible-playbook rollback.yml -e "site= env=
如果你谷歌一下如何安装和使用根堆栈, 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!
Roots堆栈是一组工具,旨在帮助开发人员通过采用现代技术并遵循从开发到阶段和生产的整个周期来构建更好的WordPress站点.
使用Trellis创建WordPress开发环境就像在终端窗口输入几个命令一样简单. Trellis, with the help of Vagrant, 将负责为您在虚拟机中设置适当的LEMP堆栈. 如果您使用的是Windows操作系统,则可能需要执行一些额外的步骤.
全栈WordPress开发人员必须能够设置和管理LAMP/LEMP服务器基础设施,并在前端工作, creating a theme, and the back-end, 以插件的形式编写新功能. 他/她必须对PHP, SQL, JavaScript, HTML和CSS有很好的理解.
Located in Novara,意大利Novara省
Member since September 14, 2018
Stefano是意大利的一名网络开发人员, 有很强的HTML背景, CSS, JavaScript, and PHP. His specialty is WordPress.
世界级的文章,每周发一次.
世界级的文章,每周发一次.
Join the Toptal® community.