宁波小程序开发：如何在WordPress中正确添加JavaScripts和样式

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

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

许多新的WordPress插件和主题开发人员错误地将他们的脚本或内联CSS直接添加到他们的插件和主题中。 有些人错误地使用该wp_head函数来加载他们的脚本和样式表。 虽然上面的代码看起来更容易，但是在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中正确加载脚本。 说明： 我们首先通过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。
• $ ver – 这是我们脚本的版本号。此参数不是必需的。
• $ in_footer – 我们想在页脚中加载脚本，所以我们将值设置为true。如果要在标题中加载脚本，则将其设为false。

在提供了所有参数之后wp_register_script，我们可以调用wp_enqueue_script()使一切发生的脚本。 最后一步是使用wp_enqueue_scripts 动作钩子来实际加载脚本。由于这是一个示例代码，我们已将其添加到其他所有内容之下。 如果要将其添加到主题或插件中，则可以将此操作挂钩放置在实际需要脚本的位置。这样可以减少插件的内存占用。 现在有些人可能想知道为什么我们要先采取额外步骤来注册脚本然后将其排队？好吧，这允许其他网站所有者取消注册您的脚本，而无需修改插件的核心代码。

在WordPress中正确排队样式

就像脚本一样，您也可以将样式表排入队列。看下面的例子： wp_enqueue_script我们现在使用wp_enqueue_style添加样式表而不是使用。 请注意，我们已经wp_enqueue_scripts为样式和脚本使用了动作钩子。尽管名称，这个功能适用于两者。 在上面的例子中，我们使用plugins_url函数指向我们想要排队的脚本或样式的位置。 但是，如果您在主题中使用入队脚本功能，则只需使用get_template_directory_uri()。如果您正在使用子主题，请使用get_stylesheet_directory_uri()。 下面是一个示例代码： 我们希望本文能帮助您学习如何在WordPress中正确添加jacvascript和样式。您可能还想研究顶级WordPress插件的源代码，以获取一些真实的代码示例。