Når WordPress 3 presenterte oss med den nye menyfunksjonaliteten, endret den måten vi så på navigasjonsmenyene for alltid. Ikke lenger var vi bundet til å bruke de vanlige sideoppføringsfunksjonene eller bygge våre egne tilpassede menyfunksjoner for å integrere kategori- og sidemenyer, samt eksterne eller hardt koblede elementer i nav-menyen. Men hvor tilpasset kan vi få med denne nye funksjonaliteten? I denne opplæringen dykker vi dypt inn i alt som wp_nav_menu
funksjonen kan gjøre, bruk Walker Class til å legge til en underbeskrivelse, og berør noen av sine relaterte funksjoner.
Funksjonen har flere parametre å jobbe med. Her er standardverdiene som er oppført i WordPress.org Codex:
, 'menu' =>, 'container' => 'div', 'container_class' => 'meny- meny slug -container', 'container_id' =>, 'menu_class' => 'meny', 'menu_id' = ' >, 'Echo' => true, 'fallback_cb' => 'wp_page_menu', 'før' =>, 'etter' =>, 'link_before' =>, 'link_after' =>, 'items_wrap' => '
Ved hjelp av denne parameteren kan vi angi et temaområde som deretter brukes på menusiden for å angi en meny som skal fungere i den delen av temaet uten å måtte definere hvilken meny som skal vises der manuelt. Dette er veldig nyttig for tema distributører fordi du kan bruke betingelsessystemer til å bare vise en meny hvis brukeren har definert en meny for den plasseringen. Det eneste andre kravet er at du bruker funksjonen register_nav_menu ()
å registrere disse stedene. Dette gjøres vanligvis fra funksjonsfiler når du setter opp støtte for menyer.
La oss begynne å bygge våre tilpassede menyfunksjonsparametere, forutsatt at vi har registrert et temaområde kalt "hoved~~POS=TRUNC
".
$ params = array ('theme_location' => 'primary');
Denne parameteren brukes til å manuelt definere hvilken meny som skal brukes. I vårt eksempel innstiller vi bare en generisk menyplassering og ikke definerer en eksakt en som skal brukes, men hvis vi ønsker å fortelle funksjonen å bruke en meny som heter "Primærnavigering", ser parametrene våre ut slik:
$ params = array ('theme_location' => 'primary', 'menu' => 'Primærnavigasjon');
Som standard blir vår meny pakket inn i en div
, men hvis du er som meg, trenger du vanligvis ikke dette og sannsynligvis vil kutte ned på mengden div
s og andre koder brukes til å holde koden så ryddig som mulig. Du kan også bruke denne parameteren til å definere en annen kode, for eksempel en html5 eller
. For vårt eksempel ønsker vi ikke at en beholder skal endre standardbeholderverdiene siden de tjue elleve tema stilene stole på at det er der.
Som du kan ganske godt gjette, er disse parameterne brukt til å sette en klasse og en ID til containeren. Siden vi helt unnlater dette, trenger vi ikke å definere verdier.
Disse fungerer akkurat som de forrige parametrene bortsett fra denne gangen, vil vi definitivt sette en ID av "nav
"fordi det er ID-en som vi bruker i stilarket for å stille navigasjonslinjen.
$ params = array ('theme_location' => 'primary', 'container' => false, 'menu_id' => 'nav');
Du kan bruke denne parameteren til å fortelle om du vil vise (ekko) resultatene, eller returnere den til bruk i PHP. Dette elementet er boolesk, så å returnere det bare sett denne parameteren til 0.
Dette er en tilbakeringingsfunksjon som du kan tilbakebetale til hvis ingen meny er funnet. Som standard bruker den den gamle standbyen wp_page_menu ()
og overfører alle de samme parametrene til denne funksjonen også.
Disse elementene brukes til å definere hva som kan plasseres før og etter ankeretikettene (). Du kan bruke disse til å forhåndsføre hvert element med en vertikal stang, eller pakke nav-elementene i en span-kode.
Disse fungerer på samme måte som de tidligere elementene vi dekket, bortsett fra at det du definerer, vil være inne i ankeretikettene. Vårt eksempel krever ikke at vi bruker disse, så vi vil ignorere dem og la standard tomt element være.
Som standard er elementene pakket inn i en uordnet liste med meny-ID og menyklasse. Denne parameteren lar deg endre det hvis du ønsker det.
Denne parameteren er veldig hyggelig for når du vil bruke samme meny to ganger, men vil ikke at noen barnevner skal vises på stedet du setter opp med wp_nav_menu ()
funksjon. For eksempel, hvis du vil at primærnavigasjonen skal inkludere et rullegardin på andre nivå, kan du forlate dette ved standardinnstillingen. Deretter kan du sette denne parameteren til en dybde på 1 hvis du vil bruke de samme foreldreelementene i en bunntekstnavigering og utelate barnets elementer. Standard "0" betyr at alle nivåer skal sendes ut. For å holde vårt eksempel kortfattet antar vi at primærnavigasjonen ikke inneholder noen barnevner.
Parameteren brukes til å definere et walkerobjekt som kan brukes til å manipulere hvordan hele funksjonen fungerer og utdataer sin informasjon. Vi vil gå over et godt eksempel i neste avsnitt.
For vårt eksempel vil vi legge til en underbeskrivelse for hvert hovedmenyelement. Funksjonaliteten til å legge til beskrivelsen selv er allerede på plass i WordPress Menysystemet. For å slå på dette, gå til Menyer og trykk deretter på skjermalternativer-fanen øverst til høyre. Alternativet du må sørge for er klikket, bør si "Beskrivelse". Med dette merket, bør et menyelement nå se slik ut:
Når vi har fylt ut våre beskrivelser, må vi opprette walker-klassen og legge den til wp_nav_menu ()
parametre. Vi ringer klassen description_navigation
så vår komplette parameterkode skal se slik ut:
$ params = array ('theme_location' => 'primær', 'menu_id' => 'nav', 'walker' => ny description_walker ()); wp_nav_menu ($ params);
Nå er vi klare til å legge til disse beskrivelsene ved å bruke vår Walker-klasse:
class description_walker utvider Walker_Nav_Menu funksjon start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ dybde)? str_repeat ("\ t", $ dybde): "; $ class_names = $ value ="; $ classes = empty ($ item-> classes)? array (): (array) $ item-> klasser; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ innrykk. '
Det skjer mye her. For mer informasjon om Walker klasser generelt, la meg referere deg til en annen opplæring: Forstå Walker Class. Den viktigste delen du bør forstå her er at vi gjenoppbygger produksjonen av hvert koblingsobjekt og legger til i beskrivelsen. På linje 19 i utsnittet ovenfor kan du se hvor vi får varebeskrivelsen hvis den eksisterer og gjør verdien av $ beskrivelse
pakket inn i en span-kode slik at vi kan utforme beskrivelsene separat. Deretter i linjene 24-29 hvor vi kobler koblingsobjektet sammen igjen, legger vi inn beskrivelsen like før ankermerket lukkes slik at det blir en del av selve lenken.
Ved hjelp av temaet Twenty Eleven bør du nå ha noe som ser slik ut:
La oss legge til litt styling for å gjøre det mer leselig:
#nav en linjehøyde: 20px; polstring: 10px 15px; #nav et span display: block; skriftstørrelse: 11px; farge: #ccc; #nav a: svever span color: # 999;
Dette vil endre høyden og utfyllingen til hver lenke, fordi beskrivelsen i span-merket skal falle til sin egen linje, og juster skriftstørrelsene og farger litt for et sluttresultat som ser slik ut:
Ikke bare kan du bruke wp_nav_menu ()
å utføre menyen din med alle tilpasninger, kan du gå litt lenger med noen av sine relaterte funksjoner.
has_nav_menu ()
Denne funksjonen er flott for kun å vise en bestemt meny hvis den menyen har blitt tildelt til temaet ditt. For eksempel vil du kanskje lage en toppnavigasjon på temaet ditt for mindre navigasjonsartikler som en bruker kanskje ikke vil ha i hovednavigasjonen. Dette kan være ting som et hjemmekobling, "Annonser med oss", eller andre lavere anrop til handling. Men som tema distributør, hvis du ikke vet om det kommer til å være noe brukeren vil bruke, bruk bare en tilstand som så:
hvis (has_nav_menu ('toppmeny')) wp_nav_menu ('theme_location =' top-menu ');
wp_get_nav_menu_items ()
Denne funksjonen returnerer en rekke elementer fra en bestemt meny. Dette kan være spesielt nyttig hvis du vil bygge en egendefinert menyliste uten å bruke en Walker Class. Du mister mye funksjonalitet som menyelementets nåværende klasse, men det er en fin måte å løse gjennom en rekke menyelementer for en enkel løsning.
Det er mange ting du kan gjøre for å tilpasse navigasjonsmenyene dine når du vet mer om fleksibiliteten som tilbys med innebygde parametere og å kunne ha større kontroll med Walker Class. Trenger du å legge til en annen span-kode med klassen "ikon
"for egendefinerte ikoner til hvert element? Ikke noe problem.
Å være i stand til å ha full kontroll over plassering og utgang av menyer, utvider dine evner som temautvikler en umåtelig mengde muligheter. Hva er noen av tingene du kan bruke den Walker-klassen til å gjøre?