为 jQuery UI 选项卡创建 wordpress 简码答案

【问题标题】：Create wordpress shortcode for jQuery UI Tabs为 jQuery UI 选项卡创建 wordpress 简码
【发布时间】：2014-06-11 23:44:31
【问题描述】：

我正在尝试创建一个允许用户创建 jQuery UI 选项卡的 wordpress 简码。我在网上找到了这个声称可以做到的很棒的脚本 - 但是它在我的页面中有一些非常不受欢迎的结果。

首先，我目前使用的脚本如下：

add_shortcode( 'tabgroup', 'jqtools_tab_group' );
function jqtools_tab_group( $atts, $content )
{
    $GLOBALS['tab_count'] = 0;

    do_shortcode( $content );

    if( is_array( $GLOBALS['tabs'] ) ){
        foreach( $GLOBALS['tabs'] as $tab ){
            $tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>';
            $panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>';
        }
        $return = "\n".'<!-- the tabs --><ul class="tabs">'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" --><div class="panes">'.implode( "\n", $panes ).'</div>'."\n";
    }
    return $return;
}

add_shortcode( 'tab', 'jqtools_tab' );
function jqtools_tab( $atts, $content )
{
    extract(shortcode_atts(array(
            'title' => 'Tab %d'
    ), $atts));

    $x = $GLOBALS['tab_count'];
    $GLOBALS['tabs'][$x] = array( 'title' => sprintf( $title, $GLOBALS['tab_count'] ), 'content' =>  $content );

    $GLOBALS['tab_count']++;
}

但是，我试图实现的 HTML 输出是这样的：

<div class="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content</p>
    </div>
    <div id="tabs-2">
        <p>Content</p>
    </div>
    <div id="tabs-3">
        <p>Content</p>
    </div>
</div>

简码 php 提供的输出与我需要的输出略有不同 - 这是我当前输出的 HTML：

<!-- the tabs -->
<ul class="tabs">
<li><a class="" href="#">Tab 0</a></li>
<li><a class="" href="#">Tab 1</a></li>
<li><a class="" href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
    <div class="pane">
        <h3>Tab 0</h3>Content
    </div>
    <div class="pane">
        <h3>Tab 1</h3>Content
    </div>
    <div class="pane">
        <h3>Tab 2</h3>Content
    </div>
</div>

最后，我使用的简码如下所示：

[tabgroup]

[tab title="tab1"]Content[/tab]

[tab title="tab2"]Content[/tab]

[tab title="tab3"]Content[/tab]

[/tabgroup]

我的问题是，我需要如何更改我的 php 代码以使输出的 HTML 看起来像使选项卡工作所需的 HTML？

【问题讨论】：

请在 wordpress.stackexchange.com 上提问，您将得到最佳和快速的答复

标签： php jquery wordpress jquery-ui shortcode

【解决方案1】：

好的，这就是你必须做的。

if( is_array( $GLOBALS['tabs'] ) ){
    foreach( $GLOBALS['tabs'] as $k=>$tab ){
        $tabs[] = '<li><a href="#tab-'.$k.'">'.$tab['title'].'</a></li>';
        $panes[] = '<div id="tab-'.$k.'"><p>'.$tab['content'].'</p></div>';
    }
    $return = "\n".'<!-- the tabs --><div class="tabs"><ul>'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" -->'.implode( "\n", $panes ).'</div>'."\n";
}

【讨论】：

【解决方案2】：

您也可以像这样添加短代码：-

// Tab
function tab_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'title' => ''
    ), $atts ) );
    return '<div id="tabs-'. sanitize_title( $title ) .'">'. do_shortcode( $content ) .'</div>';
}
add_shortcode( 'tab', 'tab_shortcode' );

// Tabs Container
function tabs_container_shortcode( $atts, $content = null ) {

    preg_match_all( '/tab title="([^\"]+)"/i', $content, $matche, PREG_OFFSET_CAPTURE );

    $tab_title = array();

    if( isset($matche[1]) ) {
        $tab_title = $matche[1];
    }

    $output = '';

    if( count($tab_title) ) {
        $output .= '<div id="tabs">';
        $output .= '<ul class="nav clearfix">';
        foreach( $tab_title as $tab ){
            $output .= '<li><a href="#tabs-'. sanitize_title( $tab[0] ) .'">' . $tab[0] . '</a></li>';
        }
        $output .= '</ul>' . do_shortcode( $content ) . '</div>';
    } else {
        $output .= do_shortcode( $content );
    }

    return $output;

}
add_shortcode( 'tabs_container', 'tabs_container_shortcode' );

这也适用于标签。希望对你有所帮助。

【讨论】：