如何添加一个简单的jQuery脚本到WordPress？
我阅读了关于在WordPress中使用jQuery的Codex和一些博客文章，而且非常令人沮丧。 我已经尽可能在functions.php .php文件中加载jQuery，但所有的指南都是蹩脚的，因为他们假设你已经有了大量的WordPress的经验。 例如，他们说，现在我通过functions.php文件加载jQuery，现在我所要做的就是加载我的jQuery。
我到底该怎么做？ 什么文件，具体来说，我添加代码？ 如何将它添加到单个WordPress页面？
我知道你对教程的意思。 以下是我如何做到这一点：
首先你需要编写你的脚本。 在你的主题文件夹中创build一个名为“js”的文件夹。 在该文件夹中为您的JavaScript创build一个文件。 例如your-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的问题可以在WordPress的答案 。
经过多次search，我终于find了一些与最新的WordPress的作品。 以下是要遵循的步骤：
- find你的主题的目录，在你的自定义js（ 在这个例子中是custom_js ）目录中创build一个文件夹。
- 把你自定义的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'); - 检查您的网站，以确保它的工作！
如果您使用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
除了将脚本放在函数中之外，还可以在标题，页脚，任何模板中包含一个链接（链接rel标签）。 你只需要确保path是正确的。 我build议使用这样的东西（假设你在主题的目录中）。
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
一个好的做法是在结束标签之前或至less在页脚之前包含这个权限。 你也可以使用php includes，或者其他几种拉文件的方法。
<script type="javascript"><?php include('your-file.js');?></script>
你可以使用这个插件添加自定义的JavaScript或jQuery。
https://wordpress.org/plugins/custom-javascript-editor/
当你使用jQuery不要忘记使用jquery noconflict模式
您可以在主题的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/
有许多教程和答案在这里如何添加您的脚本，包括在页面中。 但是我无法find的是如何构build代码，以便它能正常工作。 这是由于这种forms的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); }); });
您可以使用WordPress预定义function将脚本文件添加到WordPress插件。
wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
看看这个post ，它可以帮助你理解在WordPress插件中如何轻松地实现jQuery和CSS。
**＃方法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内容就重复你的代码。
＃方法2：将脚本代码放在页面体内<script>标签下。 那么你不必在函数中注册它。
“我们有Google”。 为了正确使用WordPress内部的脚本，只需添加托pipe库。 像谷歌一样
在您select的库之后，您需要将它链接到您的自定义脚本之前：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>
除了将脚本放在函数中之外，还可以在标题，页脚，任何模板中包含一个链接（链接rel标签）。
不，你不应该在WordPress中添加一个像这样的外部脚本链接。 通过functions.php文件排入队列可以确保脚本以正确的顺序加载。
如果没有排队，可能会导致脚本无法正常工作，尽pipe它的写入是正确的。
你可以在另一个文件中编写你的脚本。并且像这样排队你的文件，假设你的脚本名字是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文件path。
从这里回答
尽pipeWordPress已经有一段时间了，添加脚本到主题和插件的方法已经有相同的几年了，但是你应该怎样添加脚本仍然有些困惑。 所以让我们来澄清一下。
由于jQuery仍然是最常用的Javascript框架，让我们来看看如何添加一个简单的脚本到你的主题或插件。
jQuery的兼容模式
在开始将脚本附加到WordPress之前，让我们看看jQuery的兼容模式。 WordPress预先打包了一份jQuery的副本，您应该使用您的代码。 当WordPress的jQuery加载时，它使用兼容模式，这是一种避免与其他语言库冲突的机制。
这可以归结为，你不能像在其他项目中那样直接使用美元符号。 在为WordPress编写jQuery时，您需要使用jQuery。 看看下面的代码，看看我的意思是：
你只需要加载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'）。
