在Wordpress中使用jQuery UI对话框 [英] Using jQuery UI dialog in Wordpress

问题描述

我知道在SO上至少还有1个关于此问题的帖子，但是答案从来没有被准确地提出.

I know there is at least 1 other post on SO dealing with this but the answer was never exactly laid out.

我正在head.php文档中的WP子主题中工作.我已经在头上添加了这个:

I am working in a WP child theme in the head.php document. I have added this in the head:

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

然后我将其添加到正文中

and I added this in the body:

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

but no dice. My div shows as standard div.

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

Any ideas at all? I know that top stylesheet should be called with enqueue but that shouldn't stop this from working.

推荐答案

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

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

另外，jQuery UI也在jQuery之前加载.您遇到2个JavaScript错误:

Also jQuery UI is loading before jQuery. You're getting 2 javascript errors:

未捕获的ReferenceError:jQuery未定义

Uncaught ReferenceError: jQuery is not defined

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

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

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

The first error is from jQuery UI loading before jQuery and the second is because the $ is not recognized in no-conflict mode.

删除头文件php中的任何内联<script src=标记和对custom.css的调用，并将此函数添加到子主题functions.php文件中以加载脚本. WordPress将按照您的顺序排列它们.

Remove any of the inline <script src= tags and the call to the custom.css in header php and add this function to your child theme functions.php file to load the scripts. WordPress will put them in the right order for you.

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

这篇关于在Wordpress中使用jQuery UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！