0

我正在尝试为 WordPress 创建一个 jQuery 选项卡简码，这是我在 functions.php 中的代码，出于某种原因，选项卡会显示等，但它们不会改变？

add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');

// this variable will hold your divs
$tabs_divs = '';

function tabs_group( $atts, $content = null ) {
    global $tabs_divs;

    // reset divs
    $tabs_divs = '';

    extract(shortcode_atts(array(  
        'id' => '',
        'class' => ''
    ), $atts));  

    $output = '<ul class="nav nav-tabs '.$class.'"  ';

    if(!empty($id))
        $output .= 'id="'.$id.'"';

    $output.='>'.do_shortcode($content).'</ul>';
    $output.= '<div class="tab-content">'.$tabs_divs.'</div>';

    return $output;  
}  


function tab($atts, $content = null) {  
    global $tabs_divs;

    extract(shortcode_atts(array(  
        'id' => '',
        'title' => '',
        'active'=>'n' 
    ), $atts));  

    if(empty($id))
        $id = 'tab_item_'.rand(100,999);

    $activeClass = $active == 'y' ? 'active' :'';
    $output = '
        <li class="'.$activeClass.'">
            <a href="#'.$id.'">'.$title.'</a>
        </li>
    ';

    $tabs_divs.= '<div class="tab-pane '.$activeClass.'" id="'.$id.'">'.$content.'</div>';

    return $output;
}

这是我的标题中的内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

在我的页面上，我有：

[tabs]
[tab title="tab" active="y" id="home"]home[/tab]
[tab title="tab2" active="n" id="about"]about[/tab]
[tab title="tab3" active="n" id="help"]help[/tab]
[/tabs]

编辑！！

function tabs_header() {

//wp_enqueue_script('jquery');

wp_register_script( 'add-jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('jquery'),'',true  );
wp_register_script( 'add-jqueryui-js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('jquery'),'',true  );


wp_enqueue_style( 'add-jquery-js' );
wp_enqueue_style( 'add-jqueryui-js' );

}
add_action( 'wp_enqueue_scripts', 'tabs_header' );
4

1 回答 1

0

除非您真的知道自己在做什么，否则不要将外部 jQuery 源加入队列。大多数 WordPress/jQuery 错误都是因为这个。让 WP 使用其捆绑的 jQuery 版本，一切顺利。

你没有显示你的Tabs脚本，但我想你有一个。这就是我将jQuery Tabs脚本排入队列的方式（我在 GitHub 上有这个用于音频播放器的工作插件）：

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_17856211' );

function enqueue_scripts_so_17856211()
{
    wp_enqueue_style( 
        'tabs-css', 
        get_stylesheet_directory_uri() . '/css/tabs.css' 
    );
    wp_enqueue_script( 
        'tabs-js',
        get_stylesheet_directory_uri() . '/js/tabs.js', 
        array( 'jquery', 'jquery-ui' ), 
        false, 
        false 
    );
}

请注意，它your-script.js正在与依赖项一起排队。jqueryjquery-ui

于 2013-07-25T21:57:11.843 回答