创建一个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标签短代码

回答

相关问题