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.

Grafik, Bild oder Icon in das WordPRess Navigationsmenü einfügen
Grafik, Bild oder Icon in das WordPress Navigationsmenü einfügen

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

WordPress Hilfe - Grafiken oder Icons im Menü hinzufügen
Design -> Menüs -> Individuelle Links

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:

WordPress-Hilfe

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.

WordPress Support in 75233 Tiefenbronn

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 orangefarbene 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:

* Pflichtfelder

Telefonischer WordPress Support

Tom im Büro anrufen unter:

Telefon: +49 (0)7961 / 564237

(Festnetz; Kosten abhängig von Ihrem Tarif)

Tom ist nicht immer telefonisch zu erreichen. Sende in dem Fall Deine Telefonnummer über das Kontaktformular .