¿Hay una manera fácil de hacer que un cuadro de meta tenga las pestañas como las que tiene el cuadro de categorías?

12

Mi pregunta está bastante resumida en el título. Estoy soltando un cuadro de meta en la página de administración Nueva entrada / Editar publicación, y quiero poder configurarlo con pestañas como las que tiene el cuadro de categorías. Supongo que hay una manera fácil de engancharme a esto, pero no puedo recordar cómo. ¿Alguien sabe?

    
pregunta Jason Rhodes 20.12.2010 - 23:14

1 respuesta

13

Aquí hay un ejemplo muy básico ...

/*
    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
}

El jQuery para el mytabs.js al que se hace referencia en la cola.

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

NOTAS:

  • Usado dentro de un complemento, la cola debe llamar a plugins_url( '/mytabs.js', __FILE__ ) en lugar de la cadena get_bloginfo .
  • El enlace de anclaje para cada pestaña debe coincidir con el ID del elemento de contenido al que hace referencia, por ejemplo. frag1, frag2, etc.
  • Se aplica una clase oculta a cada DIV de contenido después de la primera para que se oculten en la carga de la página (de lo contrario notará un breve salto en la página), la clase se eliminará después de la carga de la página, de lo contrario permanecerán ocultas .
  • La acción superior debe actualizarse para reflejar el tipo de publicación que desea afectar a add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' ); , usé post en el ejemplo.
  • Deberá representar el metabox en el lado para utilizar el WordPress CSS existente que coloca los elementos de la pestaña LI en línea (aunque siempre puede cargar su propia hoja de estilo para lidiar con el CSS).

Consulte aquí para obtener más información sobre cómo configurar el script de pestañas.
enlace

Espero que ayude ..

    
respondido por el t31os 21.12.2010 - 14:44

Lea otras preguntas en las etiquetas