WordPress 添加媒体
您想了解如何在 WordPress 中正确添加 JavaScript 和 CSS 样式表吗？许多 DIY 用户经常犯在插件和主题中直接调用脚本和样式表的错误。在本文中，我们将向您展示如何在 WordPress 中正确添加 JavaScript 和样式表。这对于那些刚刚开始学习 WordPress 主题和插件开发的人来说特别有用。
您想了解如何在 WordPress 中正确添加 JavaScript 和 CSS 样式表吗？许多 DIY 用户经常犯这样的错误：直接在插件和主题中调用脚本和样式表。在本文中，我们将向您展示如何在 WordPress 中正确添加 JavaScript 和样式表。这对于刚刚开始学习 WordPress 主题和插件开发的人来说特别有用。
在WordPress中添加脚本和样式表时的常见错误 （Common Mistake When Adding Scripts and Stylesheets in WordPress）
Many new WordPress 插件 and theme developers make the mistake of directly adding their scripts or inline CSS into their plugins and themes.
许多新的WordPress 插件和主题开发人员犯了直接将其脚本或内联CSS添加到其插件和主题中的错误。
Some mistakenly use the wp_head function to load their scripts and stylesheets.
有些人错误地使用wp_head函数加载其脚本和样式表。
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
虽然上面的代码看起来更简单，但这是在 WordPress 中添加脚本的错误方法，并且会导致将来出现更多冲突。
虽然上面的代码看起来更简单，但这是在 WordPress 中添加脚本的错误方法，并且将来会引起更多冲突。
For example, if you load jQuery manually and another plugin loads jQuery through the proper method, then you have jQuery being loaded twice. If it is loaded on every page, then this will negatively affect WordPress 的速度和性能.
例如，如果您手动加载jQuery，而另一个插件通过适当的方法加载jQuery，则jQuery将被加载两次。 如果将其加载到每个页面上，则将对WordPress 的速度和性能产生负面影响。
也有可能两者是不同的版本，也可能导致冲突。
两者可能是不同的版本，这也可能会造成冲突。
话虽这么说，让我们看看添加脚本和样式表的正确方法。
话虽如此，让我们看看添加脚本和样式表的正确方法。
为什么要在WordPress中加入脚本和样式？ （Why Enqueue Scripts and Styles in WordPress?）
WordPress 拥有强大的开发者社区。来自世界各地的数千人为 WordPress 开发主题和插件。
WordPress 拥有强大的开发者社区。来自世界各地的数千人为 WordPress 开发主题和插件。
为了确保一切正常运行，并且没有人踩到别人的脚趾，WordPress 有一个排队系统。该系统提供了加载 JavaScript 和 CSS 样式表的可编程方式。
为了确保一切正常运行并且没有人打扰彼此，WordPress 有一个排队系统。该系统提供了一种加载 JavaScript 和 CSS 样式表的编程方式。
通过使用 wp_enqueue_script 和 wp_enqueue_style 函数，您可以告诉 WordPress 何时加载文件、加载文件的位置以及其依赖项是什么。
通过使用 wp_enqueue_script 和 wp_enqueue_style 函数，您可以告诉 WordPress 何时加载文件、加载文件的位置及其依赖项。
该系统还允许开发人员利用与 WordPress 捆绑在一起的内置 JavaScript 库，而不是多次加载相同的第三方脚本。这可以减少页面加载时间并有助于避免与其他主题和插件发生冲突。
该系统还允许开发人员利用与 WordPress 捆绑的内置 JavaScript 库，而无需多次加载相同的第三方脚本。这可以减少页面加载时间并有助于避免与其他主题和插件发生冲突。
如何在WordPress中正确排队脚本？ （How to Properly Enqueue Scripts in WordPress?）
Loading scripts properly in WordPress is very easy. Below is an example code that you would paste in your plugins file or in your theme’s 函数.php file to properly load scripts in WordPress.
在WordPress中正确加载脚本非常容易。 以下是示例代码，您可以将它们粘贴到插件文件或主题的函数.php文件中，以正确加载WordPress中的脚本。
?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' );
?>
解释：
阐明：
We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:
我们首先通过wp_register_script()函数注册脚本。 此函数接受5个参数：
- $句柄 – Handle is the unique name of your script. Ours is called “my_amazing_script”$句柄 – Handle是脚本的唯一名称。 我们的被称为“ my_amazing_script”
- $src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.$src – src是脚本的位置。 我们正在使用plugins_url函数来获取我们的plugins文件夹的正确URL。 一旦WordPress找到了，它将在该文件夹中寻找我们的文件名amazing_script.js。
- $部门 – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.$ 取决于 – deps用于依赖。 由于脚本使用jQuery，因此我们在依赖项区域中添加了jQuery。 如果尚未在站点上加载WordPress，则WordPress将自动加载jQuery。
- $ver – This is the version number of our script. This parameter is not required.$版本 –这是脚本的版本号。 不需要此参数。
- $in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would make it false.$in_footer –我们要将脚本加载到页脚中，因此我们将值设置为true。 如果要在标题中加载脚本，则将其设置为false。
After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.
在wp_register_script提供所有参数之后，我们只需在wp_enqueue_script()调用脚本wp_enqueue_script()一切。
The last step is to use wp_enqueue_scripts 动作挂钩 to actually load the script. Since this is an example code, we have added that right below everything else.
最后一步是使用wp_enqueue_scripts 动作挂钩实际加载脚本。 由于这是示例代码，因此我们将其添加到其他所有内容的正下方。
如果您要将其添加到主题或插件中，那么您可以将此操作挂钩放置在实际需要脚本的位置。这可以让您减少插件的内存占用。
如果您要将其添加到主题或插件中，则可以将此操作挂钩放置在实际需要脚本的位置。这可以让您减少插件的内存占用。
现在有些人可能想知道为什么我们要采取额外的步骤先注册脚本然后将其排队？好吧，这允许其他网站所有者注销您的脚本，而无需修改插件的核心代码。
现在，有些人可能想知道为什么我们要采取额外的步骤，首先注册脚本，然后将其排队？好吧，这允许其他网站所有者取消注册您的脚本，而无需修改插件的核心代码。
正确地在WordPress中加入样式 （Properly Enqueue Styles in 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' );
?>
Instead of using wp_enqueue_script, we are now using wp_enqueue_style to add our stylesheet.
现在wp_enqueue_style使用wp_enqueue_script ，而是使用wp_enqueue_script添加样式表。
Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Despite the name, this function works for both.
注意，我们已经将wp_enqueue_scripts操作钩用于样式和脚本。 尽管有名称，此功能对两者均适用。
In the examples above, we have used plugins_url function to point to the location of the script or style we wanted to enqueue.
在上面的示例中，我们使用了plugins_url函数来指向我们要排队的脚本或样式的位置。
However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are working with a child theme, then use get_stylesheet_directory_uri().
但是，如果在主题中使用入队脚本功能，则只需使用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' );
?>
We hope this article helped you learn how to properly add jacvascript and styles in WordPress. You may also want to study the source code of the 顶级 WordPress 插件 for some real life code examples.
我们希望本文能帮助您学习如何在WordPress中正确添加jacvascript和样式。 您可能还想研究顶级 WordPress 插件的源代码，以获得一些真实的代码示例。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/
WordPress 添加媒体