WP 부트 스트랩 탭

Question

부트 스트랩을 사용하는 법을 배우고 있으며 과거에 얻을 수없는 문제가 있습니다. [bootstrap_tab 이름]의 다른 인스턴스를 추가 할 때 ... [end_bootstrap_tab] 추가하려고하는 두 번째 탭이 모두 엉망이 될 수 있습니다. view here 첫 번째 탭과 두 번째 탭 (두 번째 탭은 각 단어)는 같은 줄에 복제본과 함께 오른쪽으로 밀려납니다. 나는 그 결과가 다른 결과를 얻지 만 다른 곳에서는 짧은 코드를 놓을 때 아무 것도 나타나지 않고 탭을 표시하기 때문에 [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'); 

이하 주시면 감사하겠습니다 어떤 도움이 탭의 정보를 포함하는 내 워드 프레스 게시물입니다 :

이

[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] 

Answer 1

이 설정을 재현 할 수 없음을 하지만 가장 먼저 다루는 것은 탭의 고유 ID입니다.

$tabs_counter = 0; // Auxiliary 
$tab_content = '<ul id="tabs-' . $tabs_counter . '" 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-' . $tabs_counter . '" class="tab-content">'; 

그래서, 당신은 쌍 가지고 : 답장을 보내

• ul#tabs-0 --->div#my-tab-content-0
• ul#tabs-1 --->div#my-tab-content-1
• 등