Чи є простий спосіб зробити мета-поле таким чином, щоб вкладки були як мета-вікно Категорії?


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у прикладі.
  • Вам потрібно буде візуалізувати метабокс у сторону, щоб використовувати існуючий CSS WordPress, який розміщує елементи вкладки LI у рядку (ви завжди можете завантажити свій власний таблицю стилів для роботи з 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')); і я поставив mytabs.js до папки / js / у корені теми, але вона не працює
Філіп

1
@Philip - Код є робочим прикладом, перевірте вихідне джерело і переконайтеся, що шляхи до запитів створюються правильно .. (або що вони були виведені всі разом) ..
t31os

я помиляюся ... вибачте за будь-яку плутанину! все працює добре.
Філіп

@Philip - Немає проблемних товаришів, шкоди не завдано ..;)
t31os
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.