作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Stefano是意大利的一名网络开发人员, 有很强的HTML背景, CSS, JavaScript, 和PHP. 他的专业是WordPress.
以前在
WordPress已经存在很长时间了, 至少从互联网的标准来看是这样, 它的理念一直是保持向后兼容性. 考虑到今天在线的WordPress网站的数量,这种对兼容性的关注是可以理解的. 然而, 虽然这可以帮助那些仍然使用旧PHP和MySQL版本的遗留环境的人(这本身就是一个安全风险), 但这不是今天文章的主题。), 它还导致较新的WordPress版本不能充分利用最新的PHP功能.
这也造成了许多 WordPress的开发者 住在…… WordPress泡沫, 没有动力去学习新的现代前端开发技术, 有时会陷入做事的“旧方式”.
你当然可以,而且 WordPress根栈 在这里帮助你像2019年一样发展,有三个神奇的工具:
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!
如果圣人能改善你的 主题的发展, 基石改进了整个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
└──作曲家.# 作曲家锁定文件,永远不要编辑它
还有其他一些不太重要的文件.
基岩要求是:
格子是一个 现代LEMP堆叠 管理你的发展, 登台和生产服务器无缝衔接, 旨在使它们尽可能地彼此相似(“开发”) & 生产平价”). 这意味着如果您的自定义WordPress站点在您的开发环境中工作, 可以放心地假设它也可以在生产环境中工作,并且您可以放心地进行部署.
为了当地的发展,格子利用了Vagrant,使用了一个简单的 流浪汉了
您将拥有一个运行在适当的现代环境中的虚拟机.
准备和部署到您的登台和生产环境是用Ansible剧本来管理的, 哪些是告诉Ansible要做什么的YAML文件.
格子有一个建议的文件夹结构,由两个子文件夹组成:
├──trellis/ # trellis存储库的克隆
──site/ #基于bedrock的WordPress网站
我建议保持原样,但也可以根据自己的喜好和需要进行定制.
如果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 /
文件夹.
可以运行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是一个用于在开发过程中同步浏览器测试的模块. 它将监视对前端资产所做的更改, 与Webpack一起工作, 它会自动将更改注入浏览器会话.
格子提供零停机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=
如果你谷歌一下如何安装和使用根堆栈, 尤其是格子, 你会发现很多关于Linux或MacOS的教程, 但是关于Windows的信息很少,你会发现两个主要问题:Ansible不能用于Windows, 而Vagrant在Windows电脑上运行通常非常慢.
当我最初想到这篇文章时,Windows的官方格子文档建议在Vagrant虚拟机中运行Ansible, 但这是一种拙劣的方法,而且不太可靠.
从那时起,他们更新了文档,提供了关于如何使用WSL (Linux的Windows子系统)设置一切的适当说明。, 所以没有必要重新发明轮子并编写教程. 很高兴知道,在安装格子之前,有三页的详细分步说明可以遵循: Windows安装程序, Windows设置:圣人 和 Windows设置:格子.
快乐的编码!
Roots堆栈是一组工具,旨在帮助开发人员通过采用现代技术并遵循从开发到阶段和生产的整个周期来构建更好的WordPress站点.
使用格子创建WordPress开发环境就像在终端窗口输入几个命令一样简单. 格子, 在流浪者的帮助下, 将负责为您在虚拟机中设置适当的LEMP堆栈. 如果您使用的是Windows操作系统,则可能需要执行一些额外的步骤.
全栈WordPress开发人员必须能够设置和管理LAMP/LEMP服务器基础设施,并在前端工作, 创建主题, 后端, 以插件的形式编写新功能. 他/她必须对PHP, SQL, JavaScript, HTML和CSS有很好的理解.
Novara,意大利Novara省
2018年9月14日成为会员
Stefano是意大利的一名网络开发人员, 有很强的HTML背景, CSS, JavaScript, 和PHP. 他的专业是WordPress.
以前在
世界级的文章,每周发一次.
世界级的文章,每周发一次.