Есть ли простой способ заставить мета-блок иметь вкладки, как у мета-блока Categories?

13

Мой вопрос в значительной степени обобщен в названии. Я опускаю мета-поле на странице администрирования «Новая запись / Редактировать запись» и хочу, чтобы его можно было настроить с помощью вкладок, как в мета-поле «Категории». Я предполагаю, что есть простой способ подключиться к этому, но я не могу вспомнить как. Кто-нибудь знает?

Джейсон Роудс
источник
посмотрите на разметку категорий, которые есть у мета, используйте ту же HTML-структуру и классы, и у вас должны быть вкладки
onetrickpony
Спасибо - сделал это, и я думаю, что JS (по праву) использует идентификаторы, чтобы скрыть неактивные вкладки. Не могу дублировать идентификаторы, поэтому мне может понадобиться написать свой собственный 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
}

JQuery для mytabs.js, на который есть ссылка в очереди.

jQuery(document).ready(function($) {
    $("#mytabs .hidden").removeClass('hidden');
    $("#mytabs").tabs();
});

ПРИМЕЧАНИЯ:

  • Используемый внутри плагина, enqueue должен вызывать plugins_url( '/mytabs.js', __FILE__ )вместо get_bloginfoстроки.
  • Якорная ссылка для каждой вкладки должна соответствовать идентификатору элемента содержимого, к которому она относится, например. frag1, frag2 и т. д.
  • Скрытый класс применяется к каждому контенту DIV после первого, поэтому они скрываются при загрузке страницы (иначе вы заметите короткий скачок на странице), класс удаляется после загрузки страницы, иначе они остаются скрытыми.
  • Верхнее действие должно быть обновлено, чтобы отразить тип поста, который вы хотите применить add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, я использовал postв примере.
  • Вам нужно будет визуализировать метабокс в стороне, чтобы использовать существующий WordPress CSS, который помещает элементы LI вкладки в линию (хотя вы всегда можете загрузить свою собственную таблицу стилей, чтобы иметь дело с CSS).

Смотрите здесь для получения дополнительной информации о том, как настроить скрипт вкладок.
http://docs.jquery.com/UI/Tabs

Надеюсь, это поможет..

t31os
источник
t31os, я изменил wp_enqueue_script на: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs')); и я поместил mytabs.js в папку / js / в корне темы, но она не работает
Филипп
1
@Philip - код является рабочим примером, проверьте источник вывода и убедитесь, что пути очереди создаются правильно ... (или что они были выведены все вместе) ..
t31os
я ошибаюсь ... извините за путаницу! все работает нормально.
Филипп
@Philip - Нет проблем, приятель, никакого вреда не сделано ..;)
t31os