WordPress Hilfe: Grafiken oder Icons im Navigationsmenü hinzufügen
Ein Menü mit WordPress zu erstellen ist einfach. Aber bei vielen Menüpunkten nebeneinander wird es schnell sehr breit, unübersichtlich oder das Menü bricht mehrzeilig um. Deshalb ist es manchmal sinnvoll ein Icon oder ein Bild anstatt eines Textes in das WordPress Navigationsmenü einzufügen.
Bei Menüs mit vielen Eltern-Kategorien lässt sich beispielsweise die Startseite mit einem Home-Icon oder einem Haus-Symbol zu verlinken anstatt “Startseite” in der Menüzeile als Text auszuschreiben. Eine kleine Home-Grafik in Form eines Haus-Icons sorgt in dem Fall für mehr Raum und Übersicht. Außerdem ist das universell bekannt. Das Gleiche gilt auch für ein Email-Icon oder ein Telefon-Icon.
Wie fügt man ein Bild in das WordPress-Navigationsmenü ein?
An und für sich ist das relativ simpel aber doch wenig bekannt. WordPress an sich bietet eine übersichtliche und intuitiv zu bedienende Menü-Administration. Doch direkt die Möglichkeit dort anstatt eines Textes eine Grafik in das Navigationsmenü einzufügen fehlt auf den ersten Blick.
Doch bevor unnötige Plugins installiert werden: Es geht, und zwar recht einfach mit Bordmitteln.
Neuen WordPress Menüpunkt mit Icon erstellen
Man klickt eingeloggt als Administrator auf das WordPress Dashboard, dann auf Design -> Menüs und klappt “Individuelle Links” aus.
Im Falle eines Home Icons im WordPress-Menü wird bei “URL” der (absolute) Link zur Startseite eingefügt. Das ist in den meisten Fällen etwas wie “https://meine-webseite.de”.
Und jetzt kommt der Trick: Bei “Link-Text” lässt sich auch ein HTML Image-Tag einfügen:
<img src="https://meine-webseite.de/wp-content/uploads/2019/09/home-icon.png">Das eigentliche Icon kann man über FTP oder über Dashboard -> Medien -> Datei hinzufügen auf dem Server speichern. Dort lässt sich nach dem Upload der Pfad zu dem Bild kopieren. Auch hier sollte man den absoluten Pfad nehmen (beginnend mit https://).
Sind die URL und der Image-Tag bei “Link-Text” eingefügt, klickt man auf den Button “Zum Menü hinzufügen”, sortiert den Menüpunkt per Drag & Drop an die richtige Position und speichert das Menü. Fertig.
Menüpunkt mit Bild und Text im WordPress Navigationsmenü
Möchte man eine Grafik und einen Text darunter anzeigen, so bietet dieser Trick der HTML-Eingabe im Feld “Link-Text” noch weitere Möglichkeiten. Beispielsweise lässt sich ein HTML DIV-Container in das Navigationsmenü einfügen:
<div style="background-image: url('https://meine-webseite.de/wp-content/uploads/2019/09/home-icon.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 40px;"> Startseite</div>Über das CSS “margin” und “padding” muss dann evtl. noch die Position des Icons angepasst werden.
Falls es doch nicht klappt: WordPress-Hilfe vom Profi
Ich biete schnell und unkompliziert WordPress-Hilfe auf stundenbasis an:
Die meisten Probleme sind schnell identifiziert und werden kurzfristig gelöst. Mit einem Klick auf den orangefarbenen Chat-Button hast Du hast die Möglichkeit mich tagsüber im Chat zu erreichen – oder Du sendest mir eine E-Mail über das WordPress-Support-Formular.
15 Jahre Erfahrung mit WordPress
Seit WordPress 1.2 (Mai 2004).
Hilfe bei Fehlern oder Problemen mit WordPress, Plugins, Themes, Widgets, Snippets und vielem mehr!
Du hast in Tom einen kompetenten Web-Developer mit umfangreichen Programmierkenntnissen als Ansprechpartner.
Tom hilft Dir schnell und unkompliziert!
Klicke auf das Chat-Symbol unten rechts oder hinterlasse eine Nachricht über das unten stehende Formular.
Sende Tom eine Email und er meldet sich bald möglichst
Versuche Dein Anliegen konkret zu beschreiben:
Telefonischer WordPress Support
Tom im Büro anrufen unter:
Telefon: +49 (0)7961 / 564237
(Festnetz; Kosten abhängig von Deinem Tarif)
Tom ist nicht immer telefonisch zu erreichen. Sende in dem Fall Deine Telefonnummer über das Kontaktformular .
