将 jquery 添加到 wordpress 网站答案

【问题标题】：Adding jquery to wordpress site将 jquery 添加到 wordpress 网站
【发布时间】：2016-08-23 23:01:33
【问题描述】：

我对使用 jquery 很陌生，所以如果这是非常基本的东西，我很抱歉。

我一直在玩 jsfiddle 并得到了一些 jquery 来做我想做的事情（当你将鼠标悬停在孩子上时向父级添加一个类），但是当我获取代码并尝试将其添加到我的 wordpress 网站时，它就是行不通。

这是我要添加的代码：

$('.explore > .country').hover(function() {
$(this).parent().toggleClass('hover');
})

我知道 wordpress 不喜欢 $ 函数，我尝试了这个：

<script type="text/javascript">
(function($) {
$('.explore > .country').hover(function() {
$(this).parent().toggleClass('hover');
})
})(jQuery);
</script>

这里也是jsfiddle的链接

任何帮助将不胜感激。

【问题讨论】：

标签： jquery wordpress

【解决方案1】：

一定要先让 jQuery 入队。它内置在 wordpress 中，但没有预先激活。

在你的主题的 function.php 文件中搜索“wp_enqueue”，如果有一个函数已经在排队脚本中添加以下行。

wp_enqueue_script( 'jquery' );

否则，创建您自己的入队脚本函数..

// function to enabled (enqueue) scripts in wordpress
function enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

更新

或者

您可以使用自定义代码创建一个 js 文件并排入队列以在站点范围内使用。

创建一个名为 mycustomfunctions.js 的文件

把这个放进去..

// describe function here
jQuery(function() {
    jQuery('.explore > .country').hover(function() {
        jQuery(this).parent().toggleClass('hover');
    })
    jQuery('.explore > .community').hover(function() {
        jQuery(this).parent().toggleClass('hover2');
    })
});

在您的子主题根文件夹中创建一个新文件夹，将其命名为“js”
将mycustomfunctions.js放入js文件夹

编辑您的子主题 functions.php 以包含..

// function to enable (enqueue) scripts in wordpress
function enqueue_scripts() {
    wp_enqueue_script('mycustomfunctions', get_stylesheet_directory_uri() . '/js/mycustomfunctions.js', array('jquery') );
}
add_action('wp_enqueue_scripts','enqueue_scripts');

注意 - 无需单独将 jquery 加入队列，因为我们已将其列为 mycustomfunctions 的依赖项（请参阅数组），由于此必需的依赖项，wordpress 将自动加入 jquery。

【讨论】：

我在我的子主题中创建了一个functions.php并添加了这个，但仍然没有解决问题。还尝试了 Monica 建议的方法，将 $ 替换为“jQuery”，但也没有解决。
关于没有冲突这里是如何使用jQuery而不是$来编写它。两个悬停都包含在文档就绪功能中。 jsfiddle.net/Hastig/0n5dxee1/2
另外，您确定您在正确的主题文件夹中吗？ Functions.php 是一个非常常见的文件，在大多数主题中都可以找到。

【解决方案2】：

试试这个答案：https://stackoverflow.com/a/21949790/4426282

使用 $ 将返回未定义，请尝试使用 jQuery。

【讨论】：

【解决方案3】：

如果我正确理解了您的问题，您只需提出：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

在两个<head>标签之间

【讨论】：

【解决方案4】：

function myCustomScript() { ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
    jQuery('.explore > .country').hover(function() {
        jQuery(this).parent().toggleClass('hover');
    })
});
</script>
<?php
}
add_action( 'wp_footer', 'myCustomScript' );

请您在functions.php 中添加上述代码吗？

【讨论】：