Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Dashicons im Menü nutzen

WordPress Dashicons im Menü nutzen

WordPress Dashicons im Frontend

Vor kurzem habe ich euch ein Snippet präsentiert, mit dem ihr die in WordPress 3.8 hinzugekommenen Dashicons bzw. die Icon Font auch im Frontend nutzen könnt. Das war relativ simpel und dank einem Online-Generator brauchtet ihr für die korrekte Einbindung auch keinerlei Vorkenntnisse. Doch kann man die WordPress Dashicons auch im Menü verwenden? Und wenn ja, wie werden die Dashicons dann korrekt in das Menü integriert? Auch das ist eigentlich ganz einfach, denn ist die Icon Font erst einmal mit dem Snippet eingebunden, lässt sie sich quasi überall einfügen, auch im Menü. Wie das geht, erfahrt ihr nun hier.

1. Dashicons integrieren

Als erstes müsst ihr das erwähnte Snippet integrieren. Einfach den folgenden Code in eure Functions.php einfügen und abspeichern.

add_action( 'wp_enqueue_scripts', 'fastwp_load_dashicons' );
function fastwp_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

2. CSS-Klassen erstellen

Die Icon Font ist nun korrekt eingebunden und wird auch im Frontend geladen, doch wie lassen sich die Dashicons nun im Menü nutzen bzw. wie kann ich sie dort einfügen? Um die Icon Font im Menü zu nutzen, solltet ihr nun unter “Design -> Editor ” eure “Style.css” auswählen und einen neuen Eintrag vornehmen bzw. so viele neue Einträge integrieren, wie ihr Menüpunkte habt. Dabei ist es wichtig, dass ihr die richtige CSS-Klasse von eurem Menü nutzt. Bei mir im Beispiel ist die CSS-Klasse des Menüs ganz einfach “menu” und der erste Button heißt “allgemeines”. Gemeinsam ergibt das den Eintrag “.menu .allgemeines:before”. In diesen Eintrag muss nun noch das Icon integriert werden, was mit “content” geschieht. Sucht euch einfach auf dieser Website ein Icon aus, klickt darauf und wählt oben dann “Copy CSS”. Anschließend zeigt euch das Fenster, welcher Eintrag bei “content” hinzugefügt werden muss. Bei mir ist das Icon ein Haus und das ergibt den folgenden CSS-Eintrag.

.menu .allgemeines:before {
content: "\f102";
font: normal 15px/0px Dashicons;
color: #FFF;
}

3. Icons den Menüpunkten zuordnen

Nun habe ich in Punkt eins die Icon Font eingebunden, in Punkt zwei ein erstes Icon für die Verwendung vorbereit, und nun wird es Zeit dieses Icon dem entsprechenden Menüpunkt zuzuweisen. Dafür geht ihr nun ganz einfach unter “Design -> Menüs” auf den Eintrag in eurem Menü, dem ihr das Icon zuweisen wollt. Dort sollte nun ein Feld für “CSS Classes (optional)” eingeblendet werden. Ist dies nicht der Fall, klickt ganz oben rechts auf “Optionen” und setzt das Häckchen bei “CSS Classes”. In das Feld müsst ihr nun den Namen der eben erzeugten Klasse einfügen. “allgemeines” war das bei mir im Beispiel. Fertig. Nun sollte, nachdem ihr das Menü noch einmal abgespeichert habt, auf eurer Website ein Icon vor dem Menüpunkt erscheinen. Weiter angepasst werden kann dies nun über den entsprechenden CSS-Eintrag.

Dashicons im Menü nutzen Screenshot 1

4. Mögliche Fehler

Viele Fehler kann die einfache Anleitung nicht hervorbringen. Sollte nun kein Icon angezeigt werden, habt ihr vermutlich nicht die richtige CSS-Klasse eures Menüs herausgefunden und in eurer CSS eine falsche eingetragen. Bei mir war das “.menü”, doch bei euch kann diese Klasse auch ganz anders heißen. Schaut einfach mal in euren Quelltext und probiert verschiedene Klassen durch, wenn ihr euch nicht auskennt, bis das Icon irgendwann erscheint.

Dashicons im Menü anzeigen

Natürlich eignet sich diese Anleitung hier auch für alle anderen Icon Fonts, wenn sie denn korrekt integriert wurden. Die Dashicons sind bei WordPress nun aber eine Art Standard geworden und damit natürlich perfekt für den Einsatz im Frontend geeignet. Ich hoffe ich konnte euch helfen und wer weiß, vielleicht sehe ich in kürze ja des Öfteren mal Menüs mit passenden Icons. Schaden kann das nicht, denn Bilder sagen mehr als tausend Worte und vereinfachen die Bedienung oft enorm. Einen Versuch ist es wert, vielleicht mögen es eure Besucher. Viel Erfolg beim Einbau. Falls es Fragen oder Probleme gibt, rein damit in die Kommentare.



Wordpress Performance eBook