web-dev-qa-db-fra.com

Existe-t-il un moyen simple de créer une méta-boîte avec les onglets comme dans la méta-boîte Catégories?

Ma question est résumée dans le titre. Je laisse tomber une méta-boîte dans la page d'administration Nouvelle publication/Modifier une publication et je souhaite pouvoir la configurer avec des onglets similaires à ceux de la boîte à méta Catégories. Je suppose qu'il y a un moyen facile de s'en occuper, mais je ne me souviens pas comment. Est-ce que quelqu'un sait?

categoriesmetabox
12
Jason Rhodes

Voici un exemple très basique ..

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

Le jQuery pour le mytabs.js référencé dans la file d'attente.

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

NOTES:

  • Utilisée à l'intérieur d'un plugin, la file d'attente doit appeler plugins_url( '/mytabs.js', __FILE__ ) à la place de la chaîne get_bloginfo.
  • Le lien d'ancrage de chaque onglet doit correspondre à l'ID de l'élément de contenu auquel il fait référence, par exemple. frag1, frag2, etc.
  • Une classe cachée est appliquée à chaque contenu DIV après la première afin de le masquer au chargement de la page (sinon, vous remarquerez un bref saut dans la page), la classe est supprimée après le chargement de la page, sinon ils resteront masqués.
  • L'action supérieure doit être mise à jour pour refléter le type de publication que vous souhaitez appliquer à add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );; j'ai utilisé post dans l'exemple.
  • Vous devrez rendre la métabox sur le côté pour utiliser le CSS WordPress existant qui positionne les éléments d'onglet LI en ligne (vous pouvez toujours charger votre propre feuille de style pour gérer le CSS).

Voir ici pour plus d'informations sur la configuration du script des onglets.
http://docs.jquery.com/UI/Tabs

J'espère que cela pourra aider..

13
t31os