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

Properly adding JavaScripts and styles in WordPress

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

许多新的WordPress插件和主题开发人员错误地将他们的脚本或内联CSS直接添加到他们的插件和主题中。

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

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

虽然上面的代码看起来更容易，但是在WordPress中添加脚本是错误的方式，并且它将来会导致更多的冲突。

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

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

话虽这么说，让我们来看看添加脚本和样式表的正确方法。

为什么要在WordPress中排队脚本和样式？

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

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

通过使用wp_enqueue_script和wp_enqueue_style函数，您可以告诉WordPress何时加载文件，加载文件的位置以及它的依赖项。

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

如何在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" );  
?>

说明：Shuōmíng:

我们首先通过注册我们的脚本wp_register_script（）功能。此函数接受5个参数：

  • $处理 – Handle是脚本的唯一名称。我们的名字叫“my_amazing_script”
  • $ SRC – src是脚本的位置。我们使用plugins_url函数来获取plugins文件夹的正确URL。一旦WordPress发现，那么它将在该文件夹中查找我们的文件名amazing_script.js。
  • $ DEPS – deps是为了依赖。由于我们的脚本使用jQuery，因此我们在依赖区域中添加了jQuery。如果没有在网站上加载jQuery，WordPress将自动加载jQuery。
  • $版本 – 这是我们脚本的版本号。此参数不是必需的。
  • $ in_footer – 我们想在页脚中加载脚本，所以我们将值设置为true。如果要在标题中加载脚本，则将其设为false。

提供了所有参数后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_script，我们现在正在使用wp_enqueue_style添加我们的样式表。

请注意我们已经使用过wp_enqueue_scripts样式和脚本的动作钩子。尽管名称，这个功能适用于两者。

在上面的例子中，我们使用过plugins_url函数指向我们想要入队的脚本或样式的位置。

但是，如果您在主题中使用enqueue脚本函数，那么只需使用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插件的源代码，以获取一些真实的代码示例。

评论被关闭。