Hoe gebruik ik radioknoppen met taxonomieën

De aangepaste taxonomie-functies van WordPress zijn fantastisch, zodat u uw berichten in verschillende taxonomieën kunt indelen, met al het harde werk dat voor u gedaan is. Het kan echter ook een beetje beperkend zijn. Wanneer u uw berichten bewerkt, hebben uw taxonomietermen een eigen metabox en verschijnen ze als een checkboxlijst (voor hiërarchische taxonomieën) of als een tagwolk (voor niet-hiërarchische taxonomieën). Dat zijn jouw twee keuzes.

Dit kan een probleem zijn als u ervoor wilt zorgen dat er slechts één term voor elke post kan worden geselecteerd. Natuurlijk kunt u inhaken op de save_post haak en verwijder alle 'overtollige' voorwaarden, maar dit is niet bijzonder gebruiksvriendelijk en biedt zeker geen geweldige gebruikersinterface. Soms zou het meer esthetisch wenselijk zijn om uw taxonomieën op een andere manier te presenteren. Dit artikel zal je laten zien hoe je dat precies moet doen, en alle code waar we over praten zou moeten worden toegevoegd aan de functions.php bestand in uw thema. We concentreren ons op keuzerondjes, maar u kunt elke andere invoermethode gebruiken, bijvoorbeeld een vervolgkeuzemenu.


Stap 1 Verwijder de standaardtaxonomiemetabox

WordPress produceert automatisch de taxonomie metabox, dus onze eerste taak is om het te verwijderen, zodat we onze eigen in plaats daarvan kunnen produceren. Ik ga ervan uit dat onze taxonomienaam 'mytaxonomy' is (als je de tags of categorieën metabox van WordPress wilde wijzigen, zou je dit vervangen door 'category' of 'post_tag').

Om de metabox te verwijderen die we zullen gebruiken remove_meta_box, die moet worden aangeroepen vanuit een functie die is aangesloten op de ADMIN_MENU. De remove_meta_box accepteert drie argumenten.

  1. ID kaart: dit is het id attribuut gegeven aan het div element dat de metabox bevat. Gewoonlijk zou dit 'mytaxonomydiv' zijn voor hiërarchische taxonomieën, of 'tagsdiv-mytaxonomy' voor niet-hiërarchische taxonomieën.
  2. Berichttype: het berichttype waarvoor de metabox wordt weergegeven (bijvoorbeeld 'post' of 'pagina', enzovoort). Als uw metabox voor verschillende typen berichten wordt weergegeven, moet u de functie remove_meta_box voor elke post selecteren.
  3. Context: Normaal, geavanceerd of zijkant.
 add_action ('admin_menu', 'myprefix_remove_meta_box'); function myprefix_remove_meta_box () remove_meta_box ('mytaxonomydiv', 'post', 'normal'); 

Stap 2 Voeg uw eigen Metabox toe

Hier haken we op de toepasselijke naam add_meta_boxes haak met een functie die onze metabox zal toevoegen. Om dat te doen, zal de functie bellen add_meta_box wat nogal wat argumenten vergt, waaronder:

  1. ID kaart: Hetzelfde als het bovenstaande, geef het iets unieks.
  2. Titel: De titel voor de metabox.
  3. Bel terug: De naam van de functie die de inwendige organen van onze metabox zal produceren.
  4. Berichttype: Hetzelfde als het bovenstaande. Nogmaals, u moet deze functie voor elk berichttype afzonderlijk aanroepen.
  5. Context: Hetzelfde als het bovenstaande.
  6. Prioriteit: De prioriteit binnen de context waarin de vakken moeten worden weergegeven.
 // Nieuwe taxonomie toevoegen meta box add_action ('add_meta_boxes', 'myprefix_add_meta_box'); function myprefix_add_meta_box () add_meta_box ('mytaxonomy_id', 'My Radio Taxonomy', 'myprefix_mytaxonomy_metabox', 'post', 'side', 'core');  function myprefix_mytaxonomy_metabox ($ post) echo 'Dit is mijn taxonomie metabox'; 

Samen moet het bovenstaande de standaard metabox verwijderen en deze door uw eigen metabox vervangen, die momenteel niets anders doet dan het bericht "Dit is mijn taxonomiemetabox" weergeven. De volgende stap is het wijzigen van de callback-functie om weer te geven wat we willen.


Stap 3 Het produceren van de radioknoppen

We willen dat onze metabox er net zo uitziet als en zich zo gedraagt ​​als de standaard metaboxen die mogelijk is. Als u zich verdiept in de WordPress-kernbestanden, vindt u hier de plaats waar de binnenkant van de metabox wordt geproduceerd. Onze aangepaste functie hieronder zal de kernfunctie nabootsen, maar met enkele wijzigingen in de manier waarop onze voorwaarden worden weergegeven.

Laten we onze functie beetje bij beetje doorlopen. Het eerste bit stelt enkele van de variabelen in. Je hoeft het alleen echt te veranderen $ taxonomie variabele die overeenkomt met uw taxonomienaam. Let ook op de name $ variabel. We geven invoervelden de naam tax_input [mytaxonomy]. Dit is de naam voor de invoer binnen de standaard metabox. Door dit te doen, zal WordPress automatisch het bijwerken van de taxonomie-termijn van een bericht afhandelen.

 // Stel het taxonomie-object in en ontvang de voorwaarden $ taxonomy = 'mytaxonomy'; $ tax = get_taxonomy ($ taxonomy); // Dit is het taxonomieobject // De naam van het formulier $ name = 'tax_input ['. $ taxonomie. ']'; // Krijg alle voorwaarden voor deze taxonomie $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0));

We willen de ID van de huidige termijn van het bericht (we verwachten er maar één).

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

Als u de metabox van WordPress bekijkt, ziet u een tabblad met de 'meestgebruikte' termen. Om dat te reproduceren, hebben we de 10 populairste termen nodig. Wij gebruiken de get_terms opnieuw functioneren, maar deze keer maximaal 10 termen selecteren en gesorteerd op aantal (het aantal berichten met deze taxonomie).

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

Vervolgens willen we de tabbladen 'Alle categorieën' en 'Meest gebruikt' weergeven (het is de beste praktijk om waar mogelijk de taxonomielabels te gebruiken). Als u geen tabbladen wilt, kunt u dit bit gewoon verwijderen:

  
  • -alle "tabindex =" 3 ">LABELS-> all_items; ?>
  • -pop "tabindex =" 3 ">

Vervolgens willen we instellen wat wordt weergegeven wanneer we ons op het tabblad 'alle categorieën' bevinden:

  
    term_id; echo "
  • ";?>

Dit is eigenlijk alleen maar het weergeven van een lijst binnen een div-element, en elk lijstelement is een radio-optie. Natuurlijk kunt u deze lijst eenvoudig vervangen door een vervolgkeuzemenu of iets anders dat u leuk vindt.

Nu doen we hetzelfde voor het tabblad 'Meest gebruikte':

  
    term_id; echo "
  • ";?>

Stap 4 Onze complete terugroepfunctie

Maak het samen en onze complete functie is

 // Terugbellen om de metabox-functie in te stellen myprefix_mytaxonomy_metabox ($ post) // Get taxonomy and terms $ taxonomy = 'mytaxonomy'; // Stel het taxonomie-object in en ontvang de voorwaarden $ tax = get_taxonomy ($ taxonomy); $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0)); // Naam van het formulier $ name = 'tax_input ['. $ taxonomie. ']'; // Krijg huidige en populaire termen $ 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); ?> 
  • -alle "tabindex =" 3 ">LABELS-> all_items; ?>
  • -pop "tabindex =" 3 ">
    term_id; echo "
  • ";?>
    term_id; echo "
  • ";?>

Stap 5 Een klein JavaScript ...

Ik was voorzichtig met het benoemen van ID's en keuzerondjes in de callback-functie. Als u al het bovenstaande nu probeert, zult u merken dat WordPress automatisch het bijwerken van posttermen afhandelt. Bovendien verwerkt het javascript van WordPress automatisch de tabbladnavigatie. Er is een lichte hapering. De keuzerondjes 'alle categorieën' zijn niet gesynchroniseerd met de 'meest gebruikte'. Als u hebt besloten om af te zien van het tabblad 'Meest gebruikte', kunt u dit gedeelte negeren. Anders hoeven we slechts een klein beetje JavaScript toe te voegen om dit probleem op te lossen.

We willen een beetje JavaScript aan de pagina toevoegen, dus binnen onze callback-functie gebruiken we een haak die vuurt wanneer javascript in de admin is toegevoegd. Dat is de admin_enqueue_scripts haak. Omdat we onze functie aan deze haak toevoegen binnen onze callback-functie, wordt deze alleen geladen wanneer dat nodig is. Voeg deze regel toe aan de bovenkant van onze callback-functie hierboven:

 add_action (admin_enqueue_scripts ',' myprefix_radiotax_javascript);

Wanneer de javascripts in de adminpagina worden geladen, zal dit onze functie activeren. Deze functie doet niets anders dan registreren en bijhouden van ons javascript, dat we in de voettekst willen laden:

 function myprefix_radiotax_javascript () wp_register_script ('radiotax', get_template_directory_uri (). '/js/radiotax.js', array ('jQuery'), null, true); // We geven hier true aan om aan WordPress te vertellen dat dit script in de voettekst moet worden geladen wp_enqueue_script ('radiotax'); 

Nu voor het javascript dat we eigenlijk nodig hebben, maakt u een bestand in uw thema's js map. We zullen het noemen radiotax.js, en hier is de code om in te zetten:

 jQuery (document) .ready (functie ($) var taxonomy = 'mytaxonomy'; $ ('#' + taxonomy + 'checklist li: radio, #' + taxonomie + 'controlelijst-pop: radio'). live (' klik op ', function () var t = $ (this), c = t.is (': checked '), id = t.val (); $ (' # '+ taxonomy +' checklist li: radio, # '+ taxonomie +' checklist-pop: radio '). prop (' checked ', false); $ (' # in- '+ taxonomie +' - '+ id +', # in-popular- '+ taxonomy +' - '+ id) .prop (' checked ', c);););

Dus wat doen deze paar regels? Telkens wanneer u een keuzerondje inschakelt, schakelt u alle andere selecties uit (op beide tabbladen) en controleert u vervolgens de keuzerondjes die overeenkomen met die term.


Conclusie

En daarmee zijn we klaar. WordPress verwerkt al de rest voor ons. Er is echter nog ruimte voor verbetering ... hoe zit het met het toevoegen van nieuwe voorwaarden? Ik heb dat uit onze metabox weggelaten, omdat het eigenlijk ongelooflijk lastig is om te doen. Het zou veel meer Javascript en ook een beetje actie aan de serverkant met zich meebrengen.


Bijwerken:

Zoals gevraagd door Roberto, hier is een link naar de code volledig op GitHub. Het is een klassenimplementatie van de code die in deze zelfstudie wordt gebruikt, dus om aan de slag te gaan, hoeft u alleen de statische variabelen van de klasse aan de bovenkant te wijzigen..