我阅读了 Codex 和一些关于在 WordPress 中使用 jQuery 的博客文章，这非常令人沮丧。我已经在functions.php 文件中加载了 jQuery，但是所有的指南都很糟糕，因为他们假设你已经有大量的 WordPress 经验。例如，他们说现在我正在通过 functions.php 文件加载 jQuery，现在我所要做的就是加载我的 jQuery。
我该如何做呢？具体来说，我要向哪些文件添加代码？如何为单个 WordPress 页面添加它？
【问题讨论】：
我知道你对教程的意思。这是我的做法：
首先，您需要编写脚本。在您的主题文件夹中创建一个名为“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 提出。
【讨论】：
Uncaught TypeError: Cannot read property 'fn' of undefined 和 Uncaught TypeError: undefined is not a function 错误，即使函数文件中正在排队另一个脚本，并且工作正常
经过大量搜索，我终于找到了适用于最新 WordPress 的内容。以下是要遵循的步骤：
确保您的自定义 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');
【讨论】：
如果您使用 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
【讨论】：
您可以在主题的 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/
【讨论】：
除了通过函数放入脚本之外，您还可以“只是”在任何模板中的页眉、页脚中包含一个链接（即链接 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>
【讨论】：
**#方法一：**尽量把你的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>标签下。那么你就不必在函数中注册了。
【讨论】：
您可以使用此插件添加自定义 javascript 或 jquery。
https://wordpress.org/plugins/custom-javascript-editor/
当你使用 jQuery 时不要忘记使用 jquery noconflict 模式
【讨论】：
这里有很多教程和答案如何将脚本添加到页面中。但是我找不到的是如何构造该代码以使其正常工作。这是因为在这种形式的 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);
});
});
【讨论】：
从这里回答：https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
尽管 WordPress 已经存在了一段时间，并且向主题和插件添加脚本的方法多年来一直是相同的，但对于应该如何添加脚本仍然存在一些混淆。所以让我们把它弄清楚。
由于 jQuery 仍然是最常用的 Javascript 框架，让我们来看看如何将简单的脚本添加到您的主题或插件中。
jQuery 的兼容模式
在我们开始将脚本附加到 WordPress 之前，让我们看看 jQuery 的兼容模式。 WordPress 预装了一个 jQuery 副本，您应该将其与您的代码一起使用。 WordPress 的 jQuery 加载时使用的是兼容模式，这是一种避免与其他语言库冲突的机制。
这归结为您不能像在其他项目中那样直接使用美元符号。在为 WordPress 编写 jQuery 时，您需要改用 jQuery。看看下面的代码，看看我的意思：
【讨论】：
我看到的解决方案是从将 javascript 功能添加到主题的角度来看的。但是，OP 具体问：“我该如何为 single WordPress 页面添加它？”这听起来可能是我在我的 Wordpress 博客中使用 javascript 的方式，其中个别帖子可能有不同的 javascript 驱动的“小部件”。例如，帖子可能会让用户更改变量（滑块、复选框、文本输入字段），并绘制或列出结果。
从 JavaScript 角度出发：
甚至不要考虑在您的帖子的 html 中包含重要的 JavaScript — 使用您的代码创建一个或多个 JavaScript 文件。
如果您的 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);'/>
将此添加到您的 .js 文件中，使用您的函数的名称，该函数在页面准备好时配置和绘制 JavaScript 小部件：
jQuery(document).ready(function( $ ) {
your_init_function();
});
在 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>
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');
}
【讨论】：
function xyz_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
【讨论】：
“我们有谷歌”引用。 为了在 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>
【讨论】：
不使用 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 的代码
【讨论】：
您可以使用 WordPress 预定义函数将脚本文件添加到 WordPress 插件中。
wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
查看post，它可以帮助您了解在 WordPress 插件中实现 jQuery 和 CSS 是多么容易。
【讨论】：
除了通过函数放入脚本之外，您还可以“只是”在任何模板中的页眉、页脚中包含一个链接（即链接 rel 标记）。
没有。您永远不应该在 WordPress 中像这样添加指向外部脚本的链接。通过 functions.php 文件将它们排入队列可确保以正确的顺序加载脚本。
未能将它们排入队列可能会导致您的脚本无法运行，尽管它是正确编写的。
【讨论】：
您可以在另一个文件中编写脚本。然后像这样将您的文件排入队列
假设您的脚本名称是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 文件路径。
【讨论】：
在 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' );
【讨论】：
只需要加载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') 重新注册自己的。
【讨论】：
我在这里的所有其他答案都遇到了一些严重的问题，所以对于那些想要更新解决方案的人来说，这是我的补充。
我知道这并不是 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>';
【讨论】：