作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
安德烈·沙拉索夫的头像

安德烈Shalashov

Andrey是一名全栈web开发人员和WordPress专家. 最近,他专注于无服务器计算和JAMstack.

工作经验

12

Share

WordPress代码库是一团糟,这已经不是什么秘密了. 就我个人而言,每次我经历这些的时候,我只想蜷缩起来哭一场. 另一方面,WordPress遥遥领先于竞争对手. 一个易于使用且功能强大的CMS是一项艰巨的任务, WordPress仍然很受欢迎,因为它提供了这些.

所以我们为什么要关心WordPress核心代码的质量呢? 它起作用了,对吧??

Yes, it works, 而且这个有15年历史的代码库不太可能被它的志愿者维护者完全重构. Unfortunately, 这意味着它也可以作为“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前端开发 在本文中.

现代WordPress开发流程

一般来说,高质量的代码是:

  • Readable. 很容易理解代码的作用和原因.
  • Modular. 目的明确的小块代码易于理解、开发和测试.
  • Reusable. 重用已经开发的模块来解决类似的问题,大大加快了开发速度.
  • Maintainable. 修改旧功能或引入新特性很容易.

其主要结果是更低的开发和拥有成本,还有许多附带的好处,我不会在这里详述.

Instead, 我将重点介绍哪些开发技术和最佳实践可以帮助您生成高质量的代码. 让我们从版本控制开始.

使用版本控制

This means using Git. 可悲的是,通过FTP在生产中进行“牛仔编码”仍然是一件大事. 就在最近,我为一家英国机构工作,他们的代码库中有这样的文件名:

  • functions copy.php
  • 函数拷贝2.php
  • functions test.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这样的现代解决方案.

Use WP-CLI

WordPress命令行界面(WP-CLI)是管理WordPress安装的一个非常有用的工具. 访问WP-CLI意味着能够运行几乎任何WordPress API功能. 例如,您可以使用WP-CLI添加、删除和编辑用户及其密码. 如果您刚刚继承了一个站点,并且所有者将自己锁在外面,则非常有用.

另一个例子是使用WP-CLI进行初始部署非常简单. 这些可以用几个命令完成:

  • 下载核心、主题和插件
  • 在数据库中进行查找和替换
  • 添加admin用户

此外,这些操作可以脚本化和自动化.

使用高级部署选项

说到自动化,一些部署技术和流程是值得学习的,比如:

Granted, 从不使用版本控制到使用Docker是一个巨大的飞跃,对于一个典型的单人WordPress项目来说可能是压倒性的. 根据您的主机提供商,有些选项甚至可能不可行. 但是对于团队和大型项目来说,高级部署是必须具备的.

Use Linting

然而,对于任何规模的项目,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前端开发技术

现在为整个WordPress项目设置了一个适当的工作流, 让我们深入了解前端的最佳实践.

使用现代工具:Sass和ES6+

前端开发世界是不断变化的,总是在变化. 我们一度认为Sass是编写css的最佳工具,也是古腾堡时代之前WordPress开发的最佳工具, 它现在仍然是,但后来每个人都开始谈论CSS-in-JS和样式组件.

甚至WordPress也无法抗拒并选择了一些新技术. 新的块编辑器Gutenberg是基于React和REST API构建的.

你一定要跟上这些核心前端技术的速度:

ES6和Sass是现代的JavaScript和CSS, respectively, Webpack是一个允许使用所有这些现代功能而不用担心向后兼容性的工具. Webpack可以被称为前端应用编译器,它生成供浏览器使用的文件.

从jQuery过渡到Vue.js or React

WordPress核心和几乎所有WordPress插件都依赖于jQuery, 所以你不能停止使用它. 实际上,停止使用它来完成一些简单的任务是没有意义的,比如隐藏几个

当您习惯使用这种方式时,也可以使用一次性AJAX请求. jQuery无论如何都会被加载,而且它简单易用.

复杂的应用程序是jQuery挣扎的地方:难以遵循的逻辑; callback hell,全局变量,没有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对初学者更友好 只需要放入一个