在wordpress短代码中加载jquery文件

时间:2013-10-28 13:07:30

标签: wordpress jquery-ui accordion shortcode


我正在尝试创建一个手风琴短代码。 当我使用wp_enqueue_script函数加载脚本时,它接缝仅适用于jquery ui库,但不适用于自定义脚本

jQuery(document).ready(
    function() {
           $('#ks-accordion').accordion(); 
       }
);


这是完整的代码:

// Container

function ks_accordion($atts, $content = null) {

    extract( shortcode_atts( array(
        'id' => ''
    ), $atts ) );
    wp_enqueue_script('jquery-ui-accordion');
    wp_enqueue_script('shortcode', get_template_directory_uri().'/functions/shortcodes/js/shortcodes.js');

    return '<div id="accordion">'.do_shortcode($content).'</div>';
}
add_shortcode( 'accordion', 'ks_accordion' );


// Section

function ks_accordion_section($atts, $content = null) {

    extract( shortcode_atts( array(
        'title' => 'My Title',
    ), $atts ) );

    return '<h6><a href="#">'.$title.'</a></h6><div><p>'.do_shortcode($content).'</p></div>';

}
add_shortcode( 'accordion_section', 'ks_accordion_section' );


这是我在前端获得的代码:

<div id="ks-accordion"><br>
  <h6><a href="#">Title</a></h6><div><p>Content</p></div><br>
  <h6><a href="#">Title1</a></h6><div><p>Content</p></div><br>
  <h6><a href="#">Title2</a></h6><div><p>Content</p></div><br>
</div>


另外我不明白为什么会创建这些<br>


感谢

2 个答案:

答案 0 :(得分:0)

wp_enqueue_script('shortcode', get_template_directory_uri().'/functions/shortcodes/js/shortcodes.js', array('jquery'));

希望这有帮助!

答案 1 :(得分:0)

WordPress中的jQuery是loaded in noConflict mode。要使用美元符号,我们需要以下

jQuery(document).ready( function($) { // <---- put $ here
    $('#ks-accordion').accordion(); 
});

很可能do_shortcode正在插入那些<br>,但这只是猜测。