这是一个非常基本的示例。
/*
Code assumes it will be in the theme functions.php file
Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );
function add_post_metabox() {
wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}
function my_example_metabox() {
?>
<div id="mytabs">
<ul class="category-tabs">
<li><a href="#frag1">Tab 1</a></li>
<li><a href="#frag2">Tab 2</a></li>
<li><a href="#frag3">Tab 3</a></li>
</ul>
<br class="clear" />
<div id="frag1">
<p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag2">
<p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag3">
<p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<?php
}
排队中引用的mytabs.js的jQuery。
jQuery(document).ready(function($) {
$("#mytabs .hidden").removeClass('hidden');
$("#mytabs").tabs();
});
笔记:
- 在插件内部使用时,应使用enqueue
plugins_url( '/mytabs.js', __FILE__ )
代替get_bloginfo
字符串。
- 每个标签的锚链接应与它所引用的内容元素的ID相匹配。frag1,frag2等
- 在第一个内容DIV之后,将对每个内容DIV应用一个隐藏的类,以便在页面加载时将它们隐藏(否则您会在页面中看到短暂的跳转),在页面加载后将删除该类,否则它们将保持隐藏状态。
- 我应该在示例中
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );
使用顶部动作进行更新,以反映您想要影响的帖子类型post
。
- 您需要在侧面渲染metabox以便利用现有的WordPress CSS将标签LI元素内联放置(您可以始终加载自己的样式表来处理CSS)。
有关如何配置选项卡脚本的更多信息,请参见此处。
http://docs.jquery.com/UI/标签
希望有帮助。