Aggiungi una classe personalizzata nella voce di menu di WordPress utilizzando le istruzioni condizionali

Nella maggior parte dei casi quando si impostano i menu di navigazione di WordPress, è possibile semplicemente aggiungere classi CSS dal pannello di amministrazione di WordPress. Recentemente mentre lavoravamo a un progetto, ci siamo trovati in una situazione problematica. Volevamo aggiungere una classe personalizzata a una voce di menu specifica solo su singole pagine di post. Dopo aver cercato un po 'di tempo, non siamo riusciti a trovare alcuna soluzione. La nostra ultima risorsa era chiedere su Twitter. Otto (@ Otto42) ha risposto dicendo che è possibile usando i filtri, ma non ci sono documenti per il filtro.

Dopo aver cercato nel nucleo per un po ', abbiamo capito la soluzione. Quello che devi fare è incollare il seguente codice nel tuo file functions.php:

 // Filtro di una classe nel menu di navigazione Elemento add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); function special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'current-menu-item';  return $ classes;  

Il codice qui sopra sta semplicemente controllando se si tratta di una singola pagina di post, e il titolo della voce di menu è Blog. Se i criteri sono abbinati, allora si aggiunge una classe "Current-menu-item". Dovevamo aggiungere una classe personalizzata per farlo funzionare con questo progetto su cui stiamo lavorando.

Se non lo sai già, in pratica quello che volevamo fare era mantenere l'elemento del blog evidenziato nel menu quando l'utente era su un singolo post. Questo ha permesso loro di vedere che i singoli post fanno parte del blog. Questo di solito non ha senso, ma nel design su cui stiamo lavorando ha avuto senso.

Se sei alla disperata ricerca di questo codice, speriamo che questo articolo sia d'aiuto. Puoi anche controllare altre variabili $ item. Alcuni esempi sono: $ item-> ID, $ item-> title, $ item-> xfn

Modifica rapida: dopo aver postato questo articolo su twitter, uno dei nostri utenti @dbrabyn ha sottolineato che avremmo potuto facilmente ottenere questo risultato con le classi Body CSS. Per esempio:

.single #navigation .leftmenublog div display: inline-block! important;

Fondamentalmente quello che abbiamo fatto è stato aggiunto un div aggiuntivo per visualizzare un'icona a forma di freccia nel nostro menu. Questa freccia verrà mostrata solo se la classe è stata sospesa o selezionata. Altrimenti era impostato per la visualizzazione: nessuno; Usando la classe del corpo, abbiamo solo mostrato la visualizzazione dell'elemento div solo per la specifica classe di menu.