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

13

Mi pregunta se resume en el título. Estoy soltando un cuadro meta en la página de administración Publicación nueva / Editar publicación, y quiero poder configurarlo con pestañas como la del cuadro meta Categorías. Supongo que hay una manera fácil de conectar con esto, pero no recuerdo cómo. ¿Alguien sabe?

Jason Rhodes
fuente
mire el marcado que tiene el meta categorías, use la misma estructura y clases html, y debería tener pestañas
onetrickpony
Gracias, hice eso y creo que el JS está (con razón) usando ID para ocultar las pestañas inactivas. No puedo duplicar ID, por lo que es posible que deba escribir mi propio JS.
Jason Rhodes

Respuestas:

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 mytabs.js al que se hace referencia en la cola.

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

NOTAS

  • Utilizado dentro de un complemento, la cola debe llamar plugins_url( '/mytabs.js', __FILE__ )en lugar de la get_bloginfocadena.
  • El enlace de anclaje para cada pestaña debe coincidir con la ID del elemento de contenido al que se refiere, por ejemplo. frag1, frag2, etc.
  • Se aplica una clase oculta a cada contenido DIV después del primero para que estén ocultos en la carga de la página (de lo contrario, notará un breve salto en la página), la clase se elimina después de la carga de la página, de lo contrario permanecerán ocultos.
  • La acción superior debe actualizarse para reflejar el tipo de publicación que desea efectuar add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, utilicé posten el ejemplo.
  • Deberá representar el metabox en el lateral para utilizar el CSS de WordPress existente que posiciona los elementos LI de la pestaña 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.
http://docs.jquery.com/UI/Tabs

Espero que ayude..

t31os
fuente
t31os, he cambiado el wp_enqueue_script a: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs')); y puse mytabs.js en la carpeta / js / en la raíz del tema pero no funciona
Philip
1
@Philip - El código es un ejemplo de trabajo, comprobar la fuente de salida y verificar los caminos enqueue se producen correctamente .. (o que han estado todos juntos de salida) ..
t31os
Me equivoco ... perdón por cualquier confusión! Todo funciona bien.
Philip
@Philip - No hay problema amigo, no hay daño ..;)
t31os