web-dev-qa-db-ja.com

カテゴリメタボックスのようにメタボックスにタブを持たせる簡単な方法はありますか？

私の質問は、タイトルにかなりまとめられています。 New Post/Edit Post管理ページにメタボックスをドロップしていますが、Categoriesメタボックスのようにタブで設定できるようにしたいです。私はこれに引っ掛かる簡単な方法があると思います、しかし私はその方法を覚えていません。誰か知っていますか？

categoriesmetabox
12
Jason Rhodes

これは非常に基本的な例です。

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

注：

  • プラグインの内部で使用される場合、エンキューはget_bloginfo文字列の代わりにplugins_url( '/mytabs.js', __FILE__ )を呼び出す必要があります。
  • 各タブのアンカーリンクは、それが参照しているコンテンツ要素のIDと一致する必要があります。 frag1、frag2など.
  • 非表示クラスは最初の後に各コンテンツDIVに適用されるため、ページの読み込み時には非表示になります（そうでない場合はページ内の短いジャンプに気付くことになります）。
  • Topアクションは、add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );を実行したい投稿タイプを反映するように更新する必要があります。例ではpostを使用しました。
  • タブのLI要素をインラインに配置する既存のWordPress CSSを利用するには、メタボックスを横にレンダリングする必要があります（ただし、CSSを処理するために独自のスタイルシートをいつでもロードできます）。

タブスクリプトの設定方法については、こちらを参照してください。
http://docs.jquery.com/UI/Tabs

それが役立つことを願っています..

13
t31os