你想学习如何在WordPress中正确添加JavaScript和CSS样式表？ 许多DIY用户经常犯的错误，直接调用他们的脚本和样式表的插件和主题。 在本文中，我们将向您展示如何在WordPress中正确添加JavaScript和样式表。 这对刚刚开始学习WordPress主题和插件开发的人来说尤其有用。
在WordPress中添加脚本和样式表时常见的错误
许多新的WordPress插件和主题开发者犯了直接将他们的脚本或内联CSS添加到他们的插件和主题的错误。
有些误用了 wp_head 函数来加载他们的脚本和样式表。
虽然上面的代码可能看起来更容易，但是在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中正确加载脚本。
？PHP
函数wpb_adding_scripts（）{
wp_register_script（'my_amazing_script'，plugins_url（'amazing_script.js'，__FILE__），数组（'jquery'），'1.1'，true）;
wp_enqueue_script（ 'my_amazing_script'）;
}
add_action（'wp_enqueue_scripts'，'wpb_adding_scripts'）;
？>
说明：
我们通过注册我们的脚本开始 wp_register_script（） 功能。 这个函数接受5个参数：
- $处理 – 句柄是脚本的唯一名称。 我们被称为“my_amazing_script”
- $ SRC – src是脚本的位置。 我们正在使用plugins_url函数来获取我们插件文件夹的正确的URL。 一旦WordPress发现，那么它会在该文件夹中寻找我们的文件名为amazing_script.js。
- $ DEPS – deps是依赖。 由于我们的脚本使用jQuery，所以我们在依赖区域添加了jQuery。 WordPress会自动加载jQuery，如果它没有被加载到网站上。
- $版本 – 这是我们的脚本的版本号。 该参数不是必需的。
- $ in_footer – 我们想在页脚中加载我们的脚本，所以我们已经把值设置为true。 如果你想在头文件中加载脚本，那么你会使它成为假的。
提供了所有参数后 wp_register_script ，我们可以在里面调用脚本 wp_enqueue_script（） 这使得一切都发生。
最后一步是使用wp_enqueue_scripts操作钩实际加载脚本。 由于这是一个示例代码，因此我们在其他所有代码中添加了该代码。
如果您将此添加到您的主题或插件，则可以将此操作挂钩放置在脚本实际需要的位置。 这可以让你减少插件的内存占用。
现在有些人可能会想知道为什么我们要先进行脚本注册然后排队？ 那么，这可以让其他网站所有者注销您的脚本，而无需修改您的插件的核心代码。
在WordPress中正确排队样式
就像脚本一样，您也可以排列样式表。 看下面的例子：
而不是使用 wp_enqueue_script ，我们现在正在使用 wp_enqueue_style 添加我们的样式表。
注意我们已经使用了 wp_enqueue_scripts 动作钩子样式和脚本。 尽管名字，这个功能适用于两者。
在上面的例子中，我们已经使用了 plugins_url 函数指向我们想要排队的脚本或样式的位置。
但是，如果您在主题中使用排队脚本功能，那么只需使用 get_template_directory_uri（） 代替。 如果您正在使用儿童主题，请使用 get_stylesheet_directory_uri（） 。
以下是一个示例代码：