問題描述

我的問題幾乎總結在標題中。我在新帖/編輯帖子管理頁面中放置一個元框，我想要能夠使用類別元框具有的選項卡進行設定。我假設有一個簡單的方法來勾勒這個，但我不記得如何。有人知道嗎

最佳解決方案

這是一個非常基本的例子..

/*
    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();
});

筆記：

  • 在外掛中使用，排隊應該呼叫 plugins_url( '/mytabs.js', __FILE__ )代替 get_bloginfo 字串。

  • 每個標籤的錨點連結應與其引用的內容元素的 ID 匹配，例如。 frag1，frag2 等

  • 一個隱藏的類被應用於每個內容 DIV 之後的第一個，所以它們被隱藏在頁面載入 (否則你會注意到頁面中的一個簡短的跳轉)，該類在頁面載入後刪除，否則它們將保持隱藏。

  • 應該更新頂級操作以反映您想要影響的帖子型別 add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );，我在示例中使用 post 。

  • 您將需要將 metabox 渲染在一邊，以便利用現有的 WordPress CSS，它將選項卡 LI 元素放在一起 (您可以隨時載入自己的樣式表來處理 CSS) 。

有關如何配置選項卡指令碼的更多資訊，請參閱此處。 http://docs.jquery.com/UI/Tabs

希望有幫助..

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。