爲jQuery UI選項卡創建wordpress短代碼

Question

我正在嘗試創建一個允許用戶創建jQuery UI選項卡的wordpress短代碼。我在網上發現了這個偉大的腳本，聲稱這樣做 - 但它在我的頁面中有一些非常不受歡迎的結果。

首先，我目前使用的腳本如下：

add_shortcode('tabgroup', 'jqtools_tab_group'); 
function jqtools_tab_group($atts, $content) 
{ 
    $GLOBALS['tab_count'] = 0; 

    do_shortcode($content); 

    if(is_array($GLOBALS['tabs'])){ 
     foreach($GLOBALS['tabs'] as $tab){ 
      $tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>'; 
      $panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>'; 
     } 
     $return = "\n".'<!-- the tabs --><ul class="tabs">'.implode("\n", $tabs).'</ul>'."\n".'<!-- tab "panes" --><div class="panes">'.implode("\n", $panes).'</div>'."\n"; 
    } 
    return $return; 
} 

add_shortcode('tab', 'jqtools_tab'); 
function jqtools_tab($atts, $content) 
{ 
    extract(shortcode_atts(array(
      'title' => 'Tab %d' 
    ), $atts)); 

    $x = $GLOBALS['tab_count']; 
    $GLOBALS['tabs'][$x] = array('title' => sprintf($title, $GLOBALS['tab_count']), 'content' => $content); 

    $GLOBALS['tab_count']++; 
} 

然而，HTML輸出我想實現的是：

<div class="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
     <li><a href="#tabs-3">Tab 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Content</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Content</p> 
    </div> 
</div> 

短碼PHP提供了一個稍微不同的輸出到我需要做的工作 - 這裏是我當前輸出的HTML：

<!-- the tabs --> 
<ul class="tabs"> 
<li><a class="" href="#">Tab 0</a></li> 
<li><a class="" href="#">Tab 1</a></li> 
<li><a class="" href="#">Tab 2</a></li> 
</ul> 
<!-- tab "panes" --> 
<div class="panes"> 
    <div class="pane"> 
     <h3>Tab 0</h3>Content 
    </div> 
    <div class="pane"> 
     <h3>Tab 1</h3>Content 
    </div> 
    <div class="pane"> 
     <h3>Tab 2</h3>Content 
    </div> 
</div> 

最後，簡碼我使用看起來像這樣：

[tabgroup] 

[tab title="tab1"]Content[/tab] 

[tab title="tab2"]Content[/tab] 

[tab title="tab3"]Content[/tab] 

[/tabgroup] 

我的問題是，如何我需要改變我的PHP代碼，使輸出的HTML樣子，使標籤工作所需的HTML？

Answer 1

好吧，這是你必須做的。

if(is_array($GLOBALS['tabs'])){ 
    foreach($GLOBALS['tabs'] as $k=>$tab){ 
     $tabs[] = '<li><a href="#tab-'.$k.'">'.$tab['title'].'</a></li>'; 
     $panes[] = '<div id="tab-'.$k.'"><p>'.$tab['content'].'</p></div>'; 
    } 
    $return = "\n".'<!-- the tabs --><div class="tabs"><ul>'.implode("\n", $tabs).'</ul>'."\n".'<!-- tab "panes" -->'.implode("\n", $panes).'</div>'."\n"; 
} 

Answer 2

您還可以添加簡碼如下： -

// Tab 
function tab_shortcode($atts, $content = null) { 
    extract(shortcode_atts(array(
     'title' => '' 
    ), $atts)); 
    return '<div id="tabs-'. sanitize_title($title) .'">'. do_shortcode($content) .'</div>'; 
} 
add_shortcode('tab', 'tab_shortcode'); 

// Tabs Container 
function tabs_container_shortcode($atts, $content = null) { 

    preg_match_all('/tab title="([^\"]+)"/i', $content, $matche, PREG_OFFSET_CAPTURE); 

    $tab_title = array(); 

    if(isset($matche[1])) { 
     $tab_title = $matche[1]; 
    } 

    $output = ''; 

    if(count($tab_title)) { 
     $output .= '<div id="tabs">'; 
     $output .= '<ul class="nav clearfix">'; 
     foreach($tab_title as $tab){ 
      $output .= '<li><a href="#tabs-'. sanitize_title($tab[0]) .'">' . $tab[0] . '</a></li>'; 
     } 
     $output .= '</ul>' . do_shortcode($content) . '</div>'; 
    } else { 
     $output .= do_shortcode($content); 
    } 

    return $output; 

} 
add_shortcode('tabs_container', 'tabs_container_shortcode'); 

這也將爲標籤的工作。希望這會幫助你。