WordPress 101: Menu Icons
Zur Zeit arbeite ich an einem Kunden-Projekt, das im Menü mit Icons aufwartet. Wie das konkret aussieht, habe ich im folgenden mal versucht fachmännisch zu illustrieren:
In früheren Varianten habe ich sowas schnell über die »CSS-Klassen«-Funktion des WordPress-Menüs gelöst und die Icons als Background-Images eingefügt.
Da nun aber etwas mehr Dynamik gefragt war, mussten die Icons als SVG-Grafiken vor das jeweilige Menü-Element – Walker-Alarm! Bevor jetzt aber jemand diese komplizierte Kack-Klasse studiert, anbei die viel simplere Lösung.
Für sowas muss nicht gleich ein komplett eigener nav_walker her, es reicht bereits der geschickte Einsatz eines Hooks und zwar »walker_nav_menu_start_el«. Damit könnt ihr den Output des Menu Items innerhalb des li-Tags modifizieren.
In meinem konkreten Beispiel beginne ich aber erst einmal mit der Abfrage nach der Menu-Location, da ich die Icons nur im Hauptmenü – Location »main« – unterbringen möchte. Hier ließe sich zum Beispiel auch abfragen, auf welcher Tiefe ($depth) sich das aktuelle Menü-Element befindet, um nur Menüpunkte der ersten Ebene zu modifizieren.
Anschließend frage ich die CSS-Klassen des Elements ab und initialisiere eine neue Variable $new_output mit dem Original-Output. Die CSS-Klassen-Funktionalität des WordPress-Menüs missbrauche ich an dieser Stelle, um die Icon-Zuweisung vorzunehmen. Sprich: würde ich im Backend jetzt als CSS-Klasse »book« hinterlegen, dann würde die Funktion einen div-Container anlegen mit der Klasse »icon—book« und get_icon() liefert dann den Body des gleichnamigen SVGs im Asset-Ordner zurück.
Ein wirklich praktischer Hook, der einem viel Arbeit erspart und schnell implementiert ist. Wie stark ihr den Output damit modifiziert bleibt dabei ganz eurer Fantasie überlassen 🙌🏻