Oftest er den HTML WordPress skyder ud, når du bruger wp_nav_menu() fyldt med ubrugelige klasser og ID’s som du oftest ikke har brug for. Derudover er det bare ikke en pæn kode at arbejde med.

Derfor har WordPress en “Walker Class” du kan bruge til at bygge din egen HTML-struktur. Det blev introduceret i WordPress 2.1, så det har været her længe.

Standard HTML Output i WordPress:

Nedenstående kodestykke er den HTML du får ved at bruge en uredigeret version af wp_nav_menu(). Ikke særlig overskueligt. Vel? Forestil dig, at din menu indeholder 100 menupunkter, og 4 niveauer i alt. Det er noget værre rod.

Den ønskede HTML-struktur:

Nedenstående kodestykke er den færdige HTML vi gerne vil opnå. Ingen brug af overflødige ID’s og classes. Det eneste vi får brug for til at designe vores menu er en “active”-class og en “parent”-class. Derudover er <div>-elementet byttet ud med et <nav>-element for at signalere at vi her har med en menu at gøre.

Man kunne forbedre semantikken yderligere ved at tilføje ARIA-attributter til vores <ul> og <li> tags. Men det er et helt andet blogindlæg. Den simpleste måde at få et markup der matcher ovenstående struktur vil være at lave et filter som følger:

Det giver nedenstående HTML-output. Tæt på. Og sikkert også tæt nok for rigtig mange.

Her er der dog den udfordring, at hvis du tilføjer custom-classes via kontrolpanelet til et menupunkt for at give den noget speciel styling så bliver det også filtreret ud. Derfor skal vi udbygge filteret ved manuelt at tilføje vores tilladte klasser. Ikke særlig brugervenligt.

Derfor kan vi bruge og udbygge WordPress’ Walker Class til at få selvsamme (og bedre) HTML-output, og samtidig have fuld kontrol over hele strukturen. Jeg har bygget en Custom Walker Class der giver præcis det ønskede markup – og som stadig tillader custom-classes. Indsæt det i din functions.php-fil og husk, at du også skal definere at du vil bruge denne walker class, med din wp_nav_menu(). (Ses herunder)

Herefter skal vi, hvor vi vil placere vores menu, indsætte følgende wp_nav_menu(). Her er den udbygget til at bruge vores ovenstående Custom Walker Class. Sørg for at indsætte den korrekte theme_location()

Det giver os dette endelige HTML-output der klart er at foretrække.

Måske bemærker du at min Custom Walker Class indsætter et par <span></span> ved dybere niveauer. Hvorfor? For at kunne definere et tilbage/frem element på mobilvisninger. Det kan ses på denne Danske Bank inspirerede mobil-menu.

Gør som mere end 1,300 andre der allerede har fået et forspring

Få gratis online marketing tips og rådgivning direkte i din indbakke.

Helt gratis. Afmeld når som helst.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *