作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Andrey是一名全栈web开发人员和WordPress专家. 最近,他专注于无服务器计算和JAMstack.
WordPress代码库是一团糟,这已经不是什么秘密了. 就我个人而言,每次我经历这些的时候,我只想蜷缩起来哭一场. 另一方面,WordPress遥遥领先于竞争对手. 一个易于使用且功能强大的CMS是一项艰巨的任务, WordPress仍然很受欢迎,因为它提供了这些.
所以我们为什么要关心WordPress核心代码的质量呢? 它起作用了,对吧??
Yes, it works, 而且这个有15年历史的代码库不太可能被它的志愿者维护者完全重构. 不幸的是, 这意味着它也可以作为“WordPress方式”编码的一个例子,,为许多不遵循最佳实践和现代开发技术的开发人员提供借口. 很多WordPress插件和主题都有臭名昭著的糟糕代码, 盲目地遵循传统做法只会延续这一趋势.
但是谁会在意那些仍然能正常工作的糟糕代码呢? 没有什么是免费的,有人会为做得不好的工作买单. 幸运的是,对于WordPress代码库本身,它的维护者是用他们的时间来支付的. 但是对于你自己的代码,付钱的是你的客户.
For any even moderately 复杂的系统, 与维护成本相比,初始开发的成本是微不足道的, 维护还意味着添加新的功能. 雇佣一名开发人员来修复设计和实现不佳的软件,比从一开始就正确开发软件的成本要高好几倍.
从长远来看,廉价的解决方案往往是最昂贵的. 或者在超出预算后被放弃. 当我们遵循经过验证的软件设计原则和实践时,我们实际上为客户节省了资金. 这些方法不是炒作,也不是为了改变而改变. 这里的智慧来自开发者的集体经验,遵循它确实是值得的.
Obviously, 这并不适用于真正简单的任务,比如添加几行CSS或一些自定义帖子和重写. 但是把几个插件(或者更常见的是几十个插件)拼凑在一起,或者制作一个Visual composer驱动的网站,这些都不是软件工程, anyway.
这不是坏事, per se-事实上,有些解决方案就是这么简单 WordPress is so popular. 但在这个系列中,我将讨论 real WordPress开发:编写重要的PHP, HTML, CSS和JavaScript代码. 我将从一般的工作流程开始,然后专注于 WordPress前端开发 在本文中.
一般来说,高质量的代码是:
其主要结果是更低的开发和拥有成本,还有许多附带的好处,我不会在这里详述.
Instead, 我将重点介绍哪些开发技术和最佳实践可以帮助您生成高质量的代码. 让我们从版本控制开始.
This means using Git. 可悲的是,通过FTP在生产中进行“牛仔编码”仍然是一件大事. 就在最近,我为一家英国机构工作,他们的代码库中有这样的文件名:
复制功能.php
函数拷贝2.php
功能测试.php
functions2.php
功能test2.php
在创建WordPress站点时,你应该做的第一件事就是将其置于版本控制之下. 防水层服务器 是对WordPress开发错误的有趣回顾. 使用Git可以很容易地修改这些错误(以及可能发生在每个人身上的类似错误).
你的代码出错了,整个网站都瘫痪了? git reset
把一切都恢复原样. 新版本更新破坏了一切? git reset
就像时间机器一样. 不知从哪里冒出来一些恶意代码? git status
显示任何新文件、删除的文件或对任何跟踪文件的更改. Then you just git checkout
修复原件.
.git
Folder好的,使用Git显然很重要. 但当你这样做的时候,同样重要的是要避免 将您的Git存储库暴露给黑客. 问题就来了 .git
公开文件夹,并将您的凭据存储在其中.
标准的WordPress安装完全存在于公共web文件夹中,并且 .git
文件夹也很可能在那里. Obviously, Git存储库中不应该存储任何登录凭据, 但碰巧的是,大多数存储库确实包含一些不应该泄露到外部的敏感信息.
所以公众可以进入 .git
文件夹应该被阻塞. 如果您使用的是Apache,请将下面的代码片段添加到 .htaccess
文件将阻止对 .git
文件夹和日志文件. 日志文件通常包含敏感信息,因此将它们设置为不可用也是明智的. 对于不同的web服务器设置,请询问您的 DevOps expert for help.
重定向匹配404 /\.git
重定向匹配404 ^.*\.log
不要在实时站点上进行开发——这会导致停机和客户不满意. 好的,但是你应该如何设置呢?
Ideally, 应该有三种开发环境, 代码总是沿着一个方向前进:本地→登台→生产. 这是一种经过验证的避免碰撞的方法. All core, plugin, 主题更新首先在本地完成, 然后进行分期测试, 最后部署到生产环境中.
例如,特定于服务器的配置可以存储在单独的文件中. 你可以创建一个 wp-config-local.php
对于每个本地和登台环境. (别忘了把它加到你的 .gitignore
file!),然后将以下代码片段添加到 wp-config.php
:
如果(file_exists(目录名(__FILE__) . ' / wp-config-local.php')) :
//使用本地设置
require_once(目录名(__FILE__) . ' / wp-config-local.php');
else :
//生产设置
endif;
通常设置不同环境的最佳方法是使用环境变量. 如果您不熟悉这个概念,我建议使用 像Roots这样的现代解决方案.
WordPress命令行界面(WP-CLI)是管理WordPress安装的一个非常有用的工具. 访问WP-CLI意味着能够运行几乎任何WordPress API功能. 例如,您可以使用WP-CLI添加、删除和编辑用户及其密码. 如果您刚刚继承了一个站点,并且所有者将自己锁在外面,则非常有用.
另一个例子是使用WP-CLI进行初始部署非常简单. 这些可以用几个命令完成:
此外,这些操作可以脚本化和自动化.
说到自动化,一些部署技术和流程是值得学习的,比如:
Granted, 从不使用版本控制到使用Docker是一个巨大的飞跃,对于一个典型的单人WordPress项目来说可能是压倒性的. 根据您的主机提供商,有些选项甚至可能不可行. 但是对于团队和大型项目来说,高级部署是必须具备的.
然而,对于任何规模的项目,linting对大多数开发人员来说都是一个福音. Linting意味着自动检查代码中的错误. A fully-featured IDE such as PHPStorm already does that out of the box; however, 像VSCode或Sublime Text这样简单的编辑器需要一个叫做linter的专用程序. 设置此功能的一种方法是将编辑器配置为在保存文件时运行筛选器.
PHP_CodeSniffer实际上是PHP的过滤器. 除了检查语法错误之外, 它还可以检查您的代码是否遵循PSR-2之类的样式指南. 这极大地简化了后面的编码标准.
对于JavaScript, ESLint 是流行的衬里吗. 它有一个广泛的规则集,并支持所有JavaScript风格和框架的自定义配置.
这里的一个强大用例是将检测合并到CI/CD构建管道中,以便在部署之前自动验证所有代码.
现在为整个WordPress项目设置了一个适当的工作流, 让我们深入了解前端的最佳实践.
前端开发世界是不断变化的,总是在变化. 我们一度认为Sass是编写css的最佳工具,也是古腾堡时代之前WordPress开发的最佳工具, 它现在仍然是,但后来每个人都开始谈论CSS-in-JS和样式组件.
甚至WordPress也无法抗拒并选择了一些新技术. 新的块编辑器Gutenberg是基于React和REST API构建的.
你一定要跟上这些核心前端技术的速度:
ES6和Sass是现代的JavaScript和CSS, respectively, Webpack是一个允许使用所有这些现代功能而不用担心向后兼容性的工具. Webpack可以被称为前端应用编译器,它生成供浏览器使用的文件.
WordPress核心和几乎所有WordPress插件都依赖于jQuery, 所以你不能停止使用它. 实际上,停止使用它来完成一些简单的任务是没有意义的,比如隐藏几个 复杂的应用程序是jQuery挣扎的地方:难以遵循的逻辑; 回调地狱,全局变量,没有HTML模板. 这显然需要一种不同的方式来组织前端应用程序. 像React这样的现代前端库使用面向对象编程(OOP)原则,并将前端应用程序架构组织成模块化, 可重用组件. 组件包含所有的代码, markup, 以及特定元素的“组件状态”(变量). 元素几乎可以是任何东西:按钮, input field, user form, 或者一个显示WordPress REST API后端的最新帖子的小部件. 组件可以包含其他组件,形成层次关系. 随着当今网页的复杂性, 将应用程序组织成组件是一种经过验证的构建可维护性的方法, 任何复杂的快速web应用程序. 组件是高度可重用的, isolated, 因此易于测试的“砖块”,所以学习这个概念是值得的. 目前有两个基于组件的库很流行:Vue.js and React. React将是一个明显的选择,因为它已经被古腾堡使用. 然而,对于刚接触现代JavaScript的人来说,Vue.从j开始可能会更好. React通过使用ES6的特性将你推向了深渊, classes, 专有的JSX语法, 和Webpack构建管道直接. 学习曲线相当陡峭. Vue.另一方面,Js对初学者更友好 只需要放入一个 在工作了几个Vue之后.js项目,你会更好地准备深入了解React. 并不是说它总是需要的,但古腾堡的发展,例如,确实需要它. WordPress的REST API只是一个标准化的接口,用于从WordPress远程请求和修改数据. 这更像是一个软件架构问题,而不是一种完全不同的编码方式. 同样的旧jQuery AJAX片段可以使用稍微不同的参数. 最重要的好处? Since WordPress REST API 标准化后端和前端之间的通信, 这是迈向模块化的重要一步, reusability, 以及代码的可读性. 那些把HTML和PHP混在一起,再加上一些SQL的糟糕模板必须去掉. 一旦模板只是HTML与占位符的数据作为参数传递, 在PHP中传递数据或通过REST API传递数据到前端应用程序之间没有主要区别. 你可能还想看看 WPGraphQL. 它可能最终取代WordPress REST API,也可能不会,但它正在迅速获得牵引力. 古腾堡的最终目标是全网站定制, 在其他计划中. 这为WordPress Core的新模式奠定了基础,最终将影响整个平台的发布体验. 古登堡确实受到了WordPress开发者的强烈反对. 一些反对的观点 将其合并到WordPress核心中 were: However, 适合使用WordPress作为博客平台的内容作者, 古腾堡显然比旧的编辑器提供了更好的体验. 只要有需要,就会支持禁用古腾堡,是的. 但现在慢慢进入是一个明智的主意:当一个客户找到你,要求做古腾堡开发, 你会准备好. 反对在WordPress开发中使用上述所有工具和技术的最常见的论点是:“WordPress方式”仍然有效, 这种方式应该比所有这些闪亮的新东西要好. 但是你现在已经看到WordPress核心开发人员非常了解所有最新的发展. 不仅如此, 由于它们明显的优势,它们尽可能多地在较新的核心部分中使用它们. 唯一阻碍我们的是没有人要重构的遗留代码. For some time, WordPress和WooCommerce一直在遵循开发实现和使用新技术的“功能插件”的做法. 当时机成熟时,这些插件会被合并到核心中,就像古腾堡所做的那样. WooCommerce也有自己的公司 React project. WordPress REST API也是作为一个独立的插件开始的,现在是WordPress核心的一部分. 问题不是 whether 我们应该学习新东西并在日常工作中使用,但是 how. 答案是“循序渐进”,一步一步来. 要么学习新事物,要么用一种新的、不同的方式做你熟悉的事情. 例如,学习如何在所有旧脚本中使用Webpack. Webpack可以将新的ES6+代码转换为与旧浏览器兼容的“纯”JavaScript. 它还可以缩小脚本并将它们捆绑在一起. 这是一个新事物. Done? 然后利用ES6的特性重写JavaScript. 这是一种做你熟悉的事情的新方法. 结果是:你将学习Webpack和ES6. 作为专业人士,我们应该向前迈进,而不是后退. 不断学习. 当你这样做时分享:Toptal维护 WordPress开发最佳实践列表 并欢迎社区对其作出贡献. 在本系列的第2部分中,我们将深入探讨 现代WordPress后端开发的PHP部分. tag. Vue.js使用纯JavaScript (ES5)、HTML和CSS. 对新概念的介绍要渐进得多.
使用WordPress REST API
学习古腾堡(客户很快就会需要它)
是时候加快速度了:即使是“WordPress方式”也在不断发展
WordPress是一个功能齐全的发布和内容管理系统(CMS)。, 因此,它同时具有前端和后端.
WordPress是使用PHP等网络技术的最流行的内容管理系统, JavaScript, CSS, and HTML.
WordPress开发人员实现插件和主题,扩展现有功能并引入新特性. 不同的编程技能是必需的,因为同一个开发人员经常同时负责后端和前端.
WordPress是互联网上最流行的CMS. 它是非常初学者友好和易于使用. 它的功能可以使用插件和主题进行扩展. Many plugins are free, others are reasonably priced; thus the TCO for WordPress sites is low.
Yes, you can; however, 它需要从WordPress单独设置,它不会是WordPress本身. WordPress本身只在后端运行PHP.
PHP是一种非常适合web开发的编程语言. 运行服务器端的WordPress代码是使用PHP编写的.
Andrey是一名全栈web开发人员和WordPress专家. 最近,他专注于无服务器计算和JAMstack.
12
世界级的文章,每周发一次.
世界级的文章,每周发一次.