Question

<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不是我的强项。我真的需要帮助。

Answer 1

好的，我找到了有用的例子。我决定与它分享。

<强>答案

$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');

Answer 2

这是使用基于类的方法的另一种工作解决方案。这是使用全局变量的一个很好的替代方案。请参阅此link以获取有关其工作原理的说明。

<?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;
}

Answer 3

这篇文章中有一个与wordpress短代码API相关的好例子

http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

还描述了可以帮助您超出预期的每一点。

Answer 4

为什么重新发明轮子？你正在使用WordPress，也使用插件（有很多选项卡）：

1）http://wordpress.org/plugins/tabs-shortcode/

2）http://wordpress.org/plugins/wp-ui/faq/

3）http://wordpress.org/plugins/put/screenshots/

标签短代码 - WordPress

4 个答案: