wordpress - 在 WordPress 中使用 jQuery UI 对话框

Question

我知道至少还有另外一篇帖子处理这个问题，但答案从未明确给出。

我正在 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。

有什么想法吗？我知道应该使用排队来调用顶部样式表，但这不应阻止其工作。

Answer 1

WordPress jQuery 以无冲突模式调用:

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

此外，jQuery UI 在 jQuery 之前加载。您收到 2 个 JavaScript 错误:

Uncaught ReferenceError: jQuery is not defined

103Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

第一个错误是由于 jQuery UI 在 jQuery 之前加载，第二个错误是因为 $ 在无冲突模式下无法识别。

删除任何内联 <script src=标签和对 header 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' );
    }       
}