Existe-t-il un moyen simple de faire en sorte qu'une méta-boîte ait les onglets comme la méta-boîte Catégories?


13

Ma question est à peu près résumée dans le titre. Je laisse tomber une méta-boîte dans la page d'administration New Post / Edit Post, et je veux pouvoir la configurer avec des onglets comme la méta-boîte Catégories. Je suppose qu'il existe un moyen facile de s'y connecter, mais je ne me souviens pas comment. Est-ce que quelqu'un sait?


regardez le balisage des catégories meta a, utilisez la même structure html et les classes, et vous devriez avoir des onglets
onetrickpony

Merci - je l'ai fait et je pense que le JS utilise (à juste titre) des identifiants pour masquer les onglets inactifs. Impossible de dupliquer les identifiants, il se peut donc que je doive simplement écrire mon propre JS.
Jason Rhodes

Réponses:


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
}

La requête jQuery pour mytabs.js référencée dans la file d'attente.

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

REMARQUES:

  • Utilisé à l'intérieur d'un plugin, la file d'attente doit appeler plugins_url( '/mytabs.js', __FILE__ )à la place de la get_bloginfochaîne.
  • Le lien d'ancrage pour chaque onglet doit correspondre à l'ID de l'élément de contenu auquel il se réfère, par exemple. frag1, frag2, etc.
  • Une classe cachée est appliquée à chaque DIV de contenu après la première afin qu'ils soient cachés 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 cachés.
  • L'action supérieure doit être mise à jour pour refléter le type de message que vous souhaitez effectuer add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, j'ai utilisé postdans l'exemple ..
  • Vous devrez rendre la métabox sur le côté afin d'utiliser le CSS WordPress existant qui positionne les éléments de l'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..


t31os, j'ai changé le wp_enqueue_script en: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs')); et j'ai mis mytabs.js dans le dossier / js / à la racine du thème mais cela ne fonctionne pas
Philip

1
@Philip - Le code est un exemple de travail, vérifiez la source de sortie et vérifiez que les chemins de mise en file d'attente sont produits correctement .. (ou qu'ils ont été tous sortis ensemble) ..
t31os

je fais une erreur ... désolé pour toute confusion! tout fonctionne bien.
Philip

@Philip - Pas de problème mec, pas de mal fait ..;)
t31os
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.