創建一個jQuery標籤短代碼

我想創建一個jQuery標籤短代碼爲WordPress這是我的代碼在我的functions.php由於某些原因標籤顯示等，但他們不會改變？創建一個jQuery標籤短代碼

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

// this variable will hold your divs 
$tabs_divs = ''; 

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

    // reset divs 
    $tabs_divs = ''; 

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

    $output = '<ul class="nav nav-tabs '.$class.'" '; 

    if(!empty($id)) 
     $output .= 'id="'.$id.'"'; 

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

    return $output; 
} 


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

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

    if(empty($id)) 
     $id = 'tab_item_'.rand(100,999); 

    $activeClass = $active == 'y' ? 'active' :''; 
    $output = ' 
     <li class="'.$activeClass.'"> 
      <a href="#'.$id.'">'.$title.'</a> 
     </li> 
    '; 

    $tabs_divs.= '<div class="tab-pane '.$activeClass.'" id="'.$id.'">'.$content.'</div>'; 

    return $output; 
}

這是什麼在我的頭：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

而且我的網頁上，我有：

[tabs] 
[tab title="tab" active="y" id="home"]home[/tab] 
[tab title="tab2" active="n" id="about"]about[/tab] 
[tab title="tab3" active="n" id="help"]help[/tab] 
[/tabs]

編輯！

function tabs_header() { 

//wp_enqueue_script('jquery'); 

wp_register_script('add-jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('jquery'),'',true ); 
wp_register_script('add-jqueryui-js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('jquery'),'',true ); 


wp_enqueue_style('add-jquery-js'); 
wp_enqueue_style('add-jqueryui-js'); 

} 
add_action('wp_enqueue_scripts', 'tabs_header');

來源

2013-07-25 user1415303

[瀏覽器控制檯]沒有錯誤（http://gardengnomesoftware.com/wiki/Using_The_Browser_Error_Console）？另請參閱：[在WordPress中調試]（http://codex.wordpress.org/Debugging_in_WordPress）。您必須將工作簡單的HTML/JS代碼與網站輸出的代碼進行比較。 – brasofilo

控制檯沒有錯誤所有信息都顯示正常，但不會更改標籤 – user1415303

要將HTML/JS轉換爲WordPress，**必須將工作代碼與WP結果進行比較**。你如何排練腳本？檢查[this]（http://wordpress.stackexchange.com/q/556/12615）。 – brasofilo

除非你真的知道自己在做什麼，don't enqueue external jQuery sources。大部分的WordPress/jQuery bug都是因爲這個。讓WP使用其捆綁的jQuery版本，你很好。

你沒有顯示你的標籤腳本，但我想你有一個。這是我怎麼會入隊一個jQuery的標籤腳本（I have this working plugin at GitHub for an Audio Player）：

add_action('wp_enqueue_scripts', 'enqueue_scripts_so_17856211'); 

function enqueue_scripts_so_17856211() 
{ 
    wp_enqueue_style( 
     'tabs-css', 
     get_stylesheet_directory_uri() . '/css/tabs.css' 
    ); 
    wp_enqueue_script( 
     'tabs-js', 
     get_stylesheet_directory_uri() . '/js/tabs.js', 
     array('jquery', 'jquery-ui'), 
     false, 
     false 
    ); 
}

注意your-script.js是being enqueued與jquery和jquery-ui依賴。

來源

2013-07-25 21:57:11 brasofilo

創建一個jQuery標籤短代碼

回答

相關問題