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 ..