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_bloginfo
cadena.
- 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é post
en 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..