有没有一种简单的方法可以使meta框具有类似于Categories meta框的选项卡?


13

标题中几乎概括了我的问题。我在“新建帖子” /“编辑帖子”管理页面中放置一个元框,并且希望能够使用“类别”元框具有的选项卡进行设置。我认为有一个简单的方法可以解决这个问题,但是我不记得怎么做。有人知道吗


查看类别meta的标记,使用相同的html结构和类,并且应该有选项卡
onetrickpony 2010年

谢谢-这样做了,我认为JS(正确地)使用ID隐藏了不活动的标签。不能重复ID,因此我可能只需要编写自己的JS。
杰森·罗德斯

Answers:


13

这是一个非常基本的示例。

/*
    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/标签

希望有帮助。


t31os,我将wp_enqueue_script更改为:wp_enqueue_script('mytabs',get_bloginfo('template_directory')。'/js/mytabs.js',array('jquery-ui-tabs'));; 而且我已经将mytabs.js放在主题根目录的/ js /文件夹中,但它不起作用
Philip

1
@Philip -该代码是一个工作实施例中,检查输出源并验证排队路径是否被正确产生..(或者他们已经输出所有一起)..
t31os

我犯了一个错误...很抱歉给您带来混乱!一切正常。
菲利普(Philip)2010年

@Philip-没有问题的伴侣,没有造成伤害..;)
t31os 2010年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.