Czy istnieje prosty sposób, aby meta-pudełko zawierało zakładki, tak jak ma to miejsce w kategorii?

13

Moje pytanie jest dość podsumowane w tytule. Upuszczam meta box na stronie administratora New Post / Edit Post i chcę mieć możliwość skonfigurowania go za pomocą kart takich jak meta box Kategorie. Zakładam, że istnieje łatwy sposób, aby się do tego przyczepić, ale nie pamiętam, jak to zrobić. Czy ktoś wie?

Jason Rhodes
źródło
spójrz na narzut, który ma meta kategorii, użyj tej samej struktury HTML i klas, i powinieneś mieć tabulatory
onetrickpony
Dzięki - zrobiłem to i myślę, że JS (słusznie) używa identyfikatorów do ukrywania nieaktywnych kart. Nie mogę powielić identyfikatorów, więc może być konieczne napisanie własnego JS.
Jason Rhodes

Odpowiedzi:

13

Oto bardzo prosty przykład ..

/*
    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 dla mytabs.js przywoływanych w kolejce.

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

UWAGI:

  • Używana wewnątrz wtyczki, kolejka powinna wywoływać plugins_url( '/mytabs.js', __FILE__ )zamiast get_bloginfołańcucha.
  • Link kotwicy dla każdej karty powinien być zgodny z identyfikatorem elementu treści, do którego się odnosi, np. frag1, frag2 itp.
  • Ukryta klasa jest stosowana do każdego DIV zawartości po pierwszym, więc są one ukryte podczas ładowania strony (inaczej zauważysz krótki skok na stronie), klasa zostanie usunięta po załadowaniu strony, w przeciwnym razie pozostaną ukryte.
  • Najważniejsze działanie powinno zostać zaktualizowane, aby odzwierciedlić typ postu, który chcesz zastosować add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, użyłem postw tym przykładzie.
  • Będziesz musiał wyrenderować metaboks na boku, aby wykorzystać istniejący CSS WordPress, który ustawia elementy LI w zakładce (zawsze możesz załadować własny arkusz stylów, aby poradzić sobie z CSS).

Zobacz tutaj, aby uzyskać więcej informacji na temat konfigurowania skryptu kart.
http://docs.jquery.com/UI/Tabs

Mam nadzieję, że to pomoże ..

t31os
źródło
t31os, zmieniłem skrypt wp_enqueue_script na: wp_enqueue_script ('mytabs', get_bloginfo ('katalog_ szablonów'). '/js/mytabs.js', tablica ('jquery-ui-tabs')); i umieściłem plik mytabs.js w folderze / js / w katalogu głównym motywu, ale to nie działa
Philip
1
@Philip - Kod jest działającym przykładem, sprawdź źródło danych wyjściowych i sprawdź, czy ścieżki kolejki są poprawnie tworzone. (Lub czy zostały wyprowadzone razem) ..
t31os
popełniam błąd ... przepraszam za zamieszanie! wszystko działa dobrze.
Philip
@Philip - Nie ma problemu, kolego, nie wyrządzono krzywdy ..;)
t31os