Products
GG网络技术分享 2025-03-18 16:05 12
WordPress 已经存在于我们的生活中超过 16 年，但是向主题和插件添加脚本的方法对于许多开发人员来说仍然是个谜。 在本文中，我们终于消除了困惑。
由于它是最常用的 Javascript 库之一，今天我们将讨论如何将简单的 jQuery 脚本添加到您的 WordPress 主题或插件中。
但首先…
在我们开始将脚本附加到 WordPress 之前，了解 jQuery 的兼容模式很重要。
您可能知道，WordPress 预装了 jQuery，您可以将其与您的代码一起使用。
WordPress 的 jQuery 还具有“兼容模式”，这是一种避免与其他语言库发生冲突的机制。
这种防御机制的一部分意味着你 不能 使用 $ 像在其他项目中一样直接签名。
相反，在为 WordPress 编写 jQuery 时，您需要使用 jQuery.
查看下面的代码以获取示例：
问题是，编写 jQuery 无数次需要更长的时间，使其更难阅读，并且会使您的脚本膨胀。
好消息？
通过一些修改，您可以再次使用我们可爱的小美元符号。
顺便说一句，如果您不熟悉 jQuery，$ 符号只是 jQuery() 的别名，然后是函数的别名。
基本结构如下所示： $(selector).action(). 美元符号定义了 jQuery……“（选择器）”查询或查找 HTML 元素……最后，“jQuery action()”是要对元素执行的操作。
回到我们如何解决兼容性问题……这里有几个可行的选择：
绕过兼容模式的第一种方法是隐蔽你的代码。
例如，如果您在页脚中加载脚本，则可以将代码包装在一个匿名函数中，该函数会将 jQuery 映射到 $.
就像下面的例子：
如果你想在标题中添加你的脚本（如果可能你应该避免，更多关于下面的内容）你可以将所有内容包装在一个文档就绪函数中，传递 $ 一路上。
另一种避免拼写 jQuery 的简单方法是输入 “没有冲突” 模式并使用不同的快捷方式。
在这种情况下： $j 而不是默认 $.
您所要做的就是在脚本的顶部声明：var $j = jQuery.noConflict();
好的，现在您对为 WordPress 编写有效的 jQuery 代码有了更多的了解，让我们将其添加到我们的网站。
将 jQuery 脚本添加到 WordPress 的最简单方法之一是通过一个名为“排队。”
对于常规的 HTML 网站，我们将使用 <link> 添加脚本的元素。 WordPress 最终会做同样的事情，但我们将使用特殊的 WP 功能来实现它。
这样，它会为我们处理所有依赖项（感谢 WP！）。
如果您正在处理一个主题，则可以使用 wp_enqueue_script() 在你的功能 functions.php 文件。
这是它的样子：
这个函数有五个参数：
*注意事项 $in_footer 是默认情况下，脚本将加载到标题中。
这是不好的做法，会大大降低您的网站速度。 因此，如果要将脚本放在页脚中，请确保将此参数设置为 true。
您还可以向管理员添加脚本。 使用的函数完全一样，你只需要使用不同的钩子。
例如：
而不是挂钩 wp_enqueue_scripts 我们需要使用 admin_enqueue_scripts.
而已！
真的。
但是，如果您想使用不同于 WordPress 预加载的 jQuery 版本怎么办？
您可以将它排入队列……但这会在页面上留下两个版本的 JQ。
为了避免这种情况，我们必须取消注册 WP 的版本。
这是它的样子：
就像使用 wp_deregister_script() 取消注册 WP 的 jQuery 一样简单，然后包括您要添加的 jQuery 脚本。
在上面的示例中，我们使用了 Google 托管的 jQuery 库，但您显然会将其替换为您自己脚本的 URL。
如果您想在需要时加载脚本而不是直接将它们加载到页面中 - 您可以提前注册脚本。
例如，在 wp_loaded：
完成此操作后，您可以在需要时将脚本排入队列：
请记住使用相同的名称以避免与其他脚本冲突。
使用条件标签仅在必要时加载您的脚本。
这在管理员中更常用，您只想在特定页面（而不是整个管理员）上使用脚本。 这也节省了带宽和处理时间——这意味着您网站的加载时间更快。
查看 WordPress Codex 中的 admin enqueue 脚本文档了解更多信息。
WP 插件目录还有很多很棒的插件，您可以使用它们将脚本插入到 WordPress 帖子、页面或主题中。
一些著名的 JavaScript / jQuery 插件示例包括：高级自定义字段、简单自定义 CSS 和 JS、Scripts n Styles 和 Asset CleanUp。
更好地理解 jQuery 只会让你所做的工作更有影响力。 无论是您自己的网站，还是客户项目。
jQuery 以其简单性而著称，正如您（希望）在本文中了解到的那样，一旦您知道如何将简单的 jQuery 脚本添加到 WordPress 中就变得很容易。
是的，与使用普通 HTML 相比，有一点开销，但还有依赖项管理和清晰度的额外好处。
不仅如此，通过使用绕过 jQuery 的 WP 默认兼容性等小技巧，您将为自己节省大量时间、精力和臃肿的代码。
标签：Demand feedback
