Hur man använder radioknappar med taxonomier

WordPress 'anpassade taxonomi funktioner är fantastiska, så att du kan organisera dina inlägg i olika taxonomier, med allt det hårda arbetet som görs för dig. Det kan dock också vara lite begränsande. När du redigerar dina inlägg har dina taxonomi termer sin egen metabox, och de visas antingen som en kryssruta (för hierarkiska taxonomier) eller som taggmoln (för icke-hierarkiska taxonomier). Det är dina två val.

Detta kan visa ett problem när du vill se till att endast en term kan väljas för varje inlägg. Självklart kan du haka i spara inlägget krok och ta bort eventuella "överskott" villkor, men det här är inte särskilt användarvänligt och ger inget bra användargränssnitt. Ibland skulle det bara vara mer estetiskt önskvärt att presentera dina taxonomier på ett annat sätt. Den här artikeln visar hur du gör just det, och all kod vi talar om borde läggas till i functions.php filen i ditt tema. Vi fokuserar på radioknappar, men du kan använda någon annan inmatningsmetod, till exempel en rullgardinsmeny.


Steg 1 Ta bort Metabox för standard taxonomy

WordPress producerar automatiskt taxonomimetaboxen, så vårt första jobb är att ta bort det så att vi kan producera våra egna på plats. Jag antar att vårt taxonomi namn är "mytaxonomi" (om du vill ändra WordPress-taggar eller kategorier metabox, skulle du ersätta detta med "kategori" eller "post_tag").

För att ta bort metabox ska vi använda remove_meta_box, som ska kallas inifrån en funktion ansluten till admin_menu. De remove_meta_box accepterar tre argument.

  1. ID: detta id-attributet som ges till div-elementet som innehåller metaboxen. Vanligtvis skulle detta vara "mytaxonomydiv" för hierarkiska taxonomier, eller "tagsdiv-mytaxonomi" för icke-hierarkiska.
  2. Posttyp: posttypen som metaboxen visas för (t ex "post" eller "sida" etc). Om din metabox visas för flera olika posttyper måste du ringa funktionen remove_meta_box för var och en.
  3. Sammanhang: Normal, avancerad eller sida.
 add_action ('admin_menu', 'myprefix_remove_meta_box'); funktion myprefix_remove_meta_box () remove_meta_box ('mytaxonomydiv', 'post', 'normal'); 

Steg 2 Lägg till din egen metabox

Här krokar vi på den lämpliga namnet add_meta_boxes krok med en funktion som lägger till vår metabox. För att göra så kommer funktionen att ringa add_meta_box vilket tar en hel del argument, bland annat:

  1. ID: Samma som ovanstående, ge det något unikt.
  2. Titel: Titeln för metaboxen.
  3. Ring tillbaka: Namnet på den funktion som kommer att producera vår metabox inards.
  4. Posttyp: Samma som ovanstående. Återigen måste du ringa denna funktion för varje posttyp separat.
  5. Sammanhang: Samma som ovanstående.
  6. Prioritet: Prioriteten inom det sammanhang där rutorna ska visas.
 // Lägg till nya taxonomy meta box add_action ('add_meta_boxes', 'myprefix_add_meta_box'); funktion myprefix_add_meta_box () add_meta_box ('mytaxonomy_id', 'My Radio Taxonomy', 'myprefix_mytaxonomy_metabox', 'post', 'side', 'core');  funktion myprefix_mytaxonomy_metabox ($ post) echo 'Detta är min taxonomy metabox'; 

Tillsammans bör ovanstående ta bort standardmetaboxen och ersätta den med din egen, som för närvarande bara visar meddelandet "This is my taxonomy metabox". Nästa steg är att ändra återuppringningsfunktionen för att visa vad vi vill ha.


Steg 3 Produktion av radioknappar

Vi vill att vår metabox ska se och uppträda så mycket som standardmetaboxerna som möjligt. Att dela in i WordPress-kärnfilerna hittar du den plats där en metaboxs insida produceras här. Vår anpassade funktion nedan kommer att efterlikna kärnfunktionen, men med vissa ändringar av hur våra villkor visas.

Låt oss gå igenom vår funktion lite i taget. Den första biten ställer in några av variablerna. Du behöver bara verkligen ändra $ taxonomi variabel för att matcha ditt taxonomy namn. Notera också $ name variabel. Vi ger inmatningsfält namnet tax_input [mytaxonomy]. Detta namn för inmatningen inuti standardmetaboxen. Genom att göra detta kommer WordPress automatiskt att hantera uppdateringen av ett inläggs taxonomi.

 // Ställ in taxonomiobjektet och få termer $ taxonomy = 'mytaxonomy'; $ tax = get_taxonomy ($ taxonomy); // Detta är taxonomyobjektet // Namnet på formuläret $ name = 'tax_input ['. $ taxonomi. ']'; // Hämta alla villkor för denna taxonomi $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0));

Vi vill ha ID för postens nuvarande term (vi förväntar oss bara en).

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

Om du tittar på kategorin Metabox i WordPress märker du en flik som visar de mest använda termerna. Att reproducera att vi behöver de 10 mest populära termerna. Vi använder get_terms funktion igen, men denna gång väljer du högst 10 termer och beställs av räkning (antalet inlägg som har denna taxonomi).

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

Nästa vill vi visa fliken "Alla kategorier" och "Mest använda" (det är bästa sättet att använda taxonomimärkena där det är möjligt). Om du inte vill ha flikar kan du helt enkelt ta bort denna bit:

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

Därefter vill vi ange vad som ska visas när vi är på fliken "alla kategorier":

  
    term_id; eko "
  • ";?>

Detta visar verkligen en lista i ett div-element, och varje listelement är ett alternativ för radion. Naturligtvis kan du helt enkelt ersätta den här listan med en rullgardinsmeny eller något annat du vill.

Nu gör vi detsamma för fliken "mest använda":

  
    term_id; eko "
  • ";?>

Steg 4 Vår kompletta återuppringningsfunktion

Styck det tillsammans och vår fullständiga funktion är

 // Återuppringning för att ställa in metaboxfunktionen myprefix_mytaxonomy_metabox ($ post) // Få taxonomy och termer $ taxonomy = 'mytaxonomy'; // Ställ in taxonomiobjektet och få termer $ tax = get_taxonomy ($ taxonomy); $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0)); // Namnet på formuläret $ name = 'tax_input ['. $ taxonomi. ']'; // Få nuvarande och populära termer $ popular = get_terms ($ taxonomy, array ('orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarkisk' => false)) ; $ postterms = get_the_terms ($ post-> ID, $ taxonomy); $ current = ($ postterms? array_pop ($ postterms): false); $ current = ($ current? $ current-> term_id: 0); ?> 
  • -alla "tabindex =" 3 ">labels-> all_items; ?>
  • -pop "tabindex =" 3 ">
    term_id; eko "
  • ";?>
    term_id; eko "
  • ";?>

Steg 5 lite JavaScript ...

Jag var försiktig i min namngivning av ID och radioknappar i återuppringningsfunktionen. Om du försöker alla ovanstående nu, hittar du att WordPress automatiskt hanterar uppdateringen av posttermer. Dessutom hanterar WordPress javascript automatiskt fliknavigering. Det finns en liten hicka. Radiknapparna "Alla kategorier" synkroniseras inte med "mest använda". Om du har bestämt dig för att dispensera med fliken "mest använda" kan du ignorera det här avsnittet. Annars behöver vi bara lägga till lite bit av javascript för att åtgärda problemet.

Vi vill lägga till lite javascript på sidan, så inom vår återuppringningsfunktion använder vi en krok som brinner när javascript läggs till i admin. Det är admin_enqueue_scripts krok. Eftersom vi lägger till vår funktion på denna krok inom vår återuppringningsfunktion laddas den bara när den behövs. Lägg bara till den här raden ovanpå vår återuppringningsfunktion ovan:

 add_action ( 'admin_enqueue_scripts', 'myprefix_radiotax_javascript');

När javascripts laddas på admin sidan kommer detta att utlösa vår funktion. Den här funktionen registrerar och registrerar inte bara vårt javascript, vilket vi vill ladda i sidfoten:

 funktion myprefix_radiotax_javascript () wp_register_script ('radiotax', get_template_directory_uri (). '/js/radiotax.js', array ('jquery'), null, true); // Vi anger här för att berätta för WordPress, det här skriptet måste laddas i sidfoten wp_enqueue_script ('radiotax'); 

Nu för javascript behöver vi faktiskt, skapa en fil i ditt tema js mapp. Vi ringer det radiotax.js, och här är koden att sätta in:

 jQuery (dokument) .ready (funktion ($) var taxonomy = 'mytaxonomy'; $ ('#' + taxonomy + 'checklista li: radio, #' + taxonomy + 'checklist-pop: radio' klick ', funktion () var t = $ (detta), c = t.is (': checked '), id = t.val (); $ (' # '+ taxonomy +' checklista li: 'taxonomy +' - '+ id +', # in-popular- '+ taxonomy +' checklist-pop: radio ' - '+ id) .prop (' checked ', c);););

Så vad gör dessa få linjer? När du kontrollerar en radioknapp avmarkerar du alla andra (på båda flikarna) och kontrollerar sedan de radioknappar som motsvarar den termen.


Slutsats

Och med det är vi färdiga. WordPress hanterar resten för oss. Det finns utrymme för förbättring men ... vad sägs om att lägga till nya villkor? Jag har ommitted det från vår metabox, för det är faktiskt oerhört knepigt att göra. Det skulle innebära mycket mer javascript och en bit åtgärd på serverns sida.


Uppdatering:

Som begärd av Roberto, här är en länk till koden i sin helhet på GitHub. Det är en klassimplementering av koden som används i denna handledning, så för att komma igång bör du bara behöva ändra klassens statiska variabler överst.