В настоящее время я пытаюсь создать шорткод для 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.
Любая помощь с благодарностью.