jQuery插件在WordPress中不起作用

Question

I'm trying to implement a jQuery Plugin to my wordpress site. I already figured out how to make jQuery run, but the plugin still doesn't work. It is this plugin: contenthover

I tried it like this:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://example.com/wp-content/themes/xenia/assets/js/jquery.contenthover.min.js"></script>
<script type="text/javascript">
    <!--//-->
    <![CDATA[//>
    <!--
        jQuery(document).ready(function() {
            $('#d1').contenthover({
                overlay_background:'#000',
                overlay_opacity:0.8
            });
        });
     //-->
    <!]]//>
</script>

Whatever I try doesn't work. I already included jQuery and the plugin via functions.php . When I call the simple slideUp(); it works, but the contenthover-plugin doesn't. What am I doing wrong?

edit: This is how I also tried it by hook it up in teh functions.php of the theme

wp_register_script(THEME_SLUG . '-jqueryMain', THEME_URI . '/assets/js/jquery-2.1.4.min.js', array('jquery'));
wp_register_script(THEME_SLUG . '-contenthover', THEME_URI . '/assets/js/jquery.contenthover.min.js', array('jquery'));

wp_enqueue_script(THEME_SLUG . '-jqueryMain');
wp_enqueue_script(THEME_SLUG . '-contenthover');

Answer 1

WordPress uses a noconflict wrapper because other libraries also use $ as the core variable, so $ is not directly available in WordPress.

If you still want to use $ in your script, you have to define it like this:

jQuery(document).ready(function($) {
//                              ^-- add the dollar sign here

Inside this function $ will work as expected.

You can read more about it in the documentation .

Note: You should avoid adding jQuery yourself, other plugins or themes might rely on the jQuery version provided by WordPress. Just enqueue the jQuery WordPress provides.