wordpress添加媒体_如何在WordPress中正确添加JavaScript和样式

wordpress添加媒体

Do you want to learn how to properly add JavaScripts and CSS stylesheets in WordPress? Many DIY users often make the mistake of directly calling their scripts and stylesheets in plugins and themes. In this article, we will show you how to properly add JavaScripts and stylesheet in WordPress. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.

您是否想学习如何在WordPress中正确添加JavaScript和CSS样式表？ 许多DIY用户经常犯直接在插件和主题中调用其脚本和样式表的错误。 在本文中，我们将向您展示如何在WordPress中正确添加JavaScript和样式表。 对于刚开始学习WordPress主题和插件开发的人员来说，这将特别有用。

在WordPress中添加脚本和样式表时的常见错误 (Common Mistake When Adding Scripts and Stylesheets in WordPress)

Many new WordPress plugins 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';
}
?>

While the above code may seem easier, it is the wrong way of adding scripts in WordPress, and it leads to more conflicts in the future.

尽管上面的代码似乎更容易，但这是在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 speed and performance.

例如，如果您手动加载jQuery，而另一个插件通过适当的方法加载jQuery，则jQuery将被加载两次。 如果将其加载到每个页面上，则将对WordPress的速度和性能产生负面影响。

It is also possible that the two are different versions which can also cause conflicts.

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

That being said, let’s take a look at the right way of adding scripts and stylesheets.

话虽如此，让我们看一下添加脚本和样式表的正确方法。

为什么要在WordPress中加入脚本和样式？ (Why Enqueue Scripts and Styles in WordPress?)

WordPress has a strong developer community. Thousands of people from around the world develop themes and plugins for WordPress.

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

To make sure that everything works properly, and no one is stepping on another’s toes, WordPress has an enqueuing system. This system provides a programmable way of loading JavaScripts and CSS stylesheets.

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

By using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load a file, where to load it, and what are its dependencies.

通过使用wp_enqueue_script和wp_enqueue_style函数，您可以告诉WordPress何时加载文件，在何处加载文件以及其依赖项。

This system also allow developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This reduces page load time and helps avoid conflicts with other themes and plugins.

该系统还允许开发人员利用与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 functions.php file to properly load scripts in WordPress.

在WordPress中正确加载脚本非常容易。 以下是示例代码，您可以将它们粘贴到插件文件或主题的functions.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' );  
?>

Explanation:

说明：

We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

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

• $handle – Handle is the unique name of your script. Ours is called “my_amazing_script”$ handle – 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 – 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 – deps用于依赖。 由于脚本使用jQuery，因此我们在依赖项区域中添加了jQuery。 如果尚未在站点上加载WordPress，则WordPress将自动加载jQuery。
• $ver – This is the version number of our script. This parameter is not required.$ ver –这是脚本的版本号。 不需要此参数。
• $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 action hook to actually load the script. Since this is an example code, we have added that right below everything else.

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

If you were adding this to your theme or plugin, then you can place this action hook where the script is actually required. This allows you to reduce the memory footprint of your plugin.

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

Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows other site owners to deregister your script without modifying the core code of your plugin.

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

正确地在WordPress中加入样式 (Properly Enqueue Styles in WordPress)

Just like scripts, you can also enqueue your stylesheets. Look at the example below:

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

<?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() 。

Below is an example code:

下面是一个示例代码：

<?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 top WordPress plugins for some real life code examples.

我们希望本文能帮助您学习如何在WordPress中正确添加jacvascript和样式。 您可能还想研究顶级WordPress插件的源代码，以获得一些真实的代码示例。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

wordpress添加媒体