<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不是我的强项。我真的需要这方面的帮助。
好的，
我找到了有用的例子。我决定与它分享。
答
$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');
这是使用基于类的方法的另一种工作解决方案。这是使用全局变量的不错替代方法。有关其工作原理的说明，请参阅此链接。
<?php
/**
* Tabs Short Code
*/
if ( ! class_exists( 'TabsClass' ) ) {
class TabsClass {
protected $_tabs_divs;
public function __construct($tabs_divs = '') {
$this->_tabs_divs = $tabs_divs;
add_shortcode( 'tabs', array( $this, 'tabs_wrap') );
add_shortcode( 'tab', array( $this,'tab_block') );
}
function tabs_wrap ( $args, $content = null ) {
$output = '<div class="tabs"><ul>' . do_shortcode($content) . '</ul>';
$output .= $this->_tabs_divs . '</div>';
return $output;
}
function tab_block( $args, $content = null ) {
extract(shortcode_atts(array(
'id' => '',
'title' => '',
), $args));
$output = '
<li>
<a href="#'.$id.'">'.$title.'</a>
</li>
';
$this->_tabs_divs.= '<div id="'.$id.'">'.$content.'</div>';
return $output;
}
}
new TabsClass;
}
这是这篇文章中与wordpress简码API相关的一个很好的例子
http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/
还描述了每一个点，帮助你比你的期望更多。
为什么要重新发明轮子？您正在使用WordPress，也使用插件（有很多标签）：
1） http://wordpress.org/plugins/tabs-shortcode/
2） http://wordpress.org/plugins/wp-ui/faq/
3） http://wordpress.org/plugins/put/screenshots/