如何向 WordPress 添加一个简单的 jQuery 脚本？

Posted 2023-02-19

【中文标题】如何向 WordPress 添加一个简单的 jQuery 脚本？

【英文标题】：How do I add a simple jQuery script to WordPress?

【发布时间】：2012-06-24 23:14:54

【问题描述】：

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

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

【问题讨论】：

你有什么尝试让你觉得所有的指南都很糟糕？

在which指南的which步骤中您遇到了which问题？

你能具体点吗？您尝试了什么但没有奏效？

我同意 @Citizen 的观点，首先了解如何使用 wordpress 是一个雷区，因为在网上找到的一些指南中对初学者的说明不是很详尽。

查看以下链接：wpseoblogs.com/how-to-add-javascript-code-when-published-post

【参考方案1】：

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

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

这是一个示例，说明您的 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 问题可以通过WordPress Answers 提出。

【讨论】：

我必须添加 add_action( 'wp_enqueue_scripts', 'add_my_script' );让它加载，但它仍然是最清晰的答案。

您在哪个文件中添加了它？ @EleMunjeli

感谢 Ele Munjeli 提供有关 add_action 的提示。另外：如果您正在使用子主题，请改用 get_stylesheet_directory_uri。

谢谢伙计。你拯救了我你剪断的日子对我来说非常有效

即使在此之后，我仍然收到 Uncaught TypeError: Cannot read property 'fn' of undefined 和 Uncaught TypeError: undefined is not a function 错误，即使函数文件中正在排队另一个脚本，并且工作正常

【参考方案2】：

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

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

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

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

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

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

//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');

检查您的网站以确保其正常运行！

【讨论】：

谢谢，这对我帮助很大！对于使用子主题的任何人，请使用 get_stylesheet_directory_uri() 代替 get_template_directory_uri()

感谢斯坦的逐步解释！ （以及关于将其与子主题一起使用的说明，@DavidTaiaroa）

这很好用，但我只需要它在特定页面上触发。有没有办法修改它，使它只在页面上触发？还是该行为需要完全不同的 WP 功能？

什么时候我可以让 jquery 进入我的页面，但我也在控制台中收到一个错误，这似乎不会导致任何严重问题： GET australiana.auspro.com.au/wp-content/themes/twentytwenty/assets/… net::ERR_ABORTED 404 (Not Found) 怎么能我摆脱它？

【参考方案3】：

如果您使用 wordpress child theme 为您的主题添加脚本，您应该将 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

【参考方案4】：

您可以在主题的 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/

【参考方案5】：

除了通过函数放入脚本之外，您还可以“只是”在任何模板中的页眉、页脚中包含一个链接（即链接 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>

【讨论】：

这是 2019 年的不良做法。

同意，但这是 5 年前写的。排队，当然不是最好的做法。

值得指出，因为这篇文章在 Google 上非常显眼。我讨厌有人来这里并开始使用不良做法，因为他们偶然发现了一个旧的问答。

【参考方案6】：

**#方法一：**尽量把你的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 内容时都重复代码了。

#方法二：将脚本代码放在页面正文中<script>标签下。那么你就不必在函数中注册了。

【讨论】：

方法二是玩火。

【参考方案7】：

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

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

【参考方案8】：

这里有很多教程和答案如何将脚本添加到页面中。但是我找不到的是如何构造该代码以使其正常工作。这是因为在这种形式的 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);
  );
);

【参考方案9】：

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

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

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

jQuery 的兼容模式

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

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

【参考方案10】：

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

从 JavaScript 角度出发：

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

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

将 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);'/>

使用 jQuery 调用 JavaScript 小部件的初始化函数

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

jQuery(document).ready(function( $ ) 
    your_init_function();
);

在帖子的 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>

让 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');

【讨论】：

另一种选择是使用 javascript 管理器插件。这对某些人来说可能是一个好方法，但我不喜欢依赖许多插件和更新。

【参考方案11】：

function xyz_scripts() 
    wp_enqueue_script('jquery');

add_action('wp_enqueue_scripts', 'xyz_scripts');

【讨论】：

这为我解决了。 jQuery 仅适用于登录用户 - 否则无法正确加载。有了这个脚本，它现在可以为所有用户加载——即使没有登录。谢谢！

【参考方案12】：

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

在您需要在自定义脚本之前链接它的选定库之后：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>

【参考方案13】：

不使用 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 的代码

【参考方案14】：

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

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

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

【参考方案15】：

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

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

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

【参考方案16】：

您可以在另一个文件中编写脚本。然后像这样将您的文件排入队列 假设您的脚本名称是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 文件路径。

【参考方案17】：

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

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

这些函数在钩子wp_enqueue_script中被调用。

更多细节和例子可以查看Adding JS files in Wordpress using wp_register_script & wp_enqueue_script

例子：

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

【参考方案18】：

只需要加载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') 重新注册自己的。

【讨论】：

不，这部分我已经弄清楚了。加载 jquery 很容易。我需要知道的是要将我的 jquery 代码添加到哪个文件，以及如何添加。

放入 wp_enqueue_script('脚本名称');在您希望该脚本在其下排队的模板的 get_header() 之前。

【参考方案19】：

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

我知道这并不是 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>';