如何在WordPress中正确添加Java脚本和样式

您想了解如何在WordPress中正确添加Java脚本和CSS样式表吗？

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

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

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

许多新的WordPress插件和主题开发人员犯了一个错误，直接将他们的脚本或内嵌的CSS添加到他们的插件和主题中。

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

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

由❤️托管WPCode在WordPress中一键使用

虽然上面的代码可能看起来更简单，但它是在WordPress中添加脚本的错误方式，而且它会在未来导致更多冲突。

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

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

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

为什么在WordPress中加入脚本和样式？

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

为了确保一切工作正常，没有人踩到别人的脚趾，WordPress有一个排队系统。该系统提供了一种可编程的方式来加载Java脚本和CSS样式表。

通过使用wp_enQueue_script和wp_enQueue_style函数，您可以告诉WordPress何时加载文件、将其加载到何处以及它的依赖项是什么。

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

如何在WordPress中正确地将脚本入队？

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

由❤️托管WPCode在WordPress中一键使用

解释：

我们首先通过wp_register_script()功能。此函数接受5个参数：

$Handle-Handle是您的脚本的唯一名称。我们的剧本叫《我的惊艳剧本》$src-src是脚本的位置。我们使用plugins_url函数来获取插件文件夹的正确URL。一旦WordPress找到它，它就会在该文件夹中查找我们的文件名AJAZING_SIPT.js。$deps-deps用于依赖。因为我们的脚本使用jQuery，所以我们在依赖项区域中添加了jQuery。如果jQuery还没有加载到网站上，WordPress会自动加载。美元-这是我们脚本的版本号。此参数不是必需的。$in_footer-我们希望将脚本加载到页脚中，因此我们已将值设置为True。如果您想要在头文件中加载脚本，那么您可以将其设置为FALSE。

中提供了所有参数之后wp_register_script，我们只需调用脚本即可wp_enqueue_script()这让一切都发生了。

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

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

现在，有些人可能会问，为什么我们要先注册脚本，然后再将其排队？好的，这允许其他站点所有者在不修改插件核心代码的情况下取消注册您的脚本。

在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' );  
?>

由❤️托管WPCode在WordPress中一键使用

与其使用wp_enqueue_script，我们现在正在使用wp_enqueue_style来添加我们的样式表。

请注意，我们使用了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' );  
?>

由❤️托管WPCode在WordPress中一键使用

我们希望这篇文章能帮助你学习如何在WordPress中正确添加脚本和样式。你可能还想研究一下顶级WordPress插件的源代码，以获得一些现实生活中的代码例子，或者看看我们的指南，告诉你如何选择最好的网页设计软件。

更多wp网站技巧请关注我们。

标签：脚本样式正确如何在JavaWordPress