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

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

我到底该怎么做？具体来说，我应该向哪些文件中添加代码？我到底应该如何为一个 WordPress 页面添加它？

329572 次浏览
小开

您只需要加载 jquery 吗？

1)像其他指南所说的那样，像下面这样在 function. 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 ()(这是它将输出 script 标记的地方) ，并且 jQuery 将在每个页面上加载。使用 WordPress 加入 jQuery 时，它将处于“无冲突”模式，因此必须使用 jQuery 而不是 $。如果需要，您可以注销 jQuery，并通过执行 wp _ derregister _ script (‘ jQuery’)重新注册自己的 jQuery。

小开
最佳答案

我知道你说的教程是什么意思，我是这么做的:

首先你需要写你的剧本。在主题文件夹中创建一个名为“ js”的文件夹。在该文件夹中为 javascript 创建一个文件。比如你的剧本。JS.将 jQuery 脚本添加到该文件中(在。Js 档案)。

下面是一个 jQuery 脚本(在 wp-content/theme/your-theme/js/your-script. js 中)可能的外观示例:

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

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

现在打开主题的 function. 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 答案上提出。

小开

经过大量的搜索，我 终于找到了一些适用于最新的 WordPress 的东西:

  1. 找到主题的目录，在自定义 js (在这个例子中是 custom_ js)的目录中创建一个文件夹。
  2. 将您的自定义 jQuery 放在这个目录(在这个例子中是 jquery _ test. js)中的.js 文件中。

  3. 确保您的自定义 jQuery.js 如下所示:

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

  4. Go to the theme's directory, open up functions.php

  5. Add some code near the top that looks like this:

    //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. Check out your site to make sure it works!
小开

除了通过函数放入脚本之外，你还可以在页眉、页脚、任何模板中的任何地方“只”包含一个链接(即 link rel 标签)。你只需要确保路径是正确的。我建议使用类似的内容(假设您在主题的目录中)。

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

一个好的做法是在关闭主体标记之前或者至少在页脚之前包含这个内容。您还可以使用 php include 或其他几种方法来拉入这个文件。

<script type="javascript"><?php include('your-file.js');?></script>
小开

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

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

看看 邮寄，它帮助你理解在 WordPress 插件中实现 jQuery 和 CSS 是多么容易。

小开

方法1: 尝试将 jquery 代码放在一个单独的 js 文件中。

现在将该脚本注册到 function. 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>标签下的页面主体中。那么就不必在函数中注册它。

小开

如果使用 wordpress 儿童主题为主题添加脚本，则应该将 get _ template _ direct _ uri 函数更改为 get _ styesheet _ direct _ 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 _ direct _ uri:/your-site/wp-content/theme/家长主题

Get _ stylesheet _ direct _ uri:/your-site/wp-content/theme/儿童主题

小开

您可以使用这个插件添加定制的 javascript 或 jquery。
Https://wordpress.org/plugins/custom-javascript-editor/

使用 jQuery 时不要忘记使用 jQuery 非冲突模式

小开

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

小开

“我们有谷歌”的标签。 要在 wordpress 中正确使用脚本，只需添加托管库即可

在选定库之后，您需要在自定义脚本之前链接它: expl

<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>
小开

除了通过函数放入脚本之外，你还可以在页眉、页脚、任何模板中的任何地方“只”包含一个链接(即 link rel 标签)。

没有。你永远不应该在 WordPress 中像这样添加一个外部脚本的链接。通过 function. 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 文件路径放在 /js/image-ticker.js的位置。

小开

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

尽管 WordPress 已经存在了一段时间，并且添加脚本到主题和插件的方法已经相同了很多年，但是关于如何准确地添加脚本仍然存在一些困惑。所以我们来澄清一下。

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

JQuery 的兼容模式

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

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

小开

这里有许多关于如何添加要包含在页面中的脚本的教程和答案。但是我找不到的是如何构造代码，使它能够正常工作。这是因为 $没有在这种形式的 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 中，将脚本包含在网站中的正确方法是使用以下函数。

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

我所看到的解决方案是从向主题添加 javascript 特性的角度出发的。但是，OP 特别提出了一个问题: “我到底应该如何为一个 单身 WordPress 页面添加它?”这听起来像是我在 Wordpress 博客中使用 javascript 的方式，每个文章可能有不同的基于 javascript 的“小部件”。例如，一篇文章可能允许用户更改变量(滑块、复选框、文本输入域) ，并绘制或列出结果。

从 JavaScript 的角度出发:

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

甚至不要考虑在你的文章的 html 中包含重要的 JavaScript ーー用你的代码创建一个 JavaScript 文件。

  1. 用你的文章的 html 接口你的 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);'/>
  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/

Php 文件不覆盖相同名称的父主题文件，而是添加到其中。子主题教程建议如何对父文件和子文件 style.css 进行排队。我们可以简单地向该函数添加另一行代码，以使 jQuery 进入队列。下面是我的关于 child 主题的函数. 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');
小开

在不使用 wp _ enqueue _ script 的情况下，在 function. 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 中

小开

我对这里的其他答案有一些严重的问题，所以这里是我为那些想要一个更新的解决方案的人添加的。

我知道这不完全是 OP 要求的，因为它使用短代码，但这是唯一的方法，我可以使它的工作，它有额外的好处，只有当页面包含短代码的功能。 这不使用 wp_enqueue_script()和 add_action()函数。

我使用的是 代码片段插件，这意味着不需要修改 function. php 并创建 new。JS 文件。

在短代码中，回显 jQuery 函数如下:

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


//your jQuery code goes here.
        

});


</script>';
小开

我正在使用这个插件与元素 https://wordpress.org/plugins/insert-php/

您可以复制和粘贴您的脚本，并使用一个短代码调用它


提交答案