标签简码 - WordPress答案

【问题标题】：Tabs shortcode - WordPress标签简码 - WordPress
【发布时间】：2013-09-25 09:22:04
【问题描述】：

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

【问题讨论】：

为什么没有javascript？
因为我认为没有必要

标签： php wordpress tabs

【解决方案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');

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

还描述了比您的期望更能帮助您的每一点。

【讨论】：

【解决方案4】：

为什么要重新发明轮子？您正在使用 WordPress，也使用插件（标签有很多）：

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

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

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

【讨论】：

因为自己写插件很有趣？