创建一个外观精美、性能完美的 WordPress 主题对任何开发人员来说都至关重要。无论您的经验如何,在主题测试中实施强有力的策略都会让您的产品从平庸走向成功。
在本指南中,我们将介绍 WordPress 主题测试,并探讨可提升主题质量的工具、技术和最佳实践。本指南可确保您的主题在性能、兼容性和用户体验(UX)方面达到最高标准。
了解 WordPress 主题测试
开发任何产品都需要一个测试过程,这不仅仅是发布前的最后检查。它是开发过程中不可或缺的一部分,可以帮助您及早发现和纠正问题,从长远来看可以节省时间和资源。
WordPress 主题测试可以确保您的主题在各种环境、浏览器和设备上正常运行。它可以发现您需要在发布前解决的问题:
虽然 WordPress 主题测试可能包括错误修复,但这一过程通常能帮助您制作出在市场上脱颖而出的产品。
WordPress主题标准概述
WordPress 有一套既定的编码标准,以确保不同主题的一致性和质量。这些标准并不是随意制定的,而是经过多年的社区经验和协作不断完善的结果。
制作 WordPress 主题团队会对 WordPress 主题目录中可能包含的主题执行这些标准:
WordPress 主题目录。
提交到该目录的主题都要经过彻底审查,以确保它们符合平台的质量和安全要求。
鉴于主题目录是官方资源库,也是许多人寻找新主题的第一站,因此确保每次下载都能按照您的期望运行,不出现安全问题或重大漏洞至关重要。这种高标准的质量只是使 WordPress 成为一个平台的一个方面。
为什么要根据WordPress标准进行测试
符合 WordPress 标准并不仅仅是为了获得主题目录的批准。更深层次的目标是为用户创建一个可靠、安全的产品。
除了希望在众多竞争者中找到自己的位置外,还有很多令人信服的理由需要根据 WordPress 标准测试您的主题:
- 面向未来。WordPress 在不断发展。因此,如果您遵守当前的标准,您就能在未来更轻松地维护和更新您的主题。
- 兼容性。如果您的主题遵循 WordPress 标准,它就更有可能与各种插件和 WordPress 核心功能配合使用。
- 性能。许多 WordPress 标准都注重性能。遵循这些标准有助于确保您的主题以更高的效率运行。
- 安全性。这些标准包括安全方面的最佳实践,有助于保护您的主题及其用户免受潜在漏洞的侵害。
针对这些方面的最终结果是:用户信任。大多数用户都希望获得安全、稳定、无漏洞的优质产品。
对于那些熟悉 WordPress 的用户来说,符合这些标准的主题将进一步提升该平台的声誉。对于初次使用 WordPress 的用户来说,高质量的主题会给人一种可靠的感觉。因此,您的主题可能会成为用户与该平台终身联系的开端。
WordPress将根据哪些标准来评判您的主题
制作 WordPress 主题团队是维护平台生态系统中主题质量的核心和关键。他们根据一整套标准对主题进行评估:
- 代码质量。必须没有 JavaScript 或 PHP 错误、警告或通知。您的主题也不能使用过时的常量或函数。WordPress 也有一套单独的编码标准需要遵守。
- 功能性。您不能“操纵”编辑预览屏幕、将典型的 WordPress 功能置于付费墙之后或在激活时进行重定向。此外,还有关于显示管理通知和包含“非展示”功能的指导原则。
- 可访问性。主题必须包含跳过链接和键盘导航选项。链接也必须使用下划线。
- 许可。当然,主题必须与 GNU 通用公共许可证 (GPL) 兼容。不过,您不必使用与 WordPress 相同的许可证,任何兼容的 GPL 许可证都有效。
还有一些与推广和展示有关的指导原则。例如,Make WordPress Themes 团队可能会根据主题的名称决定拒绝您的主题。如果出现商标侵权或您选择了不恰当的名称,就会出现这种情况。
此外,对信用位置也有限制,即便如此,您也只能将其添加到 style.css
中:
一个 style.css 文件。
此外,还有一些作者账户指导,例如可以拥有多少个账户以及主题提交频率。大部分所需元素都集中在技术开发方面。
WordPress技术标准
在向 WordPress 提交主题的 14 项要求中,与主题设置、文件以及主题是否使用块相关的要求占了很大一部分。
在经典主题和块主题方面,前者有更多的指导:
- 经典主题。你必须在代码中的特定位置加入许多函数。调用模板时也是如此。
- 区块主题 遵守块主题的标准比较简单,因为只需包含四个文件。如果你的区块模板也很完整,那么你的主题就能满足一些技术标准的要求。
在设置方面有许多要求。例如,您必须使用特定的钩子来显示通知,并根据审核流程指南来设置通知的永久性。
WordPress 仪表盘内的管理通知。
在数据库中存储选项有严格的控制。即使是多个设置,也必须使用一个数组,并使用正确的命名规则。在WordPress仪表板上,您只能使用核心用户界面(UI)元素,任何样式设计都必须在主题管理页面的范围内进行。
FakerPress 评论设置界面。
您还必须监控主题中包含的文件。例如,每个主题都必须包含 readme.txt
文件。准备文件(如删除高级代码或多余目录)是另一项要求,包括主题的所有脚本和媒体而不是使用远程资源也是如此。这也适用于经过精简的脚本:您还必须包含完整的原始文件。
满足 WordPress 对主题的所有要求似乎很麻烦,尤其是如果您不打算提交到官方目录的话。即便如此,这些标准还是提供了一个很好的框架,可以帮助您提供高质量的产品。
为什么符合WordPress标准有助于提高主题质量?
要将您的主题提交到官方目录,您必须满足制作 WordPress 主题指南的要求。不过,可以考虑为客户创建定制主题的机构。通常情况下,这些主题不需要提交到主题目录,因为不会有大规模的传播。但遵循指南和要求仍能为所有 WordPress 主题带来好处,包括
- 一致性。标准提供了一个共同的框架,使团队更容易共同完成一个项目。
- 效率。遵循既定标准可以加快开发时间。这还可以减少后续大量定制的需要。
- 可维护性。标准化代码更易于维护和更新。从长远来看,这是另一种节省时间和资源的方法。
- 客户满意度。符合 WordPress 标准的主题更有可能为您的客户提供流畅、无错误的体验。
除此之外,您还可以为您的主题提供未来的灵活性。考虑一下客户拒绝接受项目主题或终止协议的情况。一个符合 WordPress 标准和要求的主题,您可以将其重新用于产品中,而无需做大量的额外工作。
简而言之,即使您不想以 WordPress 主题目录为目标,满足该平台的要求也能提高您的主题的质量和适销性。至少,您可以展示出专业性和对细节的关注,这对潜在客户来说是一个强有力的卖点。
WordPress主题测试所需的基本工具
与其他行业的从业人员一样,WordPress 开发人员也需要一个强大且适应性强的工具包,涵盖创建主题并使其性能良好的各个方面。
将 WordPress 编码标准和制作 WordPress 主题团队的要求视为您的指导手册。您也不需要逐一手动检查。相反,Theme Check 和 Theme Sniffer 插件可以自动完成这项工作。
Theme Check 插件
它们都会对您的主题进行测试,并显示可能不符合当前要求的任何区域。主题嗅探器有一些更全面的测试,并使用 PHP_CodeSniffer 脚本的自定义“sniffs”功能来帮助检测违反标准的情况。
您还需要借助浏览器的开发工具来检查和调试 HTML、CSS 和 JavaScript。对于 WordPress 的特定调试,没有平台自己的调试模式几乎是不可能的。Debug Bar 插件为 WordPress 面板添加了一个调试菜单,可从该模式中调用。
Debug Bar 插件
在测试主题时,还有一些其他插件也很有价值:
- 查询监控器。这个工具面板可以深入了解数据库查询、钩子、条件等。
- 记录过时通知。如果你的主题使用了过时的文件、函数和函数参数,这个插件就会捕捉到它们。这是让你的主题与 WordPress 最新版本保持同步的好方法。
- 怪物小部件插件。经典主题使用小部件,这个插件会在你的网站上添加一个小部件,其中包含所有可用的核心小部件。其目的是让你高效地测试小工具区域。
在 WordPress 主题测试工作流程中,你可能不会用到所有这些插件和工具。这正是工具箱的意义所在:每个组件都有其作用,并能帮助您在问题出现之前加以解决。
WordPress主题测试:设置测试环境
工具箱准备就绪后,您就可以设置工作区域了。对于 WordPress 主题测试来说,这意味着要创建一个合适的测试和开发环境。这样做的目的是确保您可以重复进行任何测试并获得准确的结果。
您可能已经准备好了这一过程中的大部分工作,无需任何进一步的设置。当然,正规的 WordPress 开发人员会不费吹灰之力就拥有以下其中之一:
- 本地开发环境。本地机器上的 WordPress 设置可以让您在不影响实时网站的情况下运行测试。
- 多个 WordPress 版本。您应该针对多个较旧的 WordPress 版本进行测试,以获得最大的兼容性。
- 各种 PHP 版本。推而广之,这些测试应针对不同版本的 PHP 或您的主题所需的任何其他重要技术进行。
- 流行插件。为确保测试符合现实世界的实际设置,最好安装并激活一些最流行的 WordPress 插件。这可以是为了测试兼容性问题,也可以是为了了解主题在典型负载下的表现。
- 多种设备和浏览器。在各种设备和浏览器上测试您的主题,可以确保它看起来很棒,并能在不同平台上一致运行。
环境组件就位后,您需要配置 WordPress 以进行调试。为此,请使用您喜欢的方法打开 wp-config.php
文件。理想的方法是使用安全文件传输协议(SFTP)或安全外壳(SSH)。
打开 wp-config.php
后,添加以下几行:
define( 'WP_DEBUG', true ); define( 'WP_DEBUG_LOG', true ); define( 'WP_DEBUG_DISPLAY', false );
这将启用 WordPress 调试模式,将错误记录到文件中,并防止在前端显示这些错误。你也可以在将测试网站上传到实时服务器时再次关闭该功能。
主题单元测试数据: 帮助你达到主题标准的WordPress辅助内容
在 WordPress 主题测试中,还有一个元素对于根除边缘错误或问题至关重要:主题单元测试数据。这是一个 XML 文件,包含各种内容类型和边缘案例,您可以通过 WordPress 面板将其上传到您的网站。
WordPress Posts 屏幕显示与主题单元测试数据相关的内容。
这就是它如此有价值的原因:
- 它包括各种内容类型,如文章、页面、评论和媒体。这可以让你测试主题如何处理不同的内容场景。
- 这些数据包括超长标题、无标题文章和嵌套评论等元素。测试所有这些边缘情况都很重要,因为你希望用户能够进行任何与之相关的自定义。
- 各种格式化选项可确保您的主题按照您的预期对内容进行格式化。XML 文件中包含的内容和媒体可以测试这一点。
- 您还有不同语言的内容,其中包括可能导致格式错误的字母。
你可以在 WordPress 官方 GitHub 代码库或《制作 WordPress 主题手册》中找到主题单元测试数据 XML 文件。下载后,前往 WordPress 中的“工具”>“导入”页面:
WordPress 仪表盘中的导入页面。
这将显示平台的导入选项列表,您要选择立即为 WordPress 安装。或者,您也可以安装 WordPress Importer 插件。安装链接将变为运行导入程序。单击该链接,打开上传对话框。然后选择 XML 文件,点击上传文件和导入按钮:
导入 WordPress 屏幕显示等待导入的文件。
要导入的内容包含其他用户配置文件。在“导入 WordPress”页面,您可以选择是否将它们与内容一起导入。或者,你也可以创建自己的用户,或将内容分配给网站上已有的用户:
导入 WordPress 对话框显示为内容指定作者的选项。
建议您选中下载和导入文件附件复选框。这反映了典型的 WordPress 体验。点击提交按钮后,WordPress 会花一些时间导入内容、用户和媒体。在这里,您可以测试主题如何处理各种内容类型和场景,以确保它符合内容显示和格式要求。
主题测试的基本要素
拥有正确的工作流程是获得流畅、无故障体验的关键。尤其是在需要管理一长串额外工具和插件的情况下,更是如此。一旦有了稳定的测试环境,就可以评估测试所需的步骤。
WordPress 主题测试的关键在于它的迭代性和流动性。没有固定的、按部就班的线性工作流程。相反,你可以按照自己选择的顺序完成许多任务。
例如,你的工作流程可能至少包括以下一个或全部步骤:
- 启用调试模式。
- 运行主题检查或主题嗅探器插件。
- 使用主题单元测试数据进行测试。
- 使用浏览器开发工具排除故障。
测试主题选项和自定义功能可能会在不同的阶段进行。在整个过程中,我们都会重新审视这一领域。检查插件兼容性也是如此。这两个方面将不断进行评估。您进行的其他测试通常也会围绕这些方面展开。
调试阶段通常会在测试之后进行,但也会有一些交叉。最终,WordPress 主题测试将关注与功能、性能、安全性、可访问性和代码“适用性”相关的领域。
一旦您的主题通过了测试,符合 WordPress 的官方要求,并且没有任何错误,那么提交它就很简单了。
WordPress主题技术测试的核心领域
有了基础知识,你就可以看看主题测试的核心内容了。与基础知识一样,这些核心领域也是不断变化和迭代的。不过,从确认主题是否能处理基本功能开始,不失为一个好主意。
功能测试
一般来说,功能测试可以确保您的主题在所有方面都能按预期运行。不能支持 WordPress 默认功能的主题是不可行的。主题单元测试数据对此至关重要,因为您可以检查主题如何处理典型情况和边缘情况。
例如,您已经有了包含典型和非典型内容的帖子和页面,因此没有必要再创建更多的帖子和页面。测试这些内容是很主观的,将取决于您的目标、设计概要、客户需求等。
对于大多数使用案例,测试以下内容是有价值的:
- 对于所有典型的、最常用的区块–例如段落、列表、图片、标题–测试它们在前端的外观。检查对齐方式、间距和总体表现形式是否有任何不一致。
- 多个选项需要进行兼容性测试。这可能与 WordPress 核心设置、各种可用块,甚至其他插件的第三方设置有关。
- 如果您的主题将运行博客,请检查评论区是否能显示所有内容。在这里测试嵌套评论也很重要,这样设计和功能才能达到预期效果。
- 此时,请查找与主题集成的任何区块并对其进行测试。例如,评论区块可能需要进一步调整。第三方区块集插件可能需要进行兼容性测试。
对于经典主题,应测试小部件区域、简码功能、导航和其他与区块主题不同的元素。不过,鉴于区块编辑器是 WordPress 的未来,大多数主题都应将其作为标准配置。
区块编辑器测试
您的主题需要与区块编辑器和网站编辑器完全兼容。您可以从模板开始,在网站编辑器的“设计”>“模板”界面中找到它们:
WordPress 网站编辑器模板屏幕。
在此,您需要确认模板是否显示,以及是否可以无差错地编辑模板。用户可能希望自定义主题模板,甚至创建自己的模板。
样式界面是网站编辑器中另一个关键的自定义工具,这意味着它也是决定主题质量的一个重要因素。
WordPress 网站编辑器的样式界面。
你可能会在设置中玩一玩,看看能否完成典型的自定义设置。在其他情况下,你可能会使用布局设置来使所有内容完美地结合在一起。
Block Themes 的其他元素也需要考虑:
- Theme.json。彻底测试你的
theme.json
文件,确保它能正确配置全局样式和设置。 - 区块变化。如果你的主题使用了自定义区块变化,那么以不同的方式测试这些变化是很重要的。
- 自定义区块模板: 对于这部分和任何相关的模板部分,都要边做边反复检查,以免引入更多错误或错误。
除技术功能(如确保所有操作和过滤钩子都能正常工作)外,还需要进行此项测试。如果相关,使用 WooCommerce 或其他电子商务插件测试主题。最后,许多客户网站还希望与社交媒体集成。请测试任何分享按钮或信息源,确保其功能符合客户的要求。
插件兼容性
WordPress 网站在其生命周期内可能会使用多个插件。由于插件和组合非常多,很难考虑到每一种使用情况。
这可能是一个令人头疼的问题。尽管很明显您必须使用某些插件来测试主题,但要知道是哪些插件却很难。我们的建议是什么都用一点进行测试:
- 最流行的页面生成器插件,如 Elementor、Beaver Builder、Bricks、Brizy 和 Divi。
- 大多数网站都有搜索引擎优化(SEO)插件,如 Yoast SEO。我们还推荐使用我们自主研发的 Smart SEO Tool 以及其他许多 SEO 插件。
- 缓存插件也很常见。WP Super Cache、W3 Total Cache 和 WP Rocket 都是该领域的佼佼者。
- 你可以找到许多不同的表单插件,但 Ninja Forms、Contact Form 7、WPForms 和 Gravity Forms 都经常出现。
- Automattic 和 Make WordPress Core 团队的插件应该在你的测试解决方案列表中。Akismet 、Jetpack 甚至经典编辑器插件都应进行全面测试。
你要寻找明显的冲突,然后解决小问题。许多主题都会在营销材料中使用插件兼容性,因此在这方面投入时间可以提高你的可信度。
无障碍测试
并不是每个用户都有完美的视力或正常的肢体。这不应该成为使用主题的障碍,这意味着您需要在发布前进行无障碍测试。
WordPress有自己的可访问性指南,这是 Make WordPress Accessible 团队提供的。自己测试的一个合理方法是研究最有益的无障碍性实践。要考虑的因素有很多,它们分为几个类别:
- 开发。这包括使用分页而非无限滚动、正确标注网络表单、使用语义 HTML、实施正确的标题层次结构等方面。
- 内容。这些做法简单明了,例如在同一标签页中打开链接、添加 ALT 文本描述以及应用可读性。
- 设计。字体大小和颜色对比度是无障碍阅读方面的大问题,因此在开发过程中应重点关注。测试阶段更多的是为了完善。
这些实践中有很多都与《网页内容无障碍导则》(WCAG)2.0 兼容和一致。您可以找到核对表,帮助您捕捉和测试与网络无障碍相关的元素。通过开发、内容和设计检查将为您的主题打下坚实的基础。您甚至可以通过完整的课程来学习如何将网络无障碍性测试应用到您的项目中。
无障碍测试工具
说到合适的工具,有两款值得推荐:
- axe。Deque 的 axe 作为浏览器 DevTools 的一部分运行,可在数秒内自动执行一系列测试(取决于您的账户)。
- WAVE。WebAIMs WAVE是一款可在浏览器中使用或通过扩展使用的工具。
同时使用这两种工具是测试可访问性的绝佳方法。例如,您可以先快速进行 axe 测试:
在浏览器的“开发人员”检查面板中使用 axe 工具。
这就像点击开始全页面扫描一样简单。扫描结果会突出显示需要考虑的地方和潜在的修复方法。
WAVE 看起来会让人不知所措,尤其是在有大量问题需要解决的情况下。不过,它对内容顺序和结构的总结对于评估主题如何与屏幕阅读器配合使用非常有价值:
WAVE 辅助工具显示在左侧边栏中。
先用 axe 解决广泛的问题,如一般的颜色对比度警告,然后再用 WAVE 解决更深层次的无障碍问题,这是一种很好的方法。这样一来,你的内容就有了正确的标题层次和结构、无障碍表单输入和标签。
您甚至可能需要测试键盘导航,并使用屏幕阅读器使用您的主题,以了解用户的体验。无论如何,测试主题的可访问性都不是简单的 “锦上添花”,而是创建包容性网络的关键。
性能测试
测试主题的性能可确保为用户提供良好的运行体验。这也是您营销的一个关键角度。许多主题都在宣传其卓越的性能,这证明了性能测试的重要性。
测试网页性能的方法同样适用于 WordPress 主题测试。有一种彻底的方法可以做到这一点,尽管你的工具可能有所不同。
例如,谷歌的 PageSpeedInsights 或 Lighthouse 就是理想的工具。如果你想听听别人的意见,WebPageTest 这样的工具可能是个不错的选择。无论如何,有很多性能测试工具可以满足您的具体需求。
说到测试内容,有几个关键领域需要重点关注:
- 您的 Core Web Vitals 应始终保持健康,因为这是主题性能的基础。
- 尽量减少 HTTP 请求和优化资产加载可以帮助你更好地管理资源。
- 查询监控器将帮助你识别并优化任何数据库查询。
- 如果您的主题包含捆绑图片,请确保它们具有最佳尺寸,并在打包前对它们进行压缩。
您应该在主题开发初期就选择响应式或自适应设计。无论您选择哪种方式,都必须进行测试,以确认它能按照您的意图运行。您不希望引入水平滚动、内容缩放需求、小触摸目标或无法根据屏幕尺寸进行调整的显示布局。
此时,您可以进行跨浏览器测试。BrowserStack 就是一个很好的工具:
BrowserStack 网站。
最后,虽然服务器响应时间与主题测试没有直接关系,但它们对最终用户却很重要。
安全测试
WordPress 安全测试应该是您的重中之重。WordPress 团队提供了大量文档,确保您的主题使用安全。
请牢记以下原则:
- 对通过主题接受的所有数据进行验证和消毒。当涉及到用户输入时,最好采取谨慎的态度,验证比消毒更重要。
- 对于不受信任的数据源,应尽可能晚地删除所有数据–通常是在输出阶段。
- 依赖 WordPress API,因为它们是处理主题中任何数据的安全方法。
- WordPress nonces 是一种哈希值,有助于保护、验证和认证请求。它们并不是第一线的保护方法,但可以帮助加强已有的安全性。
跨站脚本(XSS)、跨站请求伪造(CSRF)和 SQL 注入是 WordPress 网站最常见的漏洞。您的主题应严密防范这些漏洞。遵循这些主题安全的核心原则,您就能尽可能地接近这一目标。
让主题开发工作流程更顺畅的典型做法
在机构环境中开发主题需要一种不同于个人或小型项目的方法。您需要更多的结构、一致性和效率。这可以通过制定自己的内部编码标准来实现,以补充 WordPress 的编码标准。可以使用 Jira 或 Trello协作工作流来跟踪问题和错误。
Jira 界面。
在确保团队符合整体质量要求方面,有一些做法可以提供帮助:
- 实施同行评审流程。这可以很简单,比如让团队成员在合并前互相审查代码。在其他情况下,也可以考虑结对编程。
- 开发可重复使用的组件。创建一个可重复使用的代码片段和组件库可以大大缩短开发时间。在某些情况下,您甚至可以为创建未来的主题建立一个完整的框架。
- 实施全面的测试程序。您可能需要制定一份标准化的测试清单,或在工作流程中加入用户验收测试(UAT)。
其中一些实施方法涵盖了典型的 DevOps 实践,可以提高机构的工作质量。例如,持续集成和持续部署(CI/CD)就是最好的实施方法之一。有了正确的工具,这可以帮助您以多种方式实现测试流程自动化。CI/CD 还可以直接融入现有的工作流程,节省宝贵的测试时间。
小结
WordPress 主题测试对于确保产品的稳健性、可靠性和为用户服务是必不可少的。如果您想在 WordPress 主题目录中发布您的产品,遵守 WordPress 官方标准和要求是必不可少的。这些准则也适用于机构和其他非公开发布的主题开发。
无论如何,全面的 WordPress 主题测试都是一项需要时间和精力的投资。如果您的测试涵盖了重要的核心领域–功能性、可访问性、性能、安全性和代码质量,那么您就能为客户提供满意的服务。符合 WordPress 标准可能会让您在将来与客户关系结束后更容易重新使用主题。
根据自己的经验,您对 WordPress 主题测试有什么建议吗?请在下面的评论区分享!
评论留言