在 WordPress 中添加内联脚本的最有效方法

已发表: 2022-06-16

内联脚本是两个让开发人员不寒而栗的简单词。内联脚本是一种在 WordPress 帖子的文本中添加 JavaScript (JS)、CSS 和 HTML 的简单方法。虽然它们可以用于多种用途，但一种一般用途是在您发布新的 WordPress 文章时即时进行更改。有些人可能会认为这没有必要，但这样做可以确保您的网站顺利高效地运行。

大多数 WordPress 用户忽略的一件事是在他们的网站上补充脚本。无论您是想在单个页面上还是在整个网站上实现内联文本，都有很多方法可以使用 WordPress 来实现。一旦您了解了正确执行此操作的正确方法，将内联脚本添加到您的 WordPress 网站就可以非常简单。这篇博文将讨论在 WordPress 中轻松添加内联脚本的最有效方法。继续阅读以了解更多信息。

通过 Wp_print_scripts 添加

如果您要添加 WordPress 内联文本，那么 WordPress wp_print_scripts 或/和 admin_print_scripts 函数就是您的答案。 WordPress wp_print_scripts 可以在文档的头部显示文本标签，这通常在包含 JS 或 CSS 文件时完成。此 WordPress 功能将使您的网站更具交互性或添加新功能。与任何 WordPress 功能一样，在您的网站上使用它之前，需要遵循一些简单的规则。

此函数基于 WordPress 插件选项建立三个变量，并使用 admin_print_scripts 钩子将它们输出到前端（头部）。要将内联字符添加到管理区域，您还可以将 wp_print_scripts 替换为 admin_print_scripts 函数并收工。

首次安装 WordPress 时，它带有许多自动添加到站点的文本。这可能会导致服务器上的加载时间和 CPU 使用率增加。解决此问题的一种方法是使用 wp_print_scripts 函数，因此您仅在需要或需要时才加载文本。也就是说，让我们快速看一下使用 wp_print_script 函数在 WordPress 帖子中添加内联字符的一些优点和缺点：

优点：

将任何内联文本添加到 WordPress 页面的“头部”总是很简单的；
您添加的代码没有任何限制，这意味着您可以添加 JS 变量、函数、方法、条件或任何您想添加到站点的内容。

缺点：

没有特定的方法可以将您添加的代码与注册的脚本相关联；
在大多数情况下，各种因素的输出代码可能不是控制输出代码位置的真实且一致的方式。但是，您始终可以利用 <add_action> 下的 <priority> 参数来控制添加代码的位置。

使用 wp_add_inline_script() 函数

最近，WordPress 推出了一项新功能，用于将内联 JavaScript 添加到 WordPress 帖子中。但是，这种新的集成是兼容的，从 4.5 WordPress 版本开始，与其他可用选项相比，它是一种更突出的添加内联文本的方式。我们正在定义 wp_add_inline_script() 函数，您希望它可以完美地完成工作。即使是最有经验的 WordPress 开发人员也可以证实这一事实。

wp_add_inline_script() 函数是一种无需编辑 WordPress 页面上的任何代码即可将内联字符添加到站点的方法。这使您可以实时进行更改，而无需 FTP 访问或使用插件。此功能也是可用于自定义 WordPress 网站的基本集成之一。该过程允许您在网站代码中添加内联文本，这意味着它们将直接添加到网页上的 HTML 标记中。这比使用外部 JS 文件或指向其他网站的链接提供了更多的自定义。

优点：

wp_add_inline_script() 函数是向您的 WordPress 博客添加内联字符的一种有价值的方法；
它可以是开发人员在不更改 WordPress 主题或插件文件或编辑 header.php 模板文件的情况下添加 JS 代码的一种简单方便的方式；
这对于添加诸如 Google Analytics 代码之类的脚本很有用。每次有 Google Analytics 功能或设置更新时，它都可以让您免于编辑 header.php 文件。

缺点：

wp_add_inline_script() 函数的唯一缺点是它仅从 4.5 WordPress 版本开始可用。

使用 wp_localize_script() 函数

wp_localize_script() 函数是一个有用的 WordPress 实用程序，可将内联字符添加到 WordPress 网站上的各个页面。如果您需要网站上的快速和临时功能，例如活动或促销，这是完美的选择。该函数接受可变数量的参数并输出添加到文档头部的 JS 字符串列表。这样做会很有帮助，例如，如果您正在使用 jQuery，并且只希望脚本的代码出现在某些页面上。

Wp_localize_script() 将您的 JS 文件排入队列并为其提供“shapeSpace_script”的 ID/句柄，它定义了一个包含您的变量的关联数组。最后，这些 JS 变量被传递给 wp_localize_script() 以包含在已注册的 shapeSpace_script 中。因此，它使您能够应用任何 JS 变量，例如 shapeSpace.varl 等。此函数专用于本地化 JS 变量以用于语言翻译和国际化。但是，大多数 WordPress 开发人员将其用作向其网站添加内联字符的常用方法。

优点：

Wp_localize_script() 启用与现有注册脚本的“read:require”关联。这意味着它提供了一种出色且一致的方式来控制您网站的自定义文本输出的相对位置。

缺点：

唯一的缺点是您只能添加 JS 变量（ var = 'value' ）。因此，使用 wp_localize_script() 添加其他内联脚本是不可能的，例如函数、条件、方程式等。

使用后备

如前所述，具体方法如 wp_add_inline_script() 仅从 4.5 WordPress 版本或更高版本开始可用。但是，通过将所有内容放在一起，无论您使用的是哪个 WordPress 版本，您都可以设计一种向 WordPress 文件添加内联字符的防故障方法。最有效的方法是通过 head 部分（前端）post 插件中的三个函数。

要做的第一件事是将您的 JS 文件排入队列并调用以下函数以通过 wp_add_inline_script() 函数添加内联行。第三个功能是回退到任何早于 4.5 版本的版本。这无疑适用于 WordPress 4.5 和任何独特的版本。这就是真正的魔法发生的地方。您可以继续使用后备方法，该方法将在您选择的 WordPress 变体上完成工作，回到 2.1 或其他版本。

优点：

您可以在您的网站上拥有多个 JS 文件，而无需添加额外的 HTTP 请求来一次加载它们。这意味着您将能够减少网站访问者的加载时间。
如果一个脚本失败，同一回退功能中的其他脚本仍然可以工作，因为它们是从不同线程异步加载的，因为它们相互依赖。

缺点：

当脚本失败时，在少数情况下，用户会看到一个空白区域而不是代码。这看起来似乎没什么大不了的，但作为 WordPress 开发人员，这是需要注意的重要事项。

在 WordPress 中添加内联脚本的回顾

您可以使用的替代技术的限制使 wp_add_inline_script() 函数成为添加 WordPress 内联字符的高级方法。这被认为是当今最有效的解决方案，并且与流行的看法相反，如果您使用后备技术，此功能可以在任何版本的 WordPress 上使用。供您参考，以下是在 WordPress 核心中添加内联脚本的最有效方法的快速回顾：

wp_add_inline_script()允许您将任何 JS 代码添加到任何已注册的脚本中；
wp_print_scripts 或 admin_print_scripts允许您在前端或标题部分安装任何代码；

wp_localize_script()还允许您将 JS 变量添加到任何已注册的脚本；
Fallback让您可以设计出一种完全适用于任何 WordPress 版本的完整技术。

注意：如果您想添加内联样式/CSS 而不是 JavaScript，WordPress 为您提供了一组类似于用于添加脚本的“添加样式”功能。 例如，查看 wp_print_styles 和 wp_add_inline_styles。

结论

内联脚本是向 WordPress 网站添加功能的一种快速简便的方法。通过用 JavaScript 编写脚本，您可以创建一个内联脚本，在页面上执行您希望它执行的任何操作，而无需额外的插件或代码。本教程概述了在 WordPress 中添加内联脚本的最有效方法。

您是一位 WordPress 编辑器，并且有向 WP 网站添加脚本的经验吗？对于希望快速完成工作的新手开发人员，您会推荐哪种方法？请随时使用评论部分分享您的意见并提出任何令人不安的问题。

作者简介：

Arthur 是一位数字营销专家和商业博主。他通过各种社交媒体开发有趣的初创公司，并与客户分享他的经验，以更好地推广他们的业务。业余时间，Arthur 学习日语并撰写有关数字化转型趋势的文章。