用Perfmatters在WordPress中添加代码片段(PHP、CSS、JS、HTML)图文教程

在WordPress的优化之道中，“做减法”往往比“做加法”更重要。很多站长为了添加一段统计代码或自定义CSS，不得不安装庞大的“Code Snippets”类插件，这无疑增加了数据库的负担。

Perfmatters作为一款备受推崇的轻量级性能优化插件，近期推出了一个杀手级功能：代码片段管理器。这意味着你不再需要依赖第三方插件来插入PHP、CSS、JS或HTML代码。今天主题铺将深入解析这一功能，并分享如何利用它将网站性能提升到极致。分享一下如何用Perfmatters在WordPress中添加代码片段(PHP、CSS、JS、HTML)图文教程。

可以从本站下载Perfmatters汉化中文版

Perfmatters汉化中文版(更新到2.6.2)-轻量级WordPress优化加速插件下载

28天前

01227

为什么要用Perfmatters管理代码？

市面上已有很多代码管理插件，Perfmatters凭什么脱颖而出？核心在于两个字：性能。

传统的代码片段插件通常将代码存储在数据库中，每次页面加载时，都需要从数据库中检索并执行这些代码。这不仅增加了数据库查询次数（SQL Queries），还拖慢了后端处理速度。

据主题铺观察，Perfmatters采用了一种截然不同的“扁平化文件”存储机制。当你保存代码片段时，它会生成独立的文件，前端加载时完全不涉及数据库调用。这种架构带来的优势是显而易见的：

1. 后端执行时间大幅减少：测试数据显示，后端执行效率提升了约20.5%。
2. 极度轻量：代码库比同类解决方案精简了约75%，剔除了云同步等不必要的臃肿功能。
3. 安全性更高：扁平文件机制天然隔离了部分数据库注入风险。

核心功能亮点解析

Perfmatters不仅仅是一个简单的代码插入器，它将插件原本强大的“脚本管理器”基因融入到了代码片段中。

1. 细颗粒度的加载控制

这是大多数免费插件无法做到的。你可以对每一段CSS或JS代码进行极致优化：

• 加载位置：选择在头部（Header）、底部（Footer）或正文前加载。
• 加载方式：支持文件引入或内联（Inline）输出。
• 性能参数：你可以对特定脚本启用延迟执行（Delay）、异步加载（Async）或预加载（Preload）。例如，你可以设置一段第三方的客服JS代码仅在“用户交互后”才加载，从而瞬间提升Google PageSpeed分数。

2. 智能的条件构建器

很多时候，我们的一段CSS代码只需要在“联系我们”页面生效，或者一段PHP代码只对“管理员”可见。

Perfmatters内置了强大的条件逻辑引擎。你可以设置包含或排除规则，基于文章类型、具体页面ID、用户登录状态甚至用户角色来决定是否加载代码。这种按需加载的策略，能有效避免全站加载无用代码造成的资源浪费。

3. 防崩溃的错误检查

修改functions.php最怕的就是代码写错导致网站白屏（WSOD）。Perfmatters内置了错误检查机制。当你保存PHP代码时，系统会预先进行语法检测，一旦发现错误，该片段会自动禁用并提示修改，确保你的网站永远不会因为一句错误代码而崩溃。

实战教程：如何添加代码片段

使用Perfmatters添加代码非常直观，以下是操作步骤：

按照以下步骤将代码片段添加到您的 WordPress 网站。

步骤 1

进入 Perfmatters 插件设置。

第二步

点击“代码”菜单。

第三步

点击页眉中的“新建代码片段”。

步骤 4

在单个代码片段页面，为您的代码片段命名，并选择代码片段的类型（PHP、JS、CSS 或 HTML）。然后，您可以从其他选项中选择，例如 位置 、 优先级 、 优化 、 条件 、 标签 和 描述 。

在“代码”框中输入您的代码。

第 5 步

如果您希望代码片段立即运行，请打开“启用”选项并点击“保存片段”。否则，您可以保持代码片段未激活状态并点击“保存片段”。

位置 

位置是指您的代码将运行的地方，这会根据代码片段的类型而有所不同。

PHP 代码片段 

PHP 代码片段有三个位置：

• 全局（默认）
• 仅前端
• 仅管理员

JS 代码片段 

JS 代码片段有四个位置：

• 前端头部（默认）
• 前端底部
• 管理页头
• 管理页脚

CSS 代码片段

CSS 代码片段有四个位置：

• 前端头部（默认）
• 前端底部
• 管理页头
• 管理页脚

HTML 代码片段

HTML 代码片段有五个位置：

• 前端头部（默认）
• 前端主体
• 前端底部
• 内容之前
• 内容之后

如果您需要更高级的规则，您也可以使用 条件 。

优先级 

优先级定义了代码运行的顺序。默认情况下，所有代码片段的优先级为 10。

很多时候，你不需要更改这个设置，但如果你需要代码更快运行，它就存在了。例如，如果你将优先级设置为 `1`，它将优先于其他优先级较低的代码片段（如 `10`）运行。

优化 

优化功能允许您微调 JS 和 CSS 代码片段的加载方式以提升性能 。您在 Perfmatters 中可能已经习惯的许多功能现在都可以在单个代码片段级别使用。可用的优化功能将根据代码片段的类型而有所不同。

您也可以同时启用优化 （如果它们支持的话）。例如，也许您想压缩您的 CSS 代码片段，并异步将其作为文件加载。

打印方法（JS，CSS）

打印方法决定代码是内联加载还是作为单独文件加载。

内联 

内联打印方法是默认的。这意味着您的代码片段将作为 HTML 页面的部分进行加载。它将包含 pmcs（Perfmatters 代码片段），然后是您的代码片段文件名，然后是代码片段的类型。例如：

<script id="pmcs-snippetname-js">test</script>

这种方法的一个优点是您的代码不会造成渲染阻塞。然而，一个缺点是它可能会增加您 HTML 页面的尺寸，并且更多地依赖于边缘缓存（因为它不是单独缓存的）。我们通常建议这种方法用于较小到中等规模的代码片段。

文件 

文件方法会在文件中加载您的代码片段。它将包含您的代码片段文件名，然后是版本字符串。示例：

snippetname.js?ver=xxxxxxxxx

这种方法的优点是您的代码片段可以更容易地被缓存，因为缓存插件和 CDN 通常对资源（JS、CSS）设置了更长的缓存时间。这可以导致加载时间更快。

加载行为（JS, CSS）

加载行为允许您进一步更改代码片段的加载方式，以获得更好的性能。

预加载（JS, CSS）

预加载允许您指定代码片段需要在页面加载时立即或尽快加载。本质上，它将代码片段移至瀑布流的顶部，使其不会造成渲染阻塞。这是通过在文档头部为代码片段添加一个具有 rel="preload" 属性的链接标签来实现的。

延迟加载（JS）

延迟 意味着 JavaScript 在浏览器解析 HTML 的过程中被下载，并且将在页面加载完成后 执行 。可以将其想象成将所有 JavaScript 推到瀑布流的底部。这样它就不会阻塞渲染。这是通过向代码片段添加一个 defer 属性来实现的。您可以在“内联”和“文件”打印方法中延迟 JS。

延迟（JS）

延迟允许您将 JavaScript 的加载延迟到用户交互之后。这可以是一种显著加快加载时间的方法，特别是当某些内容并非立即需要时。您可以在“内联”和“文件”打印方法中延迟 JavaScript。

异步（CSS）

Async 允许您通过在页面加载时异步执行它们来优化您的 CSS 代码片段，使它们不会造成渲染阻塞。这是通过向代码片段添加一个 onload 属性来实现的。

压缩（JS, CSS）

压缩是指从您的代码中删除不必要的字符（空格、注释、缩短函数和变量名等），以及额外的标记清理。这减少了文件的整体大小和解析时间。您可以在“内联”和“文件”打印方法中压缩您的 JavaScript 和 CSS 代码片段。

条件 

您可以使用 Perfmatters 条件构建器仅在需要时加载您的代码片段。您可以配置无限数量的规则。

包含

默认情况下，您的代码片段将仅使用位置选项。但是，如果您需要更多控制，可以指定它应该在哪里运行。

排除

可以添加排除项，指定代码片段不应运行的位置。然而，如果你已经使用 Include 指定了它应运行的位置，通常就不需要这样做。

用户

用户允许你选择代码片段应运行的角色（管理员、编辑等）或状态（已登录与未登录）。

示例

例如，也许你有一个 CSS 代码片段，只想在特定页面上加载，并且只在未登录时显示。你可以根据需要持续点击“添加条件”以添加更多规则。

标签 

您可以为代码片段添加标签，以便更轻松地在主片段页面上识别和查找它们。如果您有很多片段，您也可以通过标签名称搜索片段。

描述 

您可以为代码片段添加描述，以便更轻松地识别其用途。这通常用于简短笔记。您还可以通过描述来搜索代码片段。

屏幕选项 

屏幕选项允许您修改代码片段页面显示的默认列。要更改列，请点击“屏幕选项”。

默认显示的是类型、描述和修改日期。您可以启用标签、作者、创建日期和优先级。您还可以更改每页显示的代码片段数量。

安全模式 

安全模式是一个功能，可以在遇到无法自动恢复的问题时使用。它阻止代码片段运行，无论其是否处于活动状态。

启用安全模式有三种不同方法：

1. 通过设置启用安全模式
2. 通过恢复 URL 启用安全模式
3. 通过 wp-config.php 常量启用安全模式

通过设置启用安全模式 

步骤 1

进入 Perfmatters 插件设置。

第二步

点击“代码”菜单。

第三步

点击“设置”菜单。

步骤 4

点击“启用安全模式”。

您将在代码片段屏幕上看到一条通知，提示禁用安全模式。如果需要，您也可以重新访问设置页面并从那里禁用它。

通过恢复 URL 启用安全模式 

另一种启用安全模式的方法是使用恢复 URL。在您创建第一个代码片段后，会生成一个唯一的恢复 URL。如果需要，您可以将其复制并保存在安全的地方。在发生无法恢复的代码片段错误时，您可以访问此 URL 以启用安全模式。

通过 wp-config.php 常量启用安全模式 

您可以使用 PMCS_SAFE_MODE 常量通过在您的 wp-config.php 文件中添加以下内容来启用安全模式。

define('PMCS_SAFE_MODE', true );

这通常位于 WP_DEBUG 常量下方。

注意：在使用 PMCS_SAFE_MODE 常量时，您将无法通过常规方法禁用安全模式。必须将其从 wp-config.php 文件中移除。

如何导出代码片段 

您可以将您的 Perfmatters 代码片段导出为 .json 文件。这使您能够轻松地将配置导入到使用 Perfmatters 的另一个 WordPress 站点。

有三种不同的导出代码片段的方式：

• 导出所有片段
• 单个片段导出
• 批量导出片段

导出所有代码片段

在“设置”菜单中，点击“导出所有代码片段”。这将把所有代码片段导出为 .json 文件。文件格式： perfmatters-snippets-export-yyyy-mm-dd.json

单个代码片段导出 

要导出单个代码片段，请点击每个代码片段下方的“导出”链接。这将把单个代码片段导出为 .json 文件。文件格式： perfmatters-snippet-name-yyyy-mm-dd.json

批量导出代码片段 

要批量导出代码片段，请选择您要导出的片段。点击“批量操作”下拉菜单并选择“导出”。然后点击“应用”。这将把所有选中的代码片段导出为 .json 文件。文件格式： perfmatters-snippets-bulk-export-yyyy-mm-dd.json

如何导入代码片段 

您可以导入站点的代码片段、单个代码片段和批量代码片段。

在“设置”菜单下，点击“选择文件”按钮。找到并选择您导出的 .json 文件。然后点击“导入代码片段”按钮。

故障排除 

我们的代码片段功能具有内置错误检查 ，这意味着不应该会破坏您的网站。如果检测到代码片段存在错误，它将自动被禁用。

然而，如果您正在尝试排查您认为来自代码片段的问题，您可以使用安全模式 。这可以是一种简单的方式来全局排除它们，而无需单独关闭代码片段。把它想象成使用我们的 Perfmatters 中的查询字符串来暂时禁用优化功能。

总结与建议

对于追求极致速度的WordPress站点来说，整合插件功能是必经之路。主题铺认为，如果你的网站已经安装了Perfmatters，那么完全可以卸载诸如WPCode、Code Snippets等独立插件。

通过将代码管理迁移到Perfmatters，你不仅减少了一个插件的开销，更重要的是，你获得了一个不查询数据库、支持脚本延迟加载的现代化代码管理方案。这才是符合2026年标准的Web性能优化姿势。

可以从本站下载Perfmatters汉化中文版

Perfmatters汉化中文版(更新到2.6.2)-轻量级WordPress优化加速插件下载

28天前

01227