Come usare i pulsanti radio con le Tassonomie

Le funzionalità di tassonomia personalizzate di WordPress sono fantastiche e ti consentono di organizzare i tuoi post in varie tassonomie, con tutto il duro lavoro svolto per te. Tuttavia, può anche essere un po 'vincolante. Quando modifichi i tuoi post, i tuoi termini di tassonomia hanno il loro metabox e appaiono come un elenco di caselle di controllo (per tassonomie gerarchiche) o come tag cloud (per tassonomie non gerarchiche). Queste sono le tue due scelte.

Questo può presentare un problema quando si desidera garantire che sia possibile selezionare un solo termine per ogni post. Certo, potresti collegarti al save_post aggancia e rimuove qualsiasi termine 'in eccesso', ma questo non è particolarmente user-friendly e certamente non fornisce una grande interfaccia utente. A volte, sarebbe semplicemente più esteticamente desiderabile presentare le tue tassonomie in un modo diverso. Questo articolo ti mostrerà come fare proprio questo, e tutto il codice di cui parliamo dovrebbe essere aggiunto al functions.php file nel tuo tema. Ci concentreremo sui pulsanti di opzione, ma è possibile utilizzare qualsiasi altro metodo di input, ad esempio un menu a discesa.

Passaggio 1 Rimuovere il Metabox tassonomia predefinito

WordPress produce automaticamente il metabox della tassonomia, quindi il nostro primo compito è di rimuoverlo in modo che possiamo produrre il nostro al suo posto. Assumerò che il nostro nome di tassonomia è "mytaxonomy" (se si volesse modificare i tag o le categorie di metabox di WordPress, si sostituirà questo con "category" o "post_tag").

Per rimuovere il metabox che useremo remove_meta_box, che dovrebbe essere chiamato dall'interno di una funzione agganciata al admin_menu. Il remove_meta_box accetta tre argomenti.

ID: questo è l'attributo id dato all'elemento div contenente il metabox. Di solito questo sarebbe 'mytaxonomydiv' per le tassonomie gerarchiche, o 'tagsdiv-mytaxonomy' per quelli non gerarchici.
Postare: il tipo di post viene visualizzato per il metabox (ad esempio "post" o "pagina", ecc.). Se la tua metabox viene visualizzata per diversi tipi di post, dovrai chiamare la funzione remove_meta_box per ognuno.
Contesto: Normale, avanzato o laterale.

 add_action ('admin_menu', 'myprefix_remove_meta_box'); function myprefix_remove_meta_box () remove_meta_box ('mytaxonomydiv', 'post', 'normal');

Passaggio 2 Aggiungi il tuo metabox

Qui ci colleghiamo al nome appropriato add_meta_boxes agganciare con una funzione che aggiungerà il nostro metabolismo. Per farlo, la funzione chiamerà add_meta_box che prende alcuni argomenti, tra cui:

ID: Come sopra, dargli qualcosa di unico.
Titolo: Il titolo per il metabox.
Richiama: Il nome della funzione che produrrà le viscere del nostro metabox.
Postare: Come sopra. Anche in questo caso dovrai chiamare questa funzione separatamente per ogni tipo di messaggio.
Contesto: Come sopra.
Priorità: La priorità all'interno del contesto in cui devono apparire le caselle.

 // Aggiungi una nuova meta casella tassonomia 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 'Questa è la mia tassonomia metabox';

Insieme, quanto sopra dovrebbe rimuovere il metabox predefinito e sostituirlo con il proprio, che attualmente non fa altro che visualizzare il messaggio "Questo è il mio metabolismo di tassonomia". Il prossimo passo è cambiare la funzione di callback per visualizzare ciò che vogliamo.

Passaggio 3 Produzione dei pulsanti di scelta

Vogliamo che il nostro metabolismo appaia e si comporti tanto quanto i metabox predefiniti che è possibile. Esplorando i file core di WordPress, qui troverai il luogo in cui vengono prodotte le viscere di un metabox. La nostra funzione personalizzata di seguito imiterà la funzione principale, ma con alcune modifiche al modo in cui vengono visualizzati i nostri termini.

Esaminiamo la nostra funzione un po 'alla volta. Il primo bit imposta alcune variabili. Hai solo bisogno di cambiare il $ tassonomia variabile in modo che corrisponda al nome della tua tassonomia. Nota anche il nome $ variabile. Diamo ai campi di input il nome tax_input [mytaxonomy]. Questo è il nome per l'input all'interno del metabox predefinito. In questo modo, WordPress gestirà automaticamente l'aggiornamento del termine di tassonomia di un post.

 // Imposta l'oggetto tassonomia e ottieni i termini $ taxonomy = 'mytaxonomy'; $ tax = get_taxonomy ($ taxonomy); // Questo è l'oggetto taxonomy // Il nome del form $ name = 'tax_input ['. $ tassonomia. ']'; // Ottieni tutti i termini per questa tassonomia $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0));

Vogliamo l'ID del termine corrente del post (ci aspettiamo solo uno).

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

Se dai un'occhiata al metabox di WordPress, noterai una scheda che visualizzerà i termini "più usati". Per riprodurre ciò avremo bisogno dei 10 termini più popolari. Noi usiamo il get_terms funzione di nuovo, ma questa volta selezionando al massimo 10 termini e ordinati per numero (il numero di post che hanno questa tassonomia).

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

Successivamente vogliamo visualizzare le schede 'Tutte le categorie' e 'Più usate' (è consigliabile utilizzare le etichette della tassonomia laddove possibile). Se non vuoi le schede, puoi semplicemente rimuovere questo bit:

   -all "tabindex =" 3 ">labels-> all_items; ?>
 -pop "tabindex =" 3 ">

Successivamente, vogliamo impostare cosa visualizzare quando ci troviamo nella scheda "tutte le categorie":

    term_id; eco ""; eco "term_id, false). "value = '$ term-> term_id' /> $ term-> nome
"; eco "
";?>

Questo è in realtà solo la visualizzazione di una lista all'interno di un elemento div, e ogni elemento della lista è un'opzione radio. Ovviamente puoi semplicemente sostituire questo elenco con un menu a discesa o qualsiasi altra cosa tu voglia.

Ora facciamo lo stesso per la scheda 'più usata':

    term_id; eco ""; eco "term_id, false). "value = '$ term-> term_id' /> $ term-> nome
"; eco "
";?>

Passaggio 4 La nostra funzione di callback completa

Mettilo insieme e la nostra funzione completa è

 // Richiamata per impostare la funzione metabox myprefix_mytaxonomy_metabox ($ post) // Ottieni tassonomia e termini $ taxonomy = 'mytaxonomy'; // Imposta l'oggetto tassonomia e ottieni i termini $ tax = get_taxonomy ($ taxonomy); $ terms = get_terms ($ taxonomy, array ('hide_empty' => 0)); // Nome del modulo $ name = 'tax_input ['. $ tassonomia. ']'; // Ottieni termini attuali e popolari $ popular = get_terms ($ taxonomy, array ('orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false)) ; $ postterms = get_the_terms ($ post-> ID, $ tassonomia); $ corrente = ($ postterms? array_pop ($ postterms): false); $ corrente = ($ corrente? $ corrente-> term_id: 0); ?>    -all "tabindex =" 3 ">labels-> all_items; ?>
 -pop "tabindex =" 3 ">
 
    term_id; eco ""; eco "term_id, false). "value = '$ term-> term_id' /> $ term-> nome
"; eco "
";?> 
 
    term_id; eco ""; eco "term_id, false). "value = '$ term-> term_id' /> $ term-> nome
"; eco "
";?> 
 
 
  
  Passaggio 5 Un piccolo JavaScript ... 
 Sono stato attento nel nominare ID e pulsanti di opzione nella funzione di callback. Se provi tutto quanto sopra, scoprirai che WordPress gestisce automaticamente l'aggiornamento dei termini del post. Inoltre, il javascript di WordPress gestisce automaticamente la navigazione delle schede. C'è un leggero singhiozzo. I pulsanti di opzione "tutte le categorie" non sono sincronizzati con il "più usato". Se hai deciso di rinunciare alla scheda "più usato", puoi ignorare questa sezione. Altrimenti, abbiamo solo bisogno di aggiungere un po 'di javascript per risolvere questo problema.
 Vogliamo aggiungere un po 'di javascript alla pagina, quindi all'interno della nostra funzione di callback useremo un hook che si attiva quando javascript è aggiunto nell'admin. Questo è il admin_enqueue_scripts gancio. Dato che aggiungiamo la nostra funzione su questo hook all'interno della nostra funzione di callback, viene caricata solo quando è necessaria. Basta aggiungere questa riga nella parte superiore della nostra funzione di callback qui sopra:
  add_action ( 'admin_enqueue_scripts', 'myprefix_radiotax_javascript');
 Quando i javascript vengono caricati nella pagina di amministrazione, questo attiverà la nostra funzione. Questa funzione non fa altro che registrare e accodare il nostro javascript, che vogliamo caricare nel footer:
  function myprefix_radiotax_javascript () wp_register_script ('radiotax', get_template_directory_uri (). '/js/radiotax.js', array ('jquery'), null, true); // Specifichiamo qui per dire a WordPress che questo script deve essere caricato nel footer wp_enqueue_script ('radiotax'); 
 Ora per il javascript di cui abbiamo effettivamente bisogno, crea un file nel tuo tema js cartella. Lo chiameremo radiotax.js, ed ecco il codice da inserire all'interno:
  jQuery (document) .ready (function ($) var taxonomy = 'mytaxonomy'; $ ('#' + tassonomia + 'checklist li: radio, #' + tassonomia + 'checklist-pop: radio'). live (' clicca ', function () var t = $ (this), c = t.is (': checked '), id = t.val (); $ (' # '+ tassonomia +' checklist li: radio, # '+ tassonomia +' checklist-pop: radio '). prop (' checked ', false); $ (' # in- '+ taxonomy +' - '+ id +', # in-popular- '+ taxonomy +' - '+ id) .prop (' checked ', c);););
 Quindi cosa fanno queste poche righe? Ogni volta che controlli un pulsante di opzione, deseleziona tutti gli altri (su entrambe le schede) e poi controlla i pulsanti di opzione corrispondenti a quel termine.
 
 Conclusione
 E con quello abbiamo finito. WordPress gestisce tutto il resto per noi. C'è ancora spazio per migliorare ... e per aggiungere nuovi termini? L'ho detto dal nostro metabox, perché in realtà è incredibilmente difficile da fare. Significherebbe molto più javascript e anche un po 'di azione sul lato server.
 
 Aggiornare:
 Come richiesto da Roberto, ecco un link al codice completo su GitHub. È un'implementazione di classe del codice usato in questo tutorial, quindi per iniziare dovresti solo cambiare le variabili statiche della classe in alto.



		
			
	   
	




Codice