将jquery ui添加到wordpress网站

时间:2014-12-08 10:35:16

标签: wordpress jquery-ui

我想在我的wordpress网站上使用http://jqueryui.com/dialog/,但我无法弄清楚如何添加它。 我创建了一个文件Chameleon / js / popup.js,代码为:

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

然后我添加到functions.php

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'popup', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/popup.js', // this is the location of your script file
        array(' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">') // this array lists the scripts upon which your script depends
);

在我的帖子模板中我添加了代码:

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

但它不起作用。

1 个答案:

答案 0 :(得分:1)

像这样添加路径

add_action( 'wp_enqueue_scripts', 'add_my_script' ); 
function add_my_script() {
wp_enqueue_style( 'themeslug-jquery-css', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'themeslug-stylesheet', get_template_directory_uri.'/resources/demos/style.css' );
wp_enqueue_script( 'themeslug-popup', get_template_directory_uri() . '/js/popup.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-main', '//code.jquery.com/jquery-1.10.2.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-ui', '//code.jquery.com/ui/1.11.2/jquery-ui.js', array('jquery'), '' );
}