Bildsymbole zu WordPress-Navigationsmenüs hinzufügen

Im Laufe der Jahre haben wir Tausenden von Lesern geholfen, ihre WordPress-Websites anzupassen, um sowohl die Benutzererfahrung als auch die visuelle Attraktivität zu verbessern. Aus unserer praktischen Erfahrung mit Webdesign haben wir gelernt, dass das Hinzufügen von Bildsymbolen zu WordPress-Navigationsmenüs die Benutzerfreundlichkeit Ihrer Website drastisch verbessern kann.

Das liegt daran, dass Bildsymbole Ihren Besuchern intuitive visuelle Hinweise geben können, wodurch die Navigation auf Ihrer Website erleichtert wird. Auf diese Weise ist die Benutzeroberfläche Ihrer Website interaktiver und ansprechender, was zur Reduzierung der Absprungrate beiträgt.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Bildsymbole zu Navigationsmenüs in WordPress hinzufügen. 

Warum Bildsymbole mit Navigationsmenüs in WordPress hinzufügen?

Normalerweise sind WordPress-Navigationsmenüs reine Textlinks. Diese Links funktionieren gut für die meisten Websites, sehen aber nicht immer interessant oder ansprechend aus. 

Durch das Hinzufügen von Bildsymbolen zum Navigationsmenü können Sie Besucher dazu anregen, dem Menü Aufmerksamkeit zu schenken und mehr von Ihrer Website zu erkunden.

Wenn Ihr Menü viele verschiedene Optionen hat, können Bildsymbole es den Besuchern erleichtern, den Inhalt zu überfliegen und zu finden, wonach sie suchen. Dies kann eine einfache Möglichkeit sein, die Seitenaufrufe zu erhöhen und die Absprungrate in WordPress zu reduzieren. 

Sie könnten sogar ein Bildsymbol verwenden, um den wichtigsten Menüpunkt hervorzuheben, wie z. B. den Link zur Kasse in Ihrem Online-Marktplatz. 

Indem Sie einen Call to Action im Menü hervorheben, können Sie oft mehr Anmeldungen, Verkäufe, Mitglieder und andere Konversionen erzielen.

Nun sehen wir uns an, wie Sie Bildsymbole zu Ihrem WordPress-Navigationsmenü hinzufügen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu gelangen, die Sie verwenden möchten:

• Methode 1: Bildsymbole mit einem Plugin zu Navigationsmenüs hinzufügen (schnell und einfach)
• Methode 2: Icons zu WordPress-Menüs per Code hinzufügen (anpassbarer)
• Bonus: Social-Media-Icons zu WordPress-Menüs hinzufügen

Methode 1: Bildsymbole mit einem Plugin zu Navigationsmenüs hinzufügen (schnell und einfach)

Der einfachste Weg, Icons zu Ihren WordPress-Menüs hinzuzufügen, ist die Verwendung von Menu Image. Dieses Plugin wird mit DashIcon-Icons geliefert, die Sie mit wenigen Klicks hinzufügen können.

Wenn Sie Font Awesome auf Ihrer Website eingerichtet haben, können Sie diese Symbole mit Menu Image ganz einfach zu Ihrem Navigationsmenü hinzufügen. Weitere Informationen zur Installation von Font Awesome finden Sie in unserem Leitfaden unter how to easily add icon fonts to your WordPress theme.

Eine weitere Option ist die Verwendung von Bildern oder Symbolen aus der WordPress-Mediathek.

Das erste, was Sie tun müssen, ist, das Menu Image-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung klicken Sie im WordPress-Dashboard auf Menübild . Auf diesem Bildschirm können Sie wählen, ob Sie Sicherheits- und Funktionsbenachrichtigungen erhalten möchten, oder auf die Schaltfläche „Überspringen“ klicken.

Dies führt Sie zu einem Bildschirm, auf dem Sie die Einstellungen des Plugins konfigurieren können. Zunächst sehen Sie alle verschiedenen Größen, die Sie für die Bildsymbole verwenden können.

Wenn Sie Icons von Font Awesome oder Dashicons verwenden möchten, skaliert Menübild diese automatisch. Wenn Sie jedoch Bilder aus der Mediathek verwenden, müssen Sie die Größe manuell auswählen.

Das Plugin unterstützt die standardmäßigen WordPress-Bildgrößen wie Thumbnails, Bilder und groß. Es fügt auch drei einzigartige Größen hinzu, die standardmäßig auf 24×24, 36×36 und 48×48 Pixel eingestellt sind.

Diese Einstellungen sollten für die meisten Websites gut funktionieren, aber Sie können die Symbole größer oder kleiner machen, indem Sie unterschiedliche Zahlen für die 1., 2. oder 3. Menübildgröße eingeben.

Wenn Sie Symbole zu Ihrem Menü hinzufügen, sehen Sie standardmäßig ein Feld „Bild beim Überfahren“. Dies ermöglicht es Ihnen, ein anderes Symbol anzuzeigen, wenn der Besucher mit der Maus über dieses Menüelement fährt.

Beachten Sie einfach, dass diese Einstellung nur verfügbar ist, wenn Sie Ihre eigenen Bilder verwenden. Sie müssen sich keine Gedanken über die Funktion „Bild beim Überfahren“ machen, wenn Sie DashIcons oder Font Awesome-Symbole verwenden möchten.

Das Anzeigen eines anderen Symbols kann Besuchern helfen zu sehen, wo sie sich im Navigationsmenü befinden. Dies ist besonders nützlich, wenn Ihr Menü viele verschiedene Elemente enthält. Sie könnten beispielsweise unterschiedliche Farben oder Symbolgrößen verwenden, um das aktuell ausgewählte Element hervorzuheben.

Wenn Sie verschiedene Hover-Effekte erstellen möchten, stellen Sie sicher, dass Sie das Feld „Bild beim Hovern aktivieren“ aktivieren.

Wenn das erledigt ist, klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Um Symbole zum Navigationsmenü hinzuzufügen, gehen Sie zur Seite Darstellung » Menüs. Standardmäßig zeigt WordPress das primäre Menü Ihrer Website an.

Wenn Sie ein anderes Menü bearbeiten möchten, öffnen Sie einfach das Dropdown-Menü „Menü zur Bearbeitung auswählen“ und wählen Sie ein Menü aus der Liste aus. Klicken Sie anschließend auf „Auswählen“.

Bewegen Sie nun den Mauszeiger über den ersten Menüpunkt, dem Sie ein Symbol hinzufügen möchten. Wenn 'Menübild' erscheint, klicken Sie darauf.

Sie können nun entscheiden, ob Sie Ihr eigenes Bild verwenden oder ein fertiges Symbol wie ein Font-Awesome-Symbol auswählen möchten.

Um ein fertiges Symbol zu verwenden, klicken Sie auf die Optionsschaltfläche neben „Symbole“.

Sie können dann auf ein beliebiges Dashicon oder Font Awesome-Icon klicken, um es auszuwählen.

Wenn Sie Ihr eigenes Bild verwenden möchten, wählen Sie die Optionsschaltfläche neben „Bild“ und klicken Sie auf den Link „Bild festlegen“.

Sie können nun entweder ein Bild aus der WordPress-Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Wenn Sie im Einstellungsmenü des Plugins die Option „Bild beim Überfahren aktivieren“ ausgewählt haben, müssen Sie auch auf „Bild beim Überfahren festlegen“ klicken.

Wählen Sie nun ein Bild aus, das angezeigt werden soll, wenn der Benutzer mit der Maus über dieses Menüelement fährt.

Manchmal möchten Sie diese Einstellung vielleicht ignorieren und dasselbe Symbol anzeigen, egal was passiert. Klicken Sie dazu auf „Bild beim Hovern festlegen“ und wählen Sie dann genau dasselbe Symbol aus.

Wenn Sie kein Bild auswählen, verschwindet das Symbol vollständig, wenn der Besucher mit der Maus darüber fährt.

Öffnen Sie danach das Dropdown-Menü „Bildgröße“ und wählen Sie eine Größe aus der Liste aus.

Die Verwendung derselben Größe für alle Symbole macht das Menü tendenziell organisierter. Manchmal ist es jedoch eine gute Idee, für den wichtigsten Punkt ein größeres Symbol zu verwenden.

Zum Beispiel, wenn Sie einen Online-Shop mit einem Plugin wie WooCommerce erstellt haben, dann könnten Sie ein größeres Symbol für „Zur Kasse“ verwenden, damit es hervorsticht.

Wenn Sie mit dem Symbol zufrieden sind, ist es an der Zeit, sich das Label des Menüpunkts anzusehen. Standardmäßig zeigt das Plugin das Titel-Label nach dem Symbol an.

Um dies zu ändern, wählen Sie eine der Radio-Schaltflächen im Abschnitt „Titelposition“ aus.

Eine weitere Option ist, die Navigationsbeschriftung vollständig zu entfernen und ein Menü nur mit Symbolen zu erstellen. Wenn Ihr Menü viele Elemente hat, kann dies dazu führen, dass es weniger überladen aussieht.

Sie sollten die Beschriftungen jedoch nur ausblenden, wenn klar ist, was jedes Symbol bedeutet. Wenn es unklar ist, werden die Besucher Schwierigkeiten haben, Ihr WordPress-Blog oder Ihre Website zu navigieren.

Um das Label auszublenden, wählen Sie den Radiobutton neben „Keine“.

Wenn Sie mit der Einrichtung des Menüpunkts zufrieden sind, klicken Sie auf „Änderungen speichern“.

Um anderen Menüpunkten ein Symbol hinzuzufügen, folgen Sie einfach dem gleichen Prozess wie oben beschrieben.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Menü speichern“ zu klicken. Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie das aktualisierte Navigationsmenü live.

Methode 2: Icons zu WordPress-Menüs per Code hinzufügen (anpassbarer)

Sie können auch Bildsymbole zu Ihren Navigationsmenüs mit CSS hinzufügen.

Auf diese Weise können Sie genau steuern, wo die Symbole in Ihren Menüs erscheinen. Sie können auch jedes Bild als Symbol verwenden, sodass es eine großartige Möglichkeit ist, Ihr eigenes Branding hinzuzufügen.

Laden Sie zunächst alle Bilddateien hoch, die Sie als Symbole verwenden möchten. Dies können Stockfotos, lizenzfreie Bilder, die Sie online gefunden haben, oder benutzerdefinierte Grafiken sein, die mit einer App wie Canva erstellt wurden.

Nachdem Sie jedes Bild zur WordPress-Mediathek hinzugefügt haben, kopieren Sie dessen URL und fügen Sie sie in einen Texteditor wie Notepad ein. Sie benötigen alle diese Links im nächsten Schritt.

Um die URL eines Bildes zu finden, wählen Sie es einfach in der WordPress-Mediathek aus und schauen Sie dann in das Feld „Dateipfad“.

Detailliertere Anweisungen finden Sie in unserem Leitfaden So erhalten Sie die URL von Bildern, die Sie in WordPress hochladen.

Danach müssen Sie im WordPress-Dashboard zur Seite Darstellung » Menüs navigieren.

Öffnen Sie als Nächstes das Dropdown-Menü „Menü auswählen zum Bearbeiten“ und wählen Sie das Menü aus, zu dem Sie die Bildsymbole hinzufügen möchten.

Klicken Sie danach auf „Auswählen“.

Aktivieren Sie als Nächstes benutzerdefinierte CSS-Klassen, indem Sie auf „Bildschirmoptionen“ klicken.

Aktivieren Sie im erscheinenden Bedienfeld das Kontrollkästchen neben „CSS-Klassen“.

Damit können Sie jedem Element im Navigationsmenü benutzerdefinierte CSS-Klassen hinzufügen. So verknüpfen Sie jedes Menüelement mit einem Bild in der WordPress-Mediathek.

Sie können diese Klassen beliebig benennen, aber es ist eine gute Idee, etwas zu verwenden, das Ihnen hilft, den Menüpunkt zu identifizieren.

Um zu beginnen, klicken Sie einfach auf den ersten Eintrag, dem Sie ein Bildsymbol hinzufügen möchten. Geben Sie im Feld „CSS-Klassen (optional)“ den Klassennamen ein, den Sie verwenden möchten.

Sie werden diese benutzerdefinierten CSS-Klassen im nächsten Schritt verwenden. Notieren Sie sich diese also in Ihrem Editor oder einer ähnlichen Anwendung.

Befolgen Sie einfach denselben Prozess, um allen Ihren Menüpunkten eine separate Klasse hinzuzufügen. Klicken Sie anschließend auf „Menü speichern“, um Ihre Einstellungen zu speichern.

Jetzt sind Sie bereit, mit CSS Bildsymbole zu Ihren WordPress-Navigationsmenüs hinzuzufügen.

Oft werden Sie in WordPress-Tutorials aufgefordert, Code-Snippets zu Ihren WordPress-Theme-Dateien hinzuzufügen. Dies kann jedoch zu häufigen WordPress-Fehlern führen und ist nicht sehr anfängerfreundlich.

Deshalb empfehlen wir WPCode.

Es ist das beste WordPress-Code-Snippet-Plugin, das von über 1 Million Websites genutzt wird und es Ihnen ermöglicht, benutzerdefinierten Code hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten.

Das erste, was Sie tun müssen, ist, das kostenlose WPCode Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets » Snippet hinzufügen.

Dies bringt Sie zur Seite „Snippet hinzufügen“, wo Sie die Bibliothek mit fertigen Snippets von WPCode sehen können. Dazu gehören Snippets, mit denen Sie Ihre WordPress-Sicherheit verbessern können, indem Sie XML-RPC deaktivieren, Dateitypen hochladen, die WordPress standardmäßig nicht unterstützt, und vieles mehr.

Bewegen Sie einfach die Maus über „Benutzerdefinierten Code hinzufügen“ und klicken Sie dann auf „Snippet verwenden“, wenn es erscheint.

Geben Sie zunächst einen Titel für den benutzerdefinierten Code-Schnipsel ein. Dies kann alles sein, was Ihnen hilft, den Schnipsel im WordPress-Dashboard zu identifizieren.

Wenn das erledigt ist, öffnen Sie das Dropdown-Menü „Code-Typ“ und wählen Sie „CSS-Snippet“.

Im Code-Editor müssen Sie Code für jedes Symbol hinzufügen, das Sie anzeigen möchten.

Um Ihnen zu helfen, haben wir unten einen Beispiel-Snippet erstellt. Sie können '.carticon' durch die benutzerdefinierte CSS-Klasse ersetzen, die Sie im vorherigen Schritt erstellt haben. Sie müssen auch die URL durch einen Link zum Bild in Ihrer WordPress-Mediathek ersetzen:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Sie müssen den obigen Ausschnitt für jedes einzelne Menüelement anpassen, das Sie oben erstellt haben.

Wenn Sie mit Ihrem Code zufrieden sind, scrollen Sie zum Abschnitt „Einfügen“. WPCode kann Code an verschiedenen Stellen einfügen, z. B. nach jedem Beitrag, nur im Frontend oder nur im Admin-Bereich.

Um den benutzerdefinierten CSS-Code auf Ihrem gesamten WordPress-Blog oder Ihrer Website zu verwenden, klicken Sie auf „Automatisch einfügen“, falls dies noch nicht ausgewählt ist.

Öffnen Sie dann das Dropdown-Menü „Standort“ und wählen Sie „Website-weiter Header“.

Danach können Sie zum oberen Bildschirmrand scrollen und auf den Schalter „Inaktiv“ klicken, damit er zu „Aktiv“ wechselt.

Klicken Sie abschließend auf „Snippet speichern“, um das benutzerdefinierte CSS live zu schalten.

Wenn Sie nun Ihre Website besuchen, sehen Sie alle Bildsymbole in Ihrem Navigationsmenü.

Abhängig von Ihrem WordPress-Theme müssen Sie möglicherweise das CSS anpassen, damit die Bild-Icons an der richtigen Stelle angezeigt werden. Wenn dies der Fall ist, gehen Sie im WordPress-Dashboard zu Code-Snippets » Code-Snippets.

Fahren Sie dann einfach mit der Maus über den Ausschnitt und klicken Sie auf den Link „Bearbeiten“, wenn er erscheint.

Dies öffnet den Code-Editor, der bereit ist für einige Änderungen.

Bonus: Social-Media-Icons zu WordPress-Menüs hinzufügen

Neben Menüsymbolen können Sie auch Social-Media-Symbole zu Ihrem WordPress-Navigationsmenü hinzufügen. Dies hilft, Ihre Social-Media-Profile auf visuell ansprechende Weise zu bewerben, ohne zu viel Platz auf Ihrer Website einzunehmen.

Dazu können Sie das Plugin Menu Image verwenden. Nach der Aktivierung besuchen Sie einfach die Seite Darstellung » Menüs im WordPress-Dashboard und erweitern Sie den Tab „Benutzerdefinierte Links“ in der linken Spalte.

Fügen Sie dann die URL für Ihre Social-Media-ID hinzu und geben Sie den Namen der Plattform ein. Klicken Sie anschließend auf die Schaltfläche „Zum Menü hinzufügen“.

Sobald das Social-Media-Profil als Menüpunkt hinzugefügt wurde, wird es auf der rechten Seite des Bildschirms angezeigt.

Hier müssen Sie erneut den Reiter „Elemente“ erweitern und auf die Schaltfläche „Menübild“ klicken.

Dies öffnet eine neue Eingabeaufforderung auf dem Bildschirm, auf der Sie auf den Link „Bild festlegen“ klicken können, um ein Social-Media-Symbol aus Ihrer Mediathek hochzuladen.

Wenn Sie ein vorgefertigtes Symbol hinzufügen möchten, können Sie die Option 'Symbol' auswählen und Ihr Social-Media-Symbol von FontAwesome hinzufügen.

Klicken Sie abschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Sie haben nun erfolgreich ein Social-Media-Symbol zu Ihrem Navigationsmenü hinzugefügt. Weitere Informationen finden Sie in unserem Tutorial zum Hinzufügen von Social-Media-Symbolen zu WordPress-Menüs.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bildsymbole zu Ihrem WordPress-Navigationsmenü hinzufügen. Sie können auch unseren Leitfaden durchgehen, wie Sie bedingte Logik zu Menüs in WordPress hinzufügen und wie Sie ein Sticky Floating Navigationsmenü in WordPress erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.