136

我阅读了 Codex 和一些关于在 WordPress 中使用 jQuery 的博客文章，这非常令人沮丧。我已经在functions.php文件中加载了 jQuery，但是所有的指南都很糟糕，因为他们假设你已经有大量的 WordPress 经验。例如，他们说现在我正在通过functions.php文件加载 jQuery，现在我所要做的就是加载我的 jQuery。

我该怎么做？具体来说，我要向哪些文件添加代码？我究竟如何为单个 WordPress 页面添加它？

4

19 回答 19

219

我知道你对教程的意思。这是我的做法：

首先，您需要编写脚本。在您的主题文件夹中创建一个名为“js”之类的文件夹。在该文件夹中为您的 javascript 创建一个文件。例如你的脚本.js。将您的 jQuery 脚本添加到该文件（您不需要<script>.js 文件中的标签）。

这是您的 jQuery 脚本（在 wp-content/themes/your-theme/js/your-scrript.js 中）的外观示例：

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

请注意，我在函数开头使用的是 jQuery 而不是 $。

好的，现在打开你的主题的functions.php 文件。您将需要使用该wp_enqueue_script()功能，以便您可以添加脚本，同时告诉 WordPress 它依赖于 jQuery。以下是如何做到这一点：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

假设您的主题在正确的位置有 wp_head 和 wp_footer，这应该可以工作。如果您需要更多帮助，请告诉我。

可以在WordPress Answers上询问 WordPress 问题。

于 2012-08-19T09:23:00.983 回答
54

经过大量搜索，我终于找到了适用于最新 WordPress 的东西。以下是要遵循的步骤：

  1. 找到您的主题目录，在该目录中为您的自定义 js 创建一个文件夹（本例中为 custom_js）。
  2. 将您的自定义 jQuery 放在此目录中的 .js 文件中（本示例中为 jquery_test.js）。

  3. 确保您的自定义 jQuery .js 看起来像这样：

    (function($) {
$(document).ready(function() {
$('.your-class').addClass('do-my-bidding');
})
})(jQuery);

  4. 进入主题目录，打开functions.php

  5. 在顶部附近添加一些代码，如下所示：

    //this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
   wp_register_script('custom_script',
   get_template_directory_uri() . '/custom_js/jquery_test.js',
   array('jquery'),
   '1.0' );
 // enqueue the script
  wp_enqueue_script('custom_script');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');
  6. 检查您的网站以确保它有效！
于 2014-02-27T01:37:10.860 回答
10

如果您使用 wordpress子主题为您的主题添加脚本，您应该将 get_template_directory_uri 函数更改为 get_stylesheet_directory_uri，例如：

家长主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

儿童主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri : /your-site/wp-content/themes/ parent-theme

get_stylesheet_directory_uri : /your-site/wp-content/themes/ child-theme

于 2015-02-24T09:57:48.733 回答
6

您可以在主题的 function.php 文件中添加 jQuery 或 javascript。代码如下：

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

有关更多详细信息，请访问本教程： http: //www.codecanal.com/add-simple-jquery-script-wordpress/

于 2015-07-07T05:23:26.217 回答
4

除了通过函数放入脚本之外，您还可以“只是”在任何模板中的页眉、页脚中包含一个链接（即链接 rel 标记）。你只需要确保路径是正确的。我建议使用这样的东西（假设你在你的主题目录中）。

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

一个好的做法是在结束正文标记之前或至少在您的页脚之前包含此内容。您还可以使用 php 包含或其他几种方法来拉入此文件。

<script type="javascript"><?php include('your-file.js');?></script>
于 2014-02-27T01:45:52.950 回答
3

**#方法一：**尝试把你的jquery代码放在一个单独的js文件中。

现在在 functions.php 文件中注册该脚本。

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

现在你完成了。

在函数中注册脚本有好处，因为它在<head>页面加载时出现在部分中，因此它始终是 header.php 的一部分。因此，您不必每次编写新的 html 内容时都重复您的代码。

#方法2：将脚本代码放在页面正文中的<script>tag下。然后你不必在函数中注册它。

于 2014-07-29T19:35:04.540 回答
3

您可以使用此插件添加自定义 javascript 或 jquery。
https://wordpress.org/plugins/custom-javascript-editor/

使用 jQuery 时不要忘记使用 jquery noconflict 模式

于 2015-05-12T10:34:55.327 回答
3 
function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
于 2020-05-19T08:59:41.513 回答
3

我看到的解决方案是从将 javascript 功能添加到主题的角度来看的。但是，OP 特别问：“我究竟如何为单个WordPress 页面添加它？” 这听起来可能是我在我的 Wordpress 博客中使用 javascript 的方式，其中个别帖子可能有不同的 javascript 驱动的“小部件”。例如，一篇文章可能会让用户更改变量（滑块、复选框、文本输入字段），并绘制或列出结果。

从 JavaScript 角度出发：

  1. 在单独的“.js”文件中编写 JavaScript 函数

甚至不要考虑在您的帖子的 html 中包含重要的 JavaScript — 使用您的代码创建一个或多个 JavaScript 文件。

  1. 将您的 JavaScript 与您的帖子的 html 接口

如果您的 JavaScript 小部件与 html 控件和字段交互，您将需要了解如何从 JavaScript 查询和设置这些元素，以及如何让 UI 元素调用您的 JavaScript 函数。这里有几个例子；首先，来自 JavaScript：

var val = document.getElementById(“AM_Freq_A_3”).value;

从html：

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. 使用 jQuery 调用 JavaScript 小部件的初始化函数

将此添加到您的 .js 文件中，使用在页面准备好时配置和绘制 JavaScript 小部件的函数的名称：

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. 在您的帖子的 html 代码中，加载您的帖子所需的脚本

在 Wordpress 代码编辑器中，我通常会在文章末尾指定脚本。例如，我的主目录中有一个脚本文件夹。在里面我有一个实用程序目录，其中包含我的一些帖子可能共享的常用 JavaScript — 在本例中是我自己的一些数学实用程序函数和 flotr2 绘图库。我发现将特定于帖子的 JavaScript 分组到另一个目录中更方便，例如，使用基于日期的子目录而不是使用媒体管理器。

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
  1. 入队 jQuery

Wordpress 注册了 jQuery，但它不可用，除非你通过排队告诉 Wordpress 你需要它。如果不这样做，jQuery 命令将失败。许多来源告诉您如何将此命令添加到您的functions.php，但假设您知道一些其他重要细节。

首先，编辑主题是个坏主意——主题的任何未来更新都会消除您所做的更改。制作一个儿童主题。就是这样：

https://developer.wordpress.org/themes/advanced-topics/child-themes/

子主题的functions.php 文件不会覆盖父主题的同名文件，而是添加到该文件中。子主题教程建议如何将父子样式.css 文件排入队列。我们可以简单地在该函数中添加另一行来将 jQuery 加入队列。这是子主题的整个functions.php文件：

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}
于 2019-11-25T08:15:05.647 回答
3

这里有很多教程和答案如何将脚本添加到页面中。但是我找不到的是如何构造该代码以使其正常工作。这是因为在这种形式的 JQuery 中没有使用 $。

所以这是我的代码，您可以将其用作模板。

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});
于 2017-01-19T20:23:32.870 回答
3

从这里回答：https ://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

尽管 WordPress 已经存在了一段时间，并且向主题和插件添加脚本的方法多年来一直是相同的，但对于应该如何添加脚本仍然存在一些混淆。所以让我们把它弄清楚。

由于 jQuery 仍然是最常用的 Javascript 框架，让我们来看看如何将简单的脚本添加到您的主题或插件中。

jQuery的兼容模式

在我们开始将脚本附加到 WordPress 之前，让我们看一下 jQuery 的兼容模式。WordPress 预装了一个 jQuery 副本，您应该将其与您的代码一起使用。WordPress 的 jQuery 在加载时使用的是兼容模式，这是一种避免与其他语言库冲突的机制。

这归结为您不能像在其他项目中那样直接使用美元符号。在为 WordPress 编写 jQuery 时，您需要改用 jQuery。看看下面的代码，看看我的意思：

于 2016-12-22T07:47:31.333 回答
2

在不使用 wp_enqueue_script 的情况下，在 functions.php 文件中（在您的主题/子主题上）添加脚本的最简单方法是：

// CREATE WORDPRESS ACTION ON FOOTER
add_action('wp_footer', 'customJsScript');

function customJsScript() {
  echo '
  <script>
  // YOUR JS SCRIPT
  jQuery(function(){
    console.log("test");
  });
  </script>
  ';
}

如您所见，您使用 wp_footer 操作来注入代码。

如果您大量使用它或者您必须与其他插件“交谈”等，这可能不是一个好习惯。但这是最快的方法！

您也可以直接将 Javascript 代码放在 header.php 或 footer.php 中，如果是将插入整个 WordPress 的代码

于 2020-10-21T09:52:55.187 回答
2

“我们有谷歌”引用。为了在 wordpress 中正确使用脚本，只需添加托管库。像谷歌一样

在选择了您需要在自定义脚本之前链接它的库之后：exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

在你自己的脚本之后

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>
于 2016-01-15T11:48:46.147 回答
1

您可以使用 WordPress 预定义函数将脚本文件添加到 WordPress 插件。

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

查看这篇文章，它可以帮助您了解在 WordPress 插件中实现 jQuery 和 CSS 是多么容易。

于 2014-05-02T07:29:39.133 回答
1

你可以把你的脚本写在另一个文件中。假设你的脚本名称是image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true );

代替/js/image-ticker.js您应该放置您的js文件路径。

于 2016-03-30T06:52:59.097 回答
1

在 WordPress 中，将脚本包含在您的网站中的正确方法是使用以下函数。

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

这些函数在钩子内部调用wp_enqueue_script。

有关更多详细信息和示例，您可以查看使用 wp_register_script 和 wp_enqueue_script 在 Wordpress 中添加 JS 文件

例子：

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );
于 2019-02-15T21:11:25.350 回答
1

除了通过函数放入脚本之外，您还可以“只是”在任何模板中的页眉、页脚中包含一个链接（即链接 rel 标记）。

不，您永远不应该在 WordPress 中像这样添加指向外部脚本的链接。通过 functions.php 文件将它们排入队列可确保以正确的顺序加载脚本。

未能将它们排入队列可能会导致您的脚本无法正常工作，尽管它是正确编写的。

于 2016-02-13T18:38:34.957 回答
0

你只需要加载jquery吗？

1）就像其他指南所说，在你的functions.php文件中注册你的脚本，如下所示：

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) 请注意，我们不需要注册 jQuery，因为它已经在核心中。确保在您的footer.php 中调用了wp_footer() 并在您的header.php 中调用了wp_head()（这是它将输出脚本标签的地方），并且jQuery 将在每个页面上加载。当您使用 WordPress 将 jQuery 加入队列时，它将处于“无冲突”模式，因此您必须使用 jQuery 而不是 $。如果需要，您可以取消注册 jQuery 并通过执行 wp_deregister_script('jquery') 重新注册自己的。

于 2012-06-22T17:01:17.740 回答
0

我在这里的所有其他答案都遇到了一些严重的问题，所以对于那些想要更新解决方案的人来说，这是我的补充。

我知道这并不完全是 OP 所要求的，因为它使用了简码，但这是我可以使它工作的唯一方法，并且它具有仅在页面包含简码时才具有该功能的额外好处。这不使用wp_enqueue_script()也不add_action()功能。

我使用Code Snippets插件，这意味着无需摆弄 functions.php 并创建新的 .js 文件。

在简码中，像这样回显 jQuery 函数：

echo '<script type="text/javascript">
    jQuery(document).ready(function($) {

        //your jQuery code goes here.
        
    });

    </script>';
于 2021-10-01T11:47:32.200 回答