WP 引导选项卡

Posted

技术标签:

【中文标题】WP 引导选项卡【英文标题】:WP Bootstrap Tabs 【发布时间】:2013-11-18 22:00:55 【问题描述】:

我正在学习使用引导程序,但遇到了一个我无法解决的问题。当添加 [bootstrap_tab name]...[end_bootstrap_tab] 的另一个实例时,我尝试添加的第二个选项卡全部搞砸了,你可以view here 它似乎重复了第一个选项卡和我的第二个选项卡(数字 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 &amp; Music" link="tab2-slug" ]Content for Audio&amp;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 &amp;2; Music" link="tab7-slug" ]Content for   Audio&amp;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]

【问题讨论】:

【参考方案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

【讨论】:

感谢您的回复!我将它添加到我的代码中,我对 CSS 部分“ul#tabs-0”“div#my-tab-content-0”感到困惑我意识到唯一 ID 会很有用,但只是不确定如何实现它进入短代码或 CSS 更清晰会很棒。 我认为你可以使用$_tab_count 我在 CSS 中添加了 div#my-tab-content-0 并将文本着色为红色。似乎没有添加标签计数器,它们都是“0”。 $_tab_count 怎么加? 我会尝试添加一个新的global 来跟踪这个号码。不建议使用全局变量,最好使用 OOP,但既然你已经有了一些,那就再添加一个。

以上是关于WP 引导选项卡的主要内容,如果未能解决你的问题,请参考以下文章

引导选项卡:将 NGL 查看器加载到选项卡中

折叠引导选项卡 - 无法切换 .active 选项卡类

更改选项卡后从链接禁用引导打开选项卡

Rails 引导选项卡。选项卡中的 Dropzone 不起作用

部分中的引导选项卡

仅刷新包含 iframe 的引导程序中的当前导航选项卡