ブートストラップの使い方を学んでいますが、乗り越えられない問題に遭遇しました。[bootstrap_tab name]...[end_bootstrap_tab] の別のインスタンスを追加すると、追加しようとする 2 番目のタブがすべて台無しになります各単語の) は右側に押され、同じ行に複製されます。[end_boostrap_tab] ショートコードを中心に展開する必要があることはわかっています。これは、何も表示されずにタブを表示するためです。そのショートコードをさまざまな場所に配置すると、さまざまな結果が得られますが、何も望ましくありません。
PHPコードとHtmlマークアップは以下のとおりです
[bootstrap_tab name="Tab 1" link="tab1-slug" active="active"]Content for Tab 1[/bootstrap_tab]
[bootstrap_tab name="Tab 2" link="tab2-slug" ]Content for Tab 2[/bootstrap_tab]
[bootstrap_tab name="Tab 3" link="tab3-slug"]Content for Tab 3[/bootstrap_tab]
[end_bootstrap_tab]
// Add Tabs functionality for bootstrap
function bootstraptabs_wp_init() {
global $bootstraptabs_count,$bootstraptabs_tab_count,$bootstraptabs_content;
$bootstraptabs_count=0;
$bootstraptabs_tab_count=0;
$bootstraptabs_content=array();
}
add_action( 'wp', 'bootstraptabs_wp_init' );
function bootstraptabs_tab_shortcode($atts,$content) {
extract(shortcode_atts(array(
'name' => 'Tab Name',
'link' => '',
'active' => '',
), $atts));
global $bootstraptabs_content,$bootstraptabs_tab_count,$bootstraptabs_count;
$bootstraptabs_content[$bootstraptabs_tab_count]['name'] = $name;
$bootstraptabs_content[$bootstraptabs_tab_count]['link'] = $link;
$bootstraptabs_content[$bootstraptabs_tab_count]['active'] = $active;
$bootstraptabs_content[$bootstraptabs_tab_count]['content'] = do_shortcode($content);
$bootstraptabs_tab_count = $bootstraptabs_tab_count+1;
}
add_shortcode('bootstrap_tab', 'bootstraptabs_tab_shortcode');
function bootstraptabs_end_shortcode($atts) {
global $bootstraptabs_content,$bootstraptabs_tab_count,$bootstraptabs_count;
if($bootstraptabs_tab_count!=0 and isset($bootstraptabs_tab_count)) {
$tab_content = '<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">';
for($i=0;$i<$bootstraptabs_tab_count;$i++) {
$tab_content = $tab_content.'<li class="tabs '.$bootstraptabs_content[$i]['active'].'"><a data-toggle="tab" href="#'.$bootstraptabs_content[$i]['link'].'">'.$bootstraptabs_content[$i]['name'].'</a></li>';
}
$tab_content = $tab_content.'</ul><div id="my-tab-content" class="tab-content">';
$tab_html='';
for($i=0;$i<$bootstraptabs_tab_count;$i++) {
$link_html = $bootstraptabs_content[$i]['link'];
$tab_html.='<div id="'.$bootstraptabs_content[$i]['link'].'" class="tab-pane '.$bootstraptabs_content[$i]['active'].'"><p>'.$bootstraptabs_content[$i]['content'].'</p></div>';
}
$tab_content = $tab_content.$tab_html;
}
$tab_content = $tab_content;
return $tab_content;
}
add_shortcode('end_bootstrap_tab', 'bootstraptabs_end_shortcode');
これは、タブ情報を含む私の wordpress 投稿です。
[bootstrap_tab name="Acrobats" link="tab1-slug"]Content for Acrobats[/bootstrap_tab]
[bootstrap_tab name="Audio & Music" link="tab2-slug" ]Content for Audio&Music[/bootstrap_tab]
[bootstrap_tab name="Bands" link="tab3-slug"]Content for Bands[/bootstrap_tab]
[bootstrap_tab name="Category X" link="tab4-slug" ]Content for Category X[/bootstrap_tab]
[bootstrap_tab name="Category Y" link="tab5-slug"]Content for Catgeory Y[/bootstrap_tab]
[bootstrap_tab name="Category Z" link="tab5-slug"]Content for Catgeory Z[/bootstrap_tab]
[end_bootstrap_tab]
[bootstrap_tab name="Acrobats2" link="tab6-slug"]Content for Acrobats[/bootstrap_tab]
[bootstrap_tab name="Audio &2; Music" link="tab7-slug" ]Content for Audio&Music[/bootstrap_tab]
[bootstrap_tab name="Bands2" link="tab8-slug"]Content for Bands[/bootstrap_tab]
[bootstrap_tab name="Category X2" link="tab9-slug" ]Content for Category X[/bootstrap_tab]
[bootstrap_tab name="Category Y2" link="tab10-slug"]Content for Catgeory Y[/bootstrap_tab]
[bootstrap_tab name="Category Z2" link="tab11-slug"]Content for Catgeory Z[/bootstrap_tab]
[end_bootstrap_tab]