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


13

私の質問はタイトルでかなり要約されています。[新しい投稿] / [投稿の編集]管理ページにメタボックスをドロップします。カテゴリメタボックスのようなタブで設定できるようにしたいです。これに簡単に接続できる方法があると思いますが、その方法を覚えていません。誰か知っていますか?


、メタが持っているマークアップのカテゴリを見て同じHTML構造とクラスを使用すると、あなたは、タブを持っていなければならない
onetrickpony

おかげで-そうしました。JSは(当然)IDを使用して非アクティブなタブを非表示にしていると思います。IDを複製できないため、独自のJSを記述する必要がある場合があります。
ジェイソンロードス

回答:


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

ノート:

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

タブスクリプトの構成方法の詳細については、こちらをご覧ください。
http://docs.jquery.com/UI/Tabs

お役に立てば幸いです。


t31os、wp_enqueue_scriptを次のように変更しました:wp_enqueue_script( 'mytabs'、get_bloginfo( 'template_directory')。 '/js/mytabs.js'、array( 'jquery-ui-tabs')); そして私は、テーマのルートに/ JS /フォルダにmytabs.jsを入れているが、それは仕事をしません
フィリップ

1
@Philip -コードは、作業例であり、..出力ソースを確認し、エンキュー・パスが正しく生成されていることを確認..(またはそれらはすべて一緒に出力されたこと)
t31os

私は間違えます...混乱してごめんなさい!すべてが正常に動作しています。
フィリップ

@Philip-問題のないチームメイト、
無害
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.