在本教程中，我们将使用排队过程添加jQuery脚本文件，并将jQuery添加到您的WordPress页脚和标题中。

如果您在线搜索如何将jQuery脚本添加到WordPress，您将获得大量的结果。但是，如果你不是程序员或者不熟悉WordPress，你可能会发现在线资源有点难以理解。这是我们进来的地方。在今天的文章中，我们将展示如何将jQuery脚本添加到WordPress。但是，在开始之前，我们来看看jQuery和WordPress。

jQuery

jQuery的流行是惊人的。那么为何不？它为开发人员开发Web应用程序提供了额外的优势。它也是最受欢迎的JavaScript库之一。这是一个较小的图书馆，也减少了加载时间。总之，为了加速WordPress，你需要使用jQuery。

使用jQuery可以快速完成诸如DOM操作，AJAX调用，动画和其他任务。简而言之，它有助于网站的发展。它是轻量级的，提供了更全面的插件，也适用于WordPress。

最初，WordPress不支持jQuery。然而，jQuery的普及和开发者的需求使得WordPress最终在他们的平台中包含了jQuery。它首次在WordPress 3.8.1中引入。之后，它几乎用于所有主题和插件。

如果您不确定如何开始使用jQuery，或者不知道如何将jQuery脚本添加到WordPress，我们将帮助您做到这一点。所以，没有任何进一步的延迟，让我们开始吧。

注意：我们建议不要在实时网站上尝试此操作。在上线之前试用你的本地WordPress安装。您也可以在尝试更改您网站上的任何代码之前创建备份！

如何添加jQuery脚本到WordPress

1.了解兼容模式

在WordPress中使用jQuery之前，我们需要了解兼容模式。由于WordPress是一个内容管理系统，它必须考虑整个系统内不同插件和主题之间的兼容性。为了确保jQuery按照预期工作并且不干扰其他插件，我们使用兼容模式。换句话说，它是确保它不与其他图书馆冲突的一种方法。

为了使兼容性有效，您不能$ 在代码中使用 符号。相反，你需要使用 jQuery。我们来看看下面的例子。

jQuery(document).ready(function($) {

$('#nav a').last().addClass('last');

})

下面给出了在没有兼容模式的情况下编写相同的代码。

$(document).ready(function($) {

$('#nav a').last().addClass('last');

})

基本上，该$ 标志的任何实例都 应该替换 jQuery 为使代码能够与Wordpress一起使用。

2.如何带回$符号来写WordPress的jQuery

这是一个众所周知的事实，使用jQuery 每一次，而不是 $ 一个开发人员可能是一个令人沮丧的经历。此外，它使代码不必要的长。不过，$如果我们做一些调整，我们可以使用这个 标志。

在我们分享这个调整之前，让我们回顾一下jQuery sytax是如何工作的。如下所示。

$(selector).action()

$：美元符号告诉解释器它是jQuery。(selector)：它表示它需要找到的HTML元素。它充当查询。action()：将在元素上执行的函数

现在，我们了解基本语法，让我们看看映射jQuery到 的代码 $。

(function($) {

$('.hideable').on('click', function() {

$(this).hide();

})

})( jQuery );

您需要将代码包装在匿名函数中。它只能在页脚中使用。

您需要将整个代码封装在文档就绪函数中，如下所示，以使jQuery在标头中工作。

jQuery(document).ready(function( $ ) {

$('.hideable').on('click', function() {

$(this).hide();

})

});

但是，我们不建议在标题中使用jQuery插件，因为这可能会降低您的网站速度。

3.创建您的脚本文件

由于每次都无法将jQuery推送到页脚和头文件，因此应该创建脚本文件并将它们集成到一起。为此，您首先需要创建一个JavaScript文件。该文件需要放入您打算使用的主题文件夹中。您还可以将文件保存在“.js”文件夹中，以保持干净和易于访问。

对于本教程，让我们命名文件“script_new.js”。它需要放置在主题文件夹的子文件夹中。那么，路径将如何看待？它将是theme / js / script_new.js。

该脚本可以是任何操作简单的HTML元素，以在屏幕上打印出“Hello，World”。这一切都取决于你想要做什么。

4.找到functions.php文件

在我们继续前进之前，我们建议您 创建一个儿童主题。儿童主题将确保您的主要主题文件保持安全。但是，在创建它之前，请检查父主题是否已包含jQuery函数。

一旦完成，我们需要找到functions.php文件。这是所有魔法都会发生的文件。如果您无法找到任何名为“functions.php”的文件，请随时创建一个。

现在，将script_new.js文件加载到每个页面的标题; 您还需要在您的functions.php文件中添加以下代码。

<?php

function add_custom_script() {

wp_register_script('custom_script', home_url() . '/wp-content/themes/theme/js/script_new.js', array( 'jquery' ), ‘1.0.0’, true);

wp_enqueue_script('custom_script');

}

add_action( 'wp_enqueue_scripts', 'add_custom_script' );

?>

上面的代码拉你的脚本文件并将其排入WordPress。这个过程被称为排队。

5.使用插件来实现结果

尽管我们建议手动集成jQuery，但您也可以使用插件来实现。我们建议的插件是Posts帖子中的jQuery。该插件是轻量级和直接的。您将可以毫无困难地使用它。使用此插件，您可以将自定义jQuery和JavaScript代码添加到您网站的任何页面，帖子或自定义帖子类型中。

您只需将自定义代码添加到插件代码编辑器即可。免费版本只支持jQuery和JavaScript，但你也可以试用PRO版本，它有更多的功能，包括CSS。

结论

我们希望你喜欢这个教程。在本教程中，我们使用排队过程添加了jQuery脚本文件。我们还讨论了如何在WordPress主题的页眉和页脚中添加jQuery代码。此外，我们还介绍了使用称为“帖子页面中的jQuery”的简单插件添加jQuery代码。