Când WordPress 3 ne-a prezentat noua funcționalitate Menus, a schimbat modul în care am vizualizat meniurile de navigare pentru totdeauna. Nu mai aveam obligația de a utiliza funcțiile normale de listare a paginilor sau de a construi propriile funcții de meniu personalizate pentru a integra meniurile de categorii și pagini, precum și elemente externe sau hard corelate într-un meniu nav. Dar cât de obișnuit putem obține cu această nouă funcție? În acest tutorial, ne vom arunca adânc în tot ceea ce wp_nav_menu funcția poate face, utilizați clasa Walker pentru a adăuga o descriere sub-text și atingeți unele dintre funcțiile sale asociate.
Parametrii
Funcția are câțiva parametri pentru a lucra cu. Iată valorile implicite, așa cum sunt enumerate în Codul WordPress.org:
Folosind acest parametru, putem seta o locație tematică care este utilizată apoi în pagina Meniu pentru a seta un meniu care să funcționeze în acea parte a temei, fără a fi nevoie să definiți manual care meniu ar trebui să apară acolo. Acest lucru este foarte util pentru distribuitorii de teme, deoarece puteți utiliza condiționate pentru a afișa un meniu numai dacă utilizatorul a definit un meniu pentru acea locație. Singura altă cerință este că folosiți funcția register_nav_menu () pentru a înregistra aceste locații. Acest lucru se face de obicei din fișierele de funcții atunci când configurați suport pentru meniuri.
Să începem să construim parametrii funcției meniului personalizat, presupunând că am înregistrat o locație tematică numită "primar".
$ params = array ('theme_location' => 'primar');
Meniul
Acest parametru este utilizat pentru a defini manual meniul care trebuie utilizat. În exemplul nostru, setăm doar o locație de meniu generică și nu definim una exactă de utilizat, dar dacă vrem să spunem că funcția utilizează un meniu numit "Primary Navigation", parametrii noștri ar arăta astfel:
În mod implicit, meniul nostru va fi înfășurat într-un div, dar dacă sunteți ca mine, de obicei, nu aveți nevoie de acest lucru și probabil doriți să reduceți suma din divuri și alte etichete folosite pentru a vă menține codul cât mai ordonat posibil. De asemenea, puteți utiliza acest parametru pentru a defini o etichetă diferită, cum ar fi html5 sau . Pentru exemplul nostru, nu vrem ca un container să schimbe valorile implicite ale containerului, deoarece stilurile temei Twenty Eleven se bazează pe faptul că există.
Clasa containerului și ID-ul containerului
După cum puteți ghici destul de mult, acești parametri sunt utilizați pentru a seta o clasă și un ID la container. Deoarece omitem acest lucru cu totul, nu avem nevoie să definim valori.
Clasa de meniuri și ID-ul meniului
Acestea funcționează la fel ca parametrii anteriori, cu excepția momentului în care dorim cu siguranță să setăm un ID de "nav"pentru că acesta este ID-ul pe care îl vom folosi în foaia de stil pentru a modela bara de navigare.
Puteți utiliza acest parametru pentru a afla dacă doriți să afișați (echo) rezultatele sau să le returnați pentru utilizare în PHP. Acest element este boolean, astfel încât să îl returnați setând pur și simplu acest parametru la 0.
Reserve CB
Aceasta este o funcție de retur a apelurilor pe care puteți să o înlocuiți dacă nu se găsește niciun meniu. Implicit folosește standul vechi wp_page_menu () și trece toate aceiași parametri și la această funcție.
Inainte si dupa
Aceste elemente sunt utilizate pentru a defini ce pot fi plasate înainte și după etichetele de ancorare (). Ați putea să le utilizați pentru a precede fiecare element cu o bară verticală sau pentru a împacheta articolele nav într-o etichetă de interval.
Înainte de conectare și după conectare
Acestea funcționează la fel ca elementele anterioare pe care le-am acoperit, cu excepția faptului că ceea ce ați definit va fi în interiorul etichetelor de ancorare. Exemplul nostru nu presupune utilizarea acestora, astfel încât le vom ignora și vom lăsa elementul gol implicit.
Elemente Wrap
În mod prestabilit, elementele sunt înfășurate într-o listă neordonată, cu meniul id și clasa de meniuri. Acest parametru vă permite să modificați dacă doriți acest lucru.
Adâncime
Acest parametru este foarte frumos atunci când doriți să utilizați același meniu de două ori, dar nu doriți ca elementele copilului să fie afișate în locația pe care o configurați wp_nav_menu () funcţie. De exemplu, dacă doriți ca navigarea primară să includă o meniuri de nivel secundar, puteți lăsa acest lucru la setarea implicită. Apoi, dacă doriți să utilizați aceleași elemente părinte într-o navigație în subsol și să omiteți elementele copilului, puteți seta acest parametru la o adâncime de 1. În mod implicit "0" înseamnă că toate nivelurile vor fi afișate. Pentru a păstra concluzia noastră, presupunem că navigația primară nu include niciun element copil.
Walker
Parametrul este utilizat pentru a defini un obiect walker care poate fi folosit pentru a manipula modul în care funcția întreagă funcționează și transmite informațiile sale. Vom trece un exemplu bun în secțiunea următoare.
Adăugarea unei descrieri la elementele meniului Nav
Pentru exemplul nostru, dorim să adăugăm o sub-descriere la fiecare element de meniu principal. Funcția de adăugare a descrierii în sine este deja disponibilă în sistemul de meniuri WordPress. Pentru a activa acest lucru, mergeți la Meniuri și apoi apăsați fila de opțiuni de ecran din colțul din dreapta sus. Opțiunea de care aveți nevoie pentru a vă asigura este făcută clic pe cuvântul "Descriere". Cu această verificare, un element de meniu ar trebui să arate astfel:
După ce vom completa descrierile noastre, va trebui să creăm clasa Walker și să o adăugăm la wp_nav_menu () parametrii. O să sunăm la clasă description_navigation astfel încât codul nostru complet de parametri ar trebui să arate astfel:
Se întâmplă multe aici. Pentru mai multe informații despre cursurile Walker în general, permiteți-mi să vă refer la un alt tutorial: Înțelegerea clasei Walker. Partea cea mai importantă pe care trebuie să o înțelegeți aici este aceea că reconstruim rezultatul fiecărui element de legătură și adăugăm în descriere. Pe linia 19 a fragmentului de mai sus, puteți vedea unde obținem descrierea elementului dacă acesta există și face valoarea acestuia descriere $ înfășurat într-o etichetă de span, astfel încât să putem personaliza descrierile separat. Apoi, în liniile 24-29 în cazul în care vom bucăți elementul de legătură înapoi împreună, vom adăuga descrierea chiar înainte de încheierea etichetei de ancorare, astfel încât să devină parte a link-ul în sine.
Folosind tema Twenty Eleven, ar trebui să aveți acum ceva care arată astfel:
Stilul este sus
Să adăugăm un pic de stil pentru al face mai lizibil:
#nav a line-height: 20px; padding: 10px 15px; #de a span afișare: bloc; font-size: 11px; culoare: #ccc; #nav a: spațiu de hover culoare: # 999;
Acest lucru va schimba înălțimea și umplutura fiecărui link, determinând că descrierea din eticheta span va cădea pe propria linie și va ajusta dimensiunile și culorile un pic pentru un rezultat final care arată astfel:
Funcțiile relației
Nu numai că puteți folosi wp_nav_menu () pentru a ieși din meniu cu toate personalizările, puteți merge mai departe cu unele dintre funcțiile sale.
has_nav_menu ()
Această funcție este minunată pentru afișarea unui anumit meniu numai dacă acel meniu a fost atribuit locației dvs. tematice. De exemplu, poate doriți să creați o navigație de top pe tema dvs. pentru elemente de navigație mai mici pe care un utilizator nu le poate dori în navigarea principală. Acestea ar putea fi lucruri precum un link de acasă, "Reclamați cu noi" sau alte apeluri mai mici la acțiune. Dar ca distribuitor temă, dacă nu știți dacă va fi ceva ce utilizatorul dorește să folosească, pur și simplu utilizați o condiție cum ar fi:
dacă (has_nav_menu ('top-menu')) wp_nav_menu ('theme_location =' top-menu ');
wp_get_nav_menu_items ()
Această funcție va returna o serie de elemente dintr-un anumit meniu. Acest lucru poate fi util în special dacă doriți să creați o listă de meniuri personalizată fără a utiliza o clasă Walker. Pierdeți o mulțime de funcționalități, cum ar fi clasa curentă a elementului de meniu, dar este o modalitate excelentă de a trece printr-o serie de elemente de meniu pentru o soluție simplă.
Concluzie
Există o mulțime de lucruri pe care le puteți face pentru a vă personaliza meniurile de navigare când știți mai multe despre flexibilitatea oferită de parametrii construiți și pentru a avea un control mai bun cu clasa Walker. Trebuie să adăugați o altă etichetă cu clasa "icoană"pentru pictogramele personalizate pentru fiecare element? Nici o problema.
Capacitatea de a avea control complet asupra destinației de plasare și de ieșire a meniurilor vă extinde capacitățile ca dezvoltator de teme o cantitate inutilă de posibilități. Care sunt unele dintre lucrurile pe care le puteți folosi cursul Walker de făcut?
Share
Accentsconagua
