Comment utiliser des boutons radio avec des taxonomies

Les fonctionnalités de taxonomie personnalisées de WordPress sont fantastiques, vous permettant d’organiser vos publications dans différentes taxonomies, avec tout le travail fourni à votre place. Cependant, cela peut aussi être un peu contraignant. Lors de la modification de vos publications, vos termes de taxonomie ont leur propre métabox et apparaissent sous forme de liste de cases à cocher (pour les taxonomies hiérarchiques) ou de nuage de tags (pour les taxonomies non hiérarchiques). Ce sont vos deux choix.

Cela peut poser un problème lorsque vous souhaitez vous assurer qu'un seul terme peut être sélectionné pour chaque publication. Bien sûr, vous pouvez accrocher dans le save_post accrocher et supprimer les termes «excédentaires», mais ce n'est pas particulièrement convivial et ne fournit certainement pas une excellente interface utilisateur. Parfois, il serait simplement plus esthétique de présenter vos taxonomies de manière différente. Cet article va vous montrer comment faire exactement cela, et tout le code dont nous parlons devrait être ajouté à la functions.php déposer dans votre thème. Nous allons nous concentrer sur les boutons radio, mais vous pouvez utiliser toute autre méthode de saisie, par exemple un menu déroulant..


Étape 1 Supprimer le Metabox Taxonomy par défaut

WordPress génère automatiquement la métaboxe de la taxonomie. Notre premier travail consiste donc à la supprimer afin de pouvoir produire la nôtre à la place. Je supposerai que notre nom de taxonomie est 'mytaxonomy' (si vous souhaitez modifier les balises ou catégories metabox de WordPress, remplacez-le par 'category' ou 'post_tag').

Pour enlever le metabox nous allons utiliser remove_meta_box, qui doit être appelé de l'intérieur d'une fonction accrochée au admin_menu. le remove_meta_box accepte trois arguments.

  1. ID: this l'attribut id donné à l'élément div contenant la metabox. Il s’agit généralement de "mytaxonomydiv" pour les taxonomies hiérarchiques ou de "tagsdiv-mytaxonomy" pour les taxonomies non hiérarchiques..
  2. Type de poste: le type de message pour lequel la métabox apparaît (par exemple, «post» ou «page», etc.). Si votre metabox apparaît pour plusieurs types de publication différents, vous devrez appeler la fonction remove_meta_box pour chacun d'eux..
  3. Le contexte: Normal, avancé ou latéral.
 add_action ('admin_menu', 'myprefix_remove_meta_box'); fonction myprefix_remove_meta_box () remove_meta_box ('mytaxonomydiv', 'post', 'normal'); 

Étape 2 Ajoutez votre propre Metabox

Ici, nous accrochons le bien nommé add_meta_boxes crochet avec une fonction qui ajoutera notre metabox. Pour ce faire, la fonction appellera add_meta_box qui prend pas mal d'arguments, parmi lesquels:

  1. ID: Comme ci-dessus, donnez-lui quelque chose d'unique.
  2. Titre: Le titre de la metabox.
  3. Rappeler: Le nom de la fonction qui produira les entrailles de notre metabox.
  4. Type de poste: Idem que ci-dessus. Encore une fois, vous devrez appeler cette fonction séparément pour chaque type de message..
  5. Le contexte: Comme ci-dessus.
  6. Priorité: La priorité dans le contexte où les cases doivent montrer.
 // Ajout d'une nouvelle boîte à méta de taxonomie add_action ('add_meta_boxes', 'myprefix_add_meta_box'); function myprefix_add_meta_box () add_meta_box ('mytaxonomy_id', 'Ma taxonomie radio', 'myprefix_mytaxonomy_metabox', 'post', 'side', 'core');  function myprefix_mytaxonomy_metabox ($ post) echo 'C'est ma taxonomie metabox'; 

Ensemble, ce qui précède devrait supprimer la métabox par défaut et la remplacer par la vôtre, qui ne fait actuellement que afficher le message "This is my taxonomy metabox". La prochaine étape consiste à changer la fonction de rappel pour afficher ce que nous voulons.


Étape 3 Produire les boutons radio

Nous voulons que notre métabox ressemble et se comporte autant que possible comme les métaboxes par défaut. En fouillant dans les fichiers de base de WordPress, vous trouverez l'endroit où les entrailles d'une métabox sont produites, ici. Notre fonction personnalisée ci-dessous imitera la fonction principale, mais avec quelques changements dans la façon dont nos termes sont affichés.

Passons en revue notre fonction un peu à la fois. Le premier bit établit certaines des variables. Vous devez seulement vraiment changer le taxonomie $ variable pour correspondre à votre nom de taxonomie. Notez aussi le $ name variable. Nous donnons le nom aux champs de saisie tax_input [mytaxonomy]. C'est le nom de l'entrée dans la metabox par défaut. Ce faisant, WordPress gérera automatiquement la mise à jour du terme de taxonomie d'un article..

 // Configure l'objet taxonomie et récupère les termes $ taxonomy = 'mytaxonomy'; $ tax = get_taxonomy ($ taxonomy); // Ceci est l'objet taxonomie // Le nom du formulaire $ name = 'tax_input ['. taxonomie $. ']'; // Récupère tous les termes de cette taxonomie $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0));

Nous voudrons connaître l'ID du terme actuel de la publication (nous n'en attendons qu'un seul).

 $ postterms = get_the_terms ($ post-> ID, $ taxonomy); $ current = ($ postterms? array_pop ($ postterms): false); $ current = ($ current? $ current-> term_id: 0);

Si vous jetez un coup d'œil à la catégorie metabox de WordPress, vous remarquerez un onglet qui affiche les termes les plus utilisés. Pour reproduire cela, nous aurons besoin des 10 termes les plus populaires. Nous utilisons le get_terms fonctionne à nouveau, mais cette fois en sélectionnant au plus 10 termes et en ordre de décompte (nombre de messages ayant cette taxonomie).

 $ popular = get_terms ($ taxonomy, array ('orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false));

Nous souhaitons ensuite afficher les onglets «Toutes les catégories» et «Les plus utilisés» (il est recommandé d’utiliser les étiquettes de taxonomie autant que possible). Si vous ne voulez pas d'onglets, vous pouvez simplement supprimer ce bit:

  
  • -tout "tabindex =" 3 ">labels-> all_items; ?>
  • -pop "tabindex =" 3 ">

Ensuite, nous voulons définir ce qu'il faut afficher lorsque nous sommes dans l'onglet "Toutes les catégories":

  
    term_id; écho "
  • ";?>

Il s’agit en fait d’afficher une liste dans un élément div et chaque élément de la liste est une option radio. Bien sûr, vous pouvez simplement remplacer cette liste par un menu déroulant ou tout autre élément de votre choix..

Nous faisons maintenant la même chose pour l'onglet "le plus utilisé":

  
    term_id; écho "
  • ";?>

Étape 4 Notre fonction de rappel complète

Rassemblez-le et notre fonction complète est

 // Rappel pour configurer la fonction metabox myprefix_mytaxonomy_metabox ($ post) // Récupère la taxonomie et les termes $ taxonomy = 'mytaxonomy'; // Configure l'objet taxonomy et récupère les termes $ tax = get_taxonomy ($ taxonomy); $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0)); // Nom du formulaire $ name = 'tax_input ['. taxonomie $. ']'; // Obtenir les termes courants et populaires $ popular = get_terms ($ taxonomy, array ('orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false)) ; $ postterms = get_the_terms ($ post-> ID, $ taxonomy); $ current = ($ postterms? array_pop ($ postterms): false); $ current = ($ current? $ current-> term_id: 0); ?> 
  • -tout "tabindex =" 3 ">labels-> all_items; ?>
  • -pop "tabindex =" 3 ">
    term_id; écho "
  • ";?>
    term_id; écho "
  • ";?>

Étape 5 Un peu de JavaScript…

J'ai été prudent en nommant les identifiants et les boutons radio dans la fonction de rappel. Si vous essayez tout ce qui précède maintenant, vous constaterez que WordPress gère automatiquement la mise à jour des conditions de publication. De plus, le javascript de WordPress gère automatiquement la navigation dans les onglets. Il y a un léger hoquet. Les boutons radio "Toutes les catégories" ne sont pas synchronisés avec les "plus utilisés". Si vous avez décidé de vous passer de l'onglet "le plus utilisé", vous pouvez ignorer cette section. Sinon, nous avons juste besoin d'ajouter un peu de javascript pour résoudre ce problème.

Nous souhaitons ajouter un peu de javascript à la page. Ainsi, dans notre fonction de rappel, nous utiliserons un hook qui se déclenchera lorsque javascript sera ajouté à l'administrateur. C'est le admin_enqueue_scripts crochet. Étant donné que nous ajoutons notre fonction à ce crochet dans notre fonction de rappel, elle n'est chargée que lorsque c'est nécessaire. Ajoutez simplement cette ligne en haut de notre fonction de rappel ci-dessus:

 add_action ('admin_enqueue_scripts', 'myprefix_radiotax_javascript');

Lorsque les javascripts sont chargés dans la page d’administration, cela déclenche notre fonction. Cette fonction ne fait rien de plus que d’enregistrer et de mettre en file d'attente notre javascript que nous voulons charger dans le pied de page:

 fonction myprefix_radiotax_javascript () wp_register_script ('radiotax', get_template_directory_uri (). '/js/radiotax.js', array ('jquery'), null, true); // Nous spécifions sur true pour indiquer à WordPress que ce script doit être chargé dans le pied de page wp_enqueue_script ('radiotax'); 

Maintenant, pour le javascript dont nous avons réellement besoin, créez un fichier dans le thème de votre thème. js dossier. Nous l'appellerons radiotax.js, et voici le code à mettre à l'intérieur:

 jQuery (document) .ready (function ($) var taxonomy = 'mytaxonomy'; $ ('#' + taxonomy + 'checklist li: radio, #' + taxonomy + 'checklist-pop: radio'). live (' cliquez sur ', fonction () var t = $ (ceci), c = t.is (': vérifié '), id = t.val (); $ (' # '+ taxonomie +' liste de contrôle li: radio, # '+ taxonomie +' liste de contrôle-pop: radio '). prop (' vérifié ', faux); $ (' # dans '+ taxonomie +' - '+ id +', # dans-populaire- '+ taxonomie +' - '+ id) .prop (' vérifié ', c);););

Alors, que font ces quelques lignes? Chaque fois que vous cochez un bouton radio, il désélectionne tous les autres (sur les deux onglets), puis coche les boutons radio correspondant à ce terme..


Conclusion

Et avec ça on a fini. WordPress gère tout le reste pour nous. Cependant, il y a place à l'amélioration… qu'en est-il de l'ajout de nouveaux termes? Cela a été omis de notre metabox, parce que c'est en fait incroyablement difficile à faire. Cela impliquerait beaucoup plus de javascript et aussi un peu d'action côté serveur.


Mettre à jour:

À la demande de Roberto, voici un lien vers le code complet sur GitHub. Il s'agit d'une implémentation de classe du code utilisé dans ce tutoriel. Par conséquent, pour commencer, il vous suffit de changer les variables statiques de la classe en haut..