如何使用 Wordpress 使用 jQuery UI？答案

【问题标题】：How do I use jQuery UI using Wordpress?如何使用 Wordpress 使用 jQuery UI？
【发布时间】：2012-08-02 16:18:35
【问题描述】：

我正在尝试让 jQuery UI 对话框与 WordPress 一起使用。我看到了这篇文章（Using jQuery UI dialog in Wordpress），我尝试了解决方案，但它对我不起作用。以防万一，我使用的是基于 211 主题的子主题。

我把这个直接放在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' );

我注意到 211 主题或子主题实际上没有第三个脚本（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>

我在加载页面时在错误控制台中收到以下错误：

错误：$ 不是函数

发生这种情况的页面是here，如果这有助于您诊断问题。感谢您的帮助！

【问题讨论】：

把$改成jQuery然后告诉我会发生什么？
我把它改成了 jQuery，现在它说“jQuery("#markte_area").dialog is not a function”
听起来 jQuery 没有加载。 Firebug 将帮助诊断正在发生的事情。

标签： php javascript jquery wordpress

【解决方案1】：

在网络选项卡中的萤火虫中查看您包含的所有脚本，有时它是错误链接的 403 错误。（顺便说一句，在检查之前清除所有缓存）。

jQuery 也按原样工作吗？

【讨论】：

我测试了 jQuery 是否按原样工作，并且当我在 jQuery click 函数中添加警报时它可以工作。我确实检查了 Firebug 上的 net 选项卡，并注意到它看起来没有加载到 jQuery UI 的 JS 文件中，尽管它确实说它有 16 个请求。我已将 url 添加到它发生的页面，以便您更好地查看。感谢您迄今为止的所有帮助！
出于好奇，您是否尝试过禁用我看到的这个“wp-cycle”插件也在用 jQuery 做一些事情？通常当我看到这样的问题时，我做的第一件事就是尝试看看我是否可以将其缩小到与另一个插件的冲突。
另外，我不喜欢你排队 jquery-ui 的方式。我认为首选的方法是将标准 WP 定义的jquery-ui 脚本加入队列并使用插件重新定义它以使用 Google 库。你现在这样做的方式是乞求一些插件进来，包括内置的 WP 版本的 jquery ui 并导致破坏你的网站的冲突。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：