您想学习如何在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插件的源代码,以获取一些真实的代码示例。

猜您也想看看…

评论被关闭。