我阅读了Codex和一些关于在WordPress中使用jQuery的博客文章，这非常令人沮丧。我已经在functions.php文件中加载了jQuery，但所有指南都很糟糕，因为他们认为你已经拥有大量的WordPress体验。例如，他们说现在我正在通过functions.php文件加载jQuery，现在我所要做的就是加载我的jQuery。
我该怎么做？具体来说，我向哪些文件添加代码？我究竟如何为单个WordPress页面添加它？
答案 0 :(得分：169)
我知道你对这些教程的意思。我是这样做的：
首先，您需要编写脚本。在您的主题文件夹中创建一个名为'js'的文件夹。在您的javascript的该文件夹中创建一个文件。例如。您-的script.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 Answers询问WordPress问题。
答案 1 :(得分：41)
经过多次搜索，我终于找到了适合最新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');
答案 2 :(得分：6)
如果您使用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
答案 3 :(得分：4)
除了将脚本放入函数之外，你可以“只”在标题，页脚，任何模板中包含一个链接（链接rel标记）。您只需要确保路径正确。我建议使用这样的东西（假设你在你主题的目录中）。
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
一个好的做法是在关闭正文标记之前或至少在页脚之前包含此权限。您还可以使用php includes或其他几种拉动此文件的方法。
<script type="javascript"><?php include('your-file.js');?></script>
答案 4 :(得分：4)
您可以在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/
答案 5 :(得分：3)
您可以使用此插件添加自定义javascript或jquery https://wordpress.org/plugins/custom-javascript-editor/
当你使用jQuery时别忘了使用jquery noconflict模式
答案 6 :(得分：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);
});
});
答案 7 :(得分：2)
**＃方法1：**尝试将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内容时都不必重复代码。
#Method 2：将脚本代码放在<script>标记下的页面正文中。然后你不必在函数中注册它。
答案 8 :(得分：2)
从这里回答：https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
尽管WordPress已经出现了一段时间，并且多年来为主题和插件添加脚本的方法已经相同，但仍然存在一些关于你应该如何添加脚本的混淆。所以让我们清楚一点。
由于jQuery仍然是最常用的Javascript框架，让我们来看看如何在主题或插件中添加一个简单的脚本。
jQuery的兼容模式
在我们开始将脚本附加到WordPress之前，让我们看一下jQuery的兼容模式。 WordPress预先打包了一份jQuery副本，您应该将其与代码一起使用。当加载WordPress的jQuery时，它使用兼容模式，这是一种避免与其他语言库冲突的机制。
这归结为您不能像在其他项目中那样直接使用美元符号。在为WordPress编写jQuery时，您需要使用jQuery。看看下面的代码，看看我的意思：
答案 9 :(得分：1)
“我们有谷歌”。 为了正确使用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>
答案 10 :(得分：1)
在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' );
答案 11 :(得分：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文件路径。
答案 12 :(得分：1)
除了将脚本放入函数之外，你可以＆＃34;只是＆＃34;在任何模板中包含标题，页脚中的链接（链接rel标记）。
没有。你永远不应该只是在WordPress中添加这样的外部脚本的链接。通过functions.php文件对它们进行排队可确保以正确的顺序加载脚本。
尽管编写正确，但未将它们排队可能会导致您的脚本无法正常工作。
答案 13 :(得分：1)
您可以使用WordPress预定义功能将脚本文件添加到WordPress插件。
wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
查看post，它可以帮助您了解在WordPress插件中实现jQuery和CSS的难易程度。
答案 14 :(得分：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'）重新注册自己的jQuery。
答案 15 :(得分：0)
我看到的解决方案是从向主题添加javascript功能的角度来看的。但是，OP专门询问：“如何为单个 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);'/>
使用在页面准备就绪时可以配置和绘制JavaScript小部件的函数名称，将其添加到.js文件中：
jQuery(document).ready(function( $ ) {
your_init_function();
});
在Wordpress代码编辑器中，我通常在文章末尾指定脚本。例如，我的主目录中有一个scripts文件夹。在内部，我有一个公用目录，其中包含我的一些帖子可以共享的通用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文件不会覆盖同名父主题的文件，而是添加到其中。子主题教程建议了如何使父子样式style.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');
}
答案 16 :(得分：0)
function xyz_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
答案 17 :(得分：0)
正如您提到的那样，在functions.php中不使用入队的简单方法是这种方法：
add_action('wp_footer', 'customJsScript');
function customJsScript() {
echo '
<script>
jQuery(function(){
console.log("test");
});
</script>
';
}
如您所见，您使用wp_footer操作注入代码。
但是如果您将要在整个WordPress中插入的代码，则您可能更喜欢直接将代码放在header.php或footer.php中