Adăugați o clasă personalizată în articolul din meniul WordPress utilizând declarații condiționate

În majoritatea cazurilor, când stilizați meniurile de navigare WordPress, puteți adăuga pur și simplu clase CSS din panoul de administrare WordPress. Recent, în timp ce lucrăm la un proiect, ne aflăm într-o situație dificilă. Am vrut să adăugăm o clasă personalizată unui anumit element de meniu numai pe paginile de postare unice. După ce ne-am uitat în jur, nu am găsit nicio soluție. Ultima noastră soluție a fost să ne întrebăm pe Twitter. Otto (@ Otto42) a răspuns că este posibil prin utilizarea de filtre, dar nu există nicio documentație pentru filtru.

După ce ne-am uitat în nucleu pentru o vreme, am dat seama de soluție. Ce trebuie să faceți este să lipiți următorul cod în fișierul functions.php:

 // Filtrarea unei clase în elementul de meniu de navigare add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); funcția special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'actual-item-item';  returnează clase $;  

Codul de mai sus este pur și simplu de verificare dacă este o singură pagină post, iar titlul elementului de meniu este Blog. Dacă criteriile sunt potrivite, atunci se adaugă o clasă "Element curent de meniu". A trebuit să adăugăm o clasă personalizată pentru ca aceasta să funcționeze cu acest design pe care lucrăm.

Dacă nu puteți spune deja, în principiu ceea ce am vrut să facem este să păstrați elementul de blog evidențiat în meniu atunci când utilizatorul se afla într-un singur post. Acest lucru le-a permis să vadă că posturile unice fac parte din blog. În mod normal, acest lucru nu are sens, dar în designul pe care lucrăm, a avut sens.

Dacă ați căuta disperat acest cod, sperăm că acest articol a ajutat. Puteți verifica și alte variabile de element $. Câteva exemple sunt: ​​$ item-> ID, $ item-> title, $ item-> xfn

Rapid Editare: Dupa postarea acestui articol pe twitter, unul dintre utilizatorii nostri @dbrabyn a subliniat ca am fi putut realiza cu usurinta acest lucru cu clasele Body CSS. De exemplu:

.singurul #navigație .leftmenublog div display: inline-block important;

Practic, ceea ce am făcut a fost adăugat un div suplimentar pentru a afișa o pictogramă săgeată în meniul nostru. Această săgeată ar fi afișată numai dacă clasa a fost fie suspendată, fie selectată. În caz contrar, a fost setat să afișeze: none; Prin utilizarea clasei corpului, am făcut doar afișarea elementului div numai pentru clasa de meniu specifică.