尝试使用WordPress短代码创建Bootstrap选项卡。
我构建的短代码以这种方式构建：
[tabs tabcount="3"]
[tab title="Tab A"]
This is Tab A content
[/tab]
[tab title="Tab B"]
This is Tab B content
[/tab]
[tab title="Tab C"]
This is Tab C content
[/tab]
[/tabs]
用户在 tabcount 属性中输入他们创建的标签数量，然后该功能应使用此功能输出x个标签和标签内容区域。
function bootstrap_tabs_wrapper($atts, $content = null){
$atts = shortcode_atts(
array(
'id' => '',
'class' => '',
'title' => '',
'tabcount' => '',
), $atts
);
global $tabcount;
$tabcount = $atts['tabcount'];
$output = '<section class="tabs" data-tabcount="'.$tabcount.'">';
$output .= do_shortcode($content);
$output .= '</section>';
return $output;
}
add_shortcode('tabwrap', 'bootstrap_tabs_wrapper');
// actual tabs bit inside the main tab
function bootstrap_tabs_content($atts, $content = null) {
$atts = shortcode_atts(
array(
'id' => '',
'class' => '',
'title' => '',
), $atts
);
// if currentTab is < number of tabs user has chosen in shortcode attribute
for ($currentTab=0; $currentTab<$GLOBALS['tabcount'];$currentTab++){
// check if first tab and add active class
$active = '';
if($currentTab === 0){
echo '<nav class="nav nav-tabs" id="myTabs" role="tablist">';
$active = 'active';
}
echo '<a class="nav-item nav-link '.$active.'" id="'.$currentTab.'-tab" data-toggle="tab" href="#'.$currentTab.'" role="tab" aria-controls="'.$currentTab.'" aria-selected="true">'.$atts['title'].'</a>';
}
echo '</nav>';
// if currentTabContent < number of tabs user has chosen in shortcode attribute
for ($currentTabContent=1; $currentTabContent<$GLOBALS['tabcount'];$currentTabContent++){
// check if first tab content area and add active class
$active = '';
if($currentTabContent === 1){
echo '<div class="tab-content" id="mytabContent">';
$active = 'active';
}
echo '<div class="tab-pane fade show '.$active.'" id="'.$currentTabContent.'" role="tabpanel" aria-labelledby="'.$currentTabContent.'-tab">'.do_shortcode($content).'</div>';
}
echo '</div>';
}
add_shortcode('mytabs', 'bootstrap_tabs_content');
问题是<nav>部分会显示三次，而不是只显示三个标签。
