如何使用Wordpress使用jQuery UI？

Question

I am trying to get the jQuery UI Dialog to work with WordPress. I saw this post(Using jQuery UI dialog in Wordpress) and I attempted the solution but it is not working for me. In case it matters, I am using a child theme based on the twentyeleven theme.

I put this directly in front of the wp_head() function in php:

function frontporch_enqueue_scripts() {
        if (!is_admin() ) {
            wp_enqueue_script( 'jquery' );
            wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
            wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
            wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true); 
            wp_enqueue_style( 'jquery-style' );
            wp_enqueue_script( 'google-jquery-ui' );
            wp_enqueue_script( 'jquery-template' );
        }       
    }   
    add_action( 'init', 'frontporch_enqueue_scripts' );

I noticed that the twentyeleven theme or the child theme doesn't actually have that third script(template.js), but I don't think that is causing the problem.

Then I added this at the bottom of the HEAD tag:

<script type="text/javascript">
$( "#markte_area" ).dialog({
    autoOpen: false,    
});

jQuery(document).ready(function($){
    jQuery( "#markte_link" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    }); 
}); //end document ready
</script>

I get the following error in the Error Console when I load the page:

Error: $ is not a function

The page where this is occurring is here if that will help you diagnose the problem. Thanks for any help!

Answer 1

watch all the scripts you're including, in the firebug in network tab, sometimes it's a 403 error for the bad links. (clear all your cache before the checking btw).

Also does jQuery working as is?