如何使用Wordpress使用jQuery UI


How do I use jQuery UI using Wordpress?

我正在尝试让jQuery UI对话框与WordPress一起工作。我看到了这篇文章(在Wordpress中使用jQueryUI对话框),我尝试了这个解决方案,但它对我不起作用。如果重要的话,我使用的是基于twentyelleven主题的子主题。

我把它直接放在php:中的wp_head()函数前面

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

我注意到二十岁主题或儿童主题实际上没有第三个脚本(template.js),但我不认为这会导致问题

然后我在HEAD标签的底部添加了这个:

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

当我加载页面时,错误控制台中出现以下错误:

错误:$不是函数

发生这种情况的页面在这里,如果这将帮助您诊断问题的话。谢谢你的帮助!

查看您包含的所有脚本,在网络选项卡中的firebug中,有时会出现403错误。(在检查btw之前清除所有缓存)。

jQuery也能正常工作吗?

我刚刚看了你的页面。您正在加载jQuery.js,但没有加载jQuery-ui.js。这就是它不起作用的原因。

此外,请确保您正在加载正确的jquery-ui.js,其中包括您需要的所有模块。

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');