Existe-t-il un moyen simple de créer une méta-boîte avec des onglets similaires à ceux de la méta-boîte Catégories?

12

Ma question est à peu près résumée dans le titre. Je dépose 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'y accrocher, mais je ne me souviens pas comment. Est-ce que quelqu'un sait?

    
posée Jason Rhodes 20.12.2010 - 23:14

1 réponse

13

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
}

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

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

REMARQUES:

  • Utilisée à l'intérieur d'un plugin, la file d'attente devrait 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 masquée est appliquée à chaque contenu DIV après la première afin de les 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 elles resteront masquées. .
  • 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 aurez besoin de restituer 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 d'onglets.
enlace

J'espère que ça aide ..

    
réponse donnée t31os 21.12.2010 - 14:44

Lire d'autres questions sur les étiquettes