如何在 WordPress 中正确添加 JavaScript 和样式

您想了解如何在 wordpress 中正确添加 javascript 和 css 样式表吗？

许多 DIY 用户经常犯在插件和主题中直接调用脚本和样式表的错误。

在本文中，我们将向您展示如何在 WordPress 中正确添加 JavaScript 和样式表。这对于那些刚刚开始学习 WordPress 主题和插件开发的人来说特别有用。

在 WordPress 中添加脚本和样式表时的常见错误

许多新的WordPress 插件和主题开发人员都犯了直接将脚本或内联 CSS 添加到插件和主题中的错误。

立即学习“Java免费学习笔记（深入）”；

有些人错误地使用该wp_head函数来加载脚本和样式表。

<?phpadd_action('wp_head', 'wpb_bad_script');functionwpb_bad_script() {echo'jQuery goes here';}?>

由

在 WordPress 中一键使用

话袋AI笔记

话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑

195

查看详情

虽然上面的代码看起来更简单，但这是在 WordPress 中添加脚本的错误方法，并且会导致将来出现更多冲突。

例如，如果您手动加载 jQuery，而另一个插件通过正确的方法加载 jQuery，则 jQuery 会被加载两次。如果它在每个页面上加载，那么这将对WordPress 的速度和性能产生负面影响。

也有可能两者是不同的版本，也可能导致冲突。

话虽这么说，让我们看看添加脚本和样式表的正确方法。

为什么要在 WordPress 中排队脚本和样式？

WordPress 拥有强大的开发者社区。来自世界各地的数千人为 WordPress 开发主题和插件。

为了确保一切正常运行，并且没有人踩到别人的脚趾，WordPress 有一个排队系统。该系统提供了加载 JavaScript 和 CSS 样式表的可编程方式。

通过使用 wp_enqueue_script 和 wp_enqueue_style 函数，您可以告诉 WordPress 何时加载文件、加载文件的位置以及其依赖项是什么。

该系统还允许开发人员利用与 WordPress 捆绑在一起的内置 JavaScript 库，而不是多次加载相同的第三方脚本。这可以减少页面加载时间并有助于避免与其他主题和插件发生冲突。

如何在 WordPress 中正确排队脚本？

在 WordPress 中正确加载脚本非常简单。下面是一个示例代码，您可以将其粘贴到插件文件或主题的functions.php 文件中，以便在 WordPress 中正确加载脚本。

?phpfunctionwpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script');}  add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts');  ?>

由

在 WordPress 中一键使用

解释：

我们首先通过该wp_register_script()函数注册我们的脚本。该函数接受 5 个参数：

• $handle – Handle 是脚本的唯一名称。我们的叫做“my_amazing_script”
• $src – src 是脚本的位置。我们使用plugins_url 函数来获取插件文件夹的正确URL。一旦 WordPress 发现，它就会在该文件夹中查找我们的文件名 Amazing_script.js。
• $deps – deps 用于依赖。由于我们的脚本使用了 jQuery，因此我们在依赖项区域中添加了 jQuery。如果网站上尚未加载 jQuery，WordPress 将自动加载 jQuery。
• $ver – 这是我们脚本的版本号。该参数不是必需的。
• $in_footer – 我们想要在页脚中加载脚本，因此我们将该值设置为 true。如果您想在标头中加载脚本，那么您可以将其设置为 false。

在提供了所有参数后wp_register_script，我们就可以调用使一切发生的脚本wp_enqueue_script()。

最后一步是使用 wp_enqueue_scripts操作挂钩来实际加载脚本。由于这是示例代码，我们已将其添加到其他所有内容的正下方。

如果您要将其添加到主题或插件中，那么您可以将此操作挂钩放置在实际需要脚本的位置。这可以让您减少插件的内存占用。

现在有些人可能想知道为什么我们要采取额外的步骤先注册脚本然后将其排队？好吧，这允许其他网站所有者注销您的脚本，而无需修改插件的核心代码。

在 WordPress 中正确排列样式

就像脚本一样，您也可以将样式表排入队列。看下面的例子：

<?phpfunctionwpb_adding_styles() {wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));wp_enqueue_style('my_stylesheet');}add_action( 'wp_enqueue_scripts', 'wpb_adding_styles');  ?>

由

在 WordPress 中一键使用

wp_enqueue_script我们现在不再使用，而是wp_enqueue_style使用 添加样式表。

wp_enqueue_scripts请注意，我们对样式和脚本都使用了动作挂钩。尽管有这个名字，但这个函数对两者都适用。

在上面的示例中，我们使用plugins_url函数来指向我们想要排队的脚本或样式的位置。

但是，如果您在主题中使用排队脚本功能，则只需使用get_template_directory_uri()即可。如果您正在使用子主题，请使用get_stylesheet_directory_uri().

下面是一个示例代码：

<?php  functionwpb_adding_scripts() {wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');}  add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts');  ?>

由

在 WordPress 中一键使用

我们希望本文能帮助您学习如何在 WordPress 中正确添加 JavaScript 和样式。您可能还想研究顶级 WordPress 插件的源代码，以获取一些现实生活中的代码示例，或者查看我们关于如何选择最佳网页设计软件的指南。

以上就是如何在 WordPress 中正确添加 JavaScript 和样式的详细内容，更多请关注php中文网其它相关文章！