Creating tabs shortcode

时间:2013-09-25 作者:user2587741

<div id="tab-side-container">
 <ul>
  <li><a href="#side-tab1">Tab 1</a></li>
  <li><a href="#side-tab2">The Second Tab</a></li>
  <li><a href="#side-tab3">Tab C</a></li>
 </ul>
 <div class="panel-container">
  <div id="side-tab1">
   <h2>Configurations</h2>
   <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
  </div>
  <div id="side-tab2">
   <h2>Heading 2</h2>
   <p>Stuff from the second tab.</p>
  </div>
  <div id="side-tab3">
   <h2>Heading 3</h2>
   <p>More stuff from the last tab.</p>
  </div>
 </div>
</div>

http://codex.wordpress.org/Shortcode_API

我试图在没有JavaScript的WordPress中为选项卡设置一个短代码,但PHP不是我的强项。我真的需要帮助。

2 个回复
SO网友:Dave Romsey

用户2587741在问题中发布了他们问题的答案:

$tabs_divs = \'\';

function tabs_group($atts, $content = null ) {
    global $tabs_divs;

    $tabs_divs = \'\';

    $output = \'<div id="tab-side-container"><ul\';
    $output.=\'>\'.do_shortcode($content).\'</ul>\';
    $output.= \'<div class="panel-container">\'.$tabs_divs.\'</div>\';

    return $output;  
}  


function tab($atts, $content = null) {  
    global $tabs_divs;

    extract(shortcode_atts(array(  
        \'id\' => \'\',
        \'title\' => \'\', 
    ), $atts));  

    if(empty($id))
        $id = \'side-tab\'.rand(100,999);

    $output = \'
        <li>
            <a href="#\'.$id.\'">\'.$title.\'</a>
        </li>
    \';

    $tabs_divs.= \'<div id="\'.$id.\'">\'.$content.\'</div>\';

    return $output;
}

add_shortcode(\'tabs\', \'tabs_group\');
add_shortcode(\'tab\', \'tab\');

SO网友:Jignesh Patel

创建选项卡短代码。使用引导选项卡面板,所以必须在HTML中使用引导类,并且不要缺少引导js和css链接
Code put in your current theme function.php file 然后用这个[tab_review] 更多信息:http://getbootstrap.com/javascript/#tabs

function tab_custom() {
    $tab_data=\'\';
    $tab_data.=\'<div id="tab-side-container">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <h2>Home</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <h2>Profile</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <h2>Messages</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <h2>Settings</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
        </div>
    </div>\';
    return $tab_data;
}
add_shortcode( \'tab_review\', \'tab_custom\' ); 

结束

相关推荐

Custom field in a shortcode?

我无法将图像从我的一个字段转换为短代码(它与get_the_post_thumbnail($post->ID, \'thumbnail\') 但我需要字段中的值udstiller logo.function logo_shortcode( $atts ) { extract( shortcode_atts( array( \'limit\' => \'50\', \'orderby\' => \'name\',