Репликация вкладок Bootstrap 4 с использованием шорткодов WordPress

Попытка создания вкладок Bootstrap с помощью шорткодов WordPress.

Созданный шорткод структурирован следующим образом:

[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 атрибут, а затем функция должна использовать это для вывода х количество вкладок и областей содержимого вкладок.

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> детали отображаются три раза, а не три вкладки.

Скриншот вкладок

Снимок экрана с макетом HTML в окне инспектора

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector