jquery - 将 jquery 添加到 WordPress 站点

Question

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

我一直在 jsfiddle 上玩，并得到了一些 jquery 来做我想做的事情(当你将鼠标悬停在 child 上时，向父级添加一个类)，但是当我获取代码并尝试将其添加到我的 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 的链接

任何帮助将不胜感激。

Answer 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 文件并排队以在站点范围内使用。

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

2. 把这个放进去..

   // 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');
       })
   });
   

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

4. 将mycustomfunctions.js放入js文件夹

5. 编辑您的子主题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 入队。