WordPress中添加脚本和样式的常见错误
许多新的WordPress插件和主题开发人员会直接在他们的插件和主题中添加脚本或内联CSS。有些人误用了wp_head函数来加载他们的脚本和样式表。
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>虽然上面的代码看起来更简单，但这是错误的添加脚本的方式，这会在未来导致更多的冲突。例如，如果您手动加载jQuery，而另一个插件通过正确的方法加载jQuery，那么就会有两次加载jQuery的情况。如果它被加载在每个页面上，那么这将对WordPress的速度和性能产生负面影响。
为什么要在WordPress中排队加载脚本和样式？
WordPress有一个强大的开发者社区。成千上万的人从世界各地开发WordPress的主题和插件。为了确保一切正常工作，并且不会互相干扰，WordPress有一个排队系统。这个系统提供了一种可编程的方式来加载JavaScripts和CSS样式表。通过使用wp_enqueue_script和wp_enqueue_style函数，您可以告诉WordPress何时加载文件，在哪里加载它以及它的依赖关系是什么。
如何在WordPress中正确排队加载脚本
在WordPress中正确加载脚本非常简单。下面是一个将代码粘贴到插件文件中、主题的functions.php文件中或代码片段插件中的示例代码：
<?php
function wpb_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' );
?>我们首先通过wp_register_script()函数注册我们的脚本。这个函数接受5个参数：
- handle – 这是脚本的唯一名称。
- src – 这是脚本的位置，我们使用
plugins_url函数来获取插件文件夹的正确URL。 - deps – 这是依赖关系。由于我们的脚本使用了jQuery，我们在依赖关系区域添加了jQuery。
- ver – 这是脚本的版本号，这个参数不是必需的。
- in_footer – 我们希望在页脚加载脚本，所以我们将该值设置为
true。
在提供了wp_register_script中的所有参数后，我们可以在wp_enqueue_script中调用脚本，这就使一切都发生了。最后一步是使用wp_enqueue_scripts动作钩子实际加载脚本。由于这是示例代码，我们将其添加在所有内容的正下方。如果您将其添加到您的主题或插件中，那么可以在实际需要脚本的地方放置这个动作钩子。
在WordPress中正确排队加载样式
就像脚本一样，您也可以排队加载您的样式表。请看下面的示例：
<?php
function wpb_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' );
?>我们使用wp_enqueue_style来添加我们的样式表。请注意，我们为脚本和样式都使用了wp_enqueue_scripts动作钩子。尽管名字是wp_enqueue_scripts，这个函数适用于两者。
在上面的示例中，我们使用了plugins_url函数来指向我们想要排队加载的脚本或样式的位置。然而，如果您在主题中使用这些函数，那么简单地使用get_template_directory_uri()来代替。如果您在使用子主题，请使用get_stylesheet_directory_uri()。以下是示例代码：
<?php
function wpb_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中正确添加JavaScript和样式。您可能还想研究一些顶级WordPress插件的源代码以获得一些实际的代码示例，或者查看我们关于如何轻松地在WordPress帖子或页面中添加JavaScript的指南。
