我目前正在尝试为 WordPress 创建一个用于创建选项卡的简码，我知道有可用的简码。但我正在尝试学习如何自己编写它们。

目前我正在生成选项卡菜单项，但我无法将内容放在一个全新的 div 中。

前端用法:

[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_group( $atts, $content = null ) {  
    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>';

    return $output;  
}  

add_shortcode("tabs", "tabs_group");

function tab($atts, $content = null) {  
    extract(shortcode_atts(array(  
    'id' => '',
    'title' => '',
    'active'=>'n' 
    ), $atts));  
    if(empty($id))
        $id = 'tab_item_'.rand(100,999);

    $output = '<li class="'.($active == 'y' ? 'active' :'').'">
                <a href="#'.$id.'">'.$title.'</a>
                </li>';  
    $output .= '<div class="tab-content">
                 <div class="tab-pane active" id="'.$id.'">'.$content.'</div>
                 <div class="tab-pane"  id="'.$id.'">'.$content.'</div>
                 <div class="tab-pane" id="'.$id.'">'.$content.'</div>
                </div>';
    return $output;
}
add_shortcode("tab", "tab");

它目前返回:

<ul class="nav nav-tabs">
 <li class="active">
                <a href="#home">tab</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="home">home</div>
                 <div class="tab-pane"  id="home">home</div>
                 <div class="tab-pane" id="home">home</div>
                </div>
 <li class="">
                <a href="#about">tab2</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="about">about</div>
                 <div class="tab-pane"  id="about">about</div>
                 <div class="tab-pane" id="about">about</div>
                </div>
 <li class="">
                <a href="#help">tab3</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="help">help</div>
                 <div class="tab-pane"  id="help">help</div>
                 <div class="tab-pane" id="help">help</div>
                </div>
</ul>

我需要它返回:

<ul class="nav nav-tabs "  >
 <li class="active">
    <a href="#home">tab</a>
 </li>
 <li class="">
    <a href="#about">tab2</a>
 </li>
 <li class="">
    <a href="#help">tab3</a>
 </li>
</ul>

<div class="tab-content">
 <div class="tab-pane active" id="home">blah</div>
 <div class="tab-pane" id="about">blah</div>
 <div class="tab-pane" id="help">blah</div>
</div>

我已经添加到输出中，谢谢 Obmerk Kronen。

非常感谢任何帮助。

最佳答案

这里的问题是您需要在 do_shortcode($content) 之后添加您的 div:在解析 tab 短代码时，您需要将 div 保存在某个地方以便能够之后输出它们。

执行此操作的简单方法(不是最好的方法)可能是使用全局变量，例如:

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

关于php - 用于创建选项卡的自定义简码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16414272/