如何在WordPress中正确添加JavaScript和样式

2020-06-24
WordPress

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

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

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

一些人错误地使用该wp_head函数加载其脚本和样式表。

<?phpadd_action('wp_head', 'wpb_bad_script');functionwpb_bad_script() {echo'jQuery goes here';}?>

尽管上面的代码似乎更容易，但这是在WordPress中添加脚本的错误方法，并且将来会导致更多冲突。

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

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

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

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

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

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

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

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

如何在WordPress中正确排队脚本？

在WordPress中正确加载脚本非常容易。以下是示例代码，您可以将其粘贴到插件文件或主题的functions.php文件中，以正确加载WordPress中的脚本。

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

说明：

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

$ handle – Handle是脚本的唯一名称。我们的被称为“ my_amazing_script”
$ src – src是脚本的位置。我们正在使用plugins_url函数来获取我们的plugins文件夹的正确URL。一旦WordPress找到了，它将在该文件夹中寻找我们的文件名amazing_script.js。
$ deps – deps用于依赖。由于我们的脚本使用jQuery，因此我们在依赖项区域中添加了jQuery。如果尚未在站点上加载WordPress，WordPress将自动加载jQuery。
$ ver –这是脚本的版本号。不需要此参数。
$ in_footer –我们希望将脚本加载到页脚中，因此我们将值设置为true。如果要在标题中加载脚本，则将其设置为false。

在中提供了所有参数之后wp_register_script，我们可以调用wp_enqueue_script()使一切发生的脚本。

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

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

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

正确地在WordPress中加入样式

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

<?phpfunctionwpb_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函数来指向要排队的脚本或样式的位置。

但是，如果您在主题中使用入队脚本功能，则只需使用即可get_template_directory_uri()。如果您正在使用儿童主题，请使用get_stylesheet_directory_uri()。

以下是示例代码：

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