在Wordpress中使用jQuery UI对话框

Question

我知道至少有另外一篇关于SO的帖子处理这个问题,但答案从来没有完全确定.

我正在head.php文档中的WP子主题中工作.我已将此添加到头部:

<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />  


<?php
    wp_enqueue_style('template-style',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
    wp_enqueue_script('jquery-template',get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css'); 
    wp_enqueue_script('jq-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js '); 
    wp_enqueue_script('jq-ui-min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js' );   
?>

我在体内添加了这个:

<script>
    jQuery(function() {
        $( "#dialog" ).dialog();
    });
    </script>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

但没有骰子.我的div显示为标准div.

有什么想法吗？我知道应该使用enqueue调用顶级样式表,但这不应该阻止它工作.

Answer 1

在无冲突模式下调用WordPress jQuery:

jQuery(document).ready(function($) {
  $('#dialog' ).dialog();
});

jQuery UI也在jQuery之前加载.您收到2个javascript错误:

未捕获的ReferenceError:未定义jQuery

103 Uncaught TypeError:对象[object DOMWindow]的属性'$'不是函数

第一个错误来自jQuery之前的jQuery UI加载,第二个错误是因为在无冲突模式下无法识别$.

删除任何内联<script src=标记和对标头php中的custom.css的调用,并将此函数添加到您的子主题functions.php文件以加载脚本.WordPress将为您准备合适的订单.

add_action( 'init', 'frontporch_enqueue_scripts' );
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_register_style( 'template-style', 'http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css', true); 
        wp_enqueue_style( 'jquery-style' );
        wp_enqueue_style( ' jquery-template' );
        wp_enqueue_script( 'google-jquery-ui' );
        wp_enqueue_script( 'jquery-template' );
    }       
}