So fügen Sie Bildsymbole mit Navigationsmenüs in WordPress hinzu

Möchten Sie Bildsymbole zu Ihren WordPress-Navigationsmenüs hinzufügen?

Bilder können Besuchern dabei helfen, die Navigation Ihrer Website auf einen Blick zu verstehen. Sie können sogar Symbole verwenden, um die wichtigsten Inhalte des Menüs hervorzuheben oder zum Handeln aufzurufen.

In diesem Artikel zeigen wir Ihnen, wie Sie 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 für die meisten Websites, sehen aber nicht immer interessant oder ansprechend aus.

Indem Sie Bildsymbole zum Navigationsmenü hinzufügen, 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 Besuchern erleichtern, den Inhalt zu durchsuchen 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önnen sogar ein Bildsymbol verwenden, um den wichtigsten Menüpunkt hervorzuheben, z. B. den Checkout-Link auf Ihrem Online-Marktplatz.

Indem Sie einen Call-to-Action in der Menüleiste hervorheben, können Sie oft mehr Anmeldungen, Verkäufe, Mitglieder und andere Conversions erzielen.

Lassen Sie uns sehen, wie Sie Bildsymbole zu Ihrem WordPress-Navigationsmenü hinzufügen können. Verwenden Sie einfach die nachstehenden Quicklinks, um direkt zu der Methode zu springen, die Sie verwenden möchten.

Methode 1: Hinzufügen von Bildsymbolen zu Navigationsmenüs mithilfe eines Plugins (schnell und einfach)

Der einfachste Weg, Bildsymbole zu Ihren WordPress-Menüs hinzuzufügen, ist die Verwendung des Menu Image-Plugins. Dieses Plugin enthält Dashicon-Symbole, die Sie mit nur wenigen Klicks hinzufügen können.

Wenn Sie Ihrer Website Font Awesome-Symbole hinzugefügt haben, können Sie diese mit diesem kostenlosen Plugin verwenden. Weitere Informationen zum Einrichten von Font Awesome finden Sie in unserer Anleitung zum einfachen Hinzufügen von Symbolschriften zu Ihrem WordPress-Theme.

Wenn Sie Ihre eigenen Symboldateien verwenden möchten, können Sie mit Menu Image auch ein Bild oder Symbol aus der WordPress-Medienbibliothek auswählen.

Als erstes müssen Sie das Menu Image Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

Dadurch gelangen Sie zu einem Bildschirm, auf dem Sie die Einstellungen des Plugins konfigurieren können. Zu Beginn sehen Sie alle verschiedenen Größen, die Sie für die Bildsymbole verwenden können.

Wenn Sie vorhaben, Symbole von Font Awesome oder Dashicons zu verwenden, passt Menu Image die Größe automatisch an. Wenn Sie jedoch Bilder aus der Medienbibliothek verwenden, müssen Sie die Größe manuell auswählen.

Das Plugin unterstützt die standardmäßigen WordPress-Bildgrößen wie Miniaturansicht, Bild und groß. Außerdem werden drei einzigartige Größen hinzugefügt, 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 vergrößern oder verkleinern, indem Sie verschiedene Zahlen für die Bildgröße des 1., 2. oder 3. Menüs eingeben.

Wenn Sie Symbole zu Ihrem Menü hinzufügen, sehen Sie standardmäßig ein Feld „Bild beim Schweben“. Auf diese Weise können Sie ein anderes Symbol anzeigen, wenn der Besucher mit der Maus über diesen Menüpunkt fährt.

Beachten Sie jedoch, dass diese Einstellung nur verfügbar ist, wenn Sie Ihre eigenen Bilder verwenden. Sie müssen sich keine Gedanken über die Funktion „Bild beim Hover“ machen, wenn Sie vorhaben, Dashicons oder Font Awesome-Symbole zu verwenden.

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

Wenn Sie verschiedene Hover-Effekte ausprobieren möchten, stellen Sie sicher, dass Sie „Bild auf Hover-Feld aktivieren“ aktivieren.

Klicken Sie anschließend auf „Änderungen speichern“, um Ihre Einstellungen zu speichern.

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

Wenn Sie ein anderes Menü bearbeiten möchten, öffnen Sie einfach das Dropdown-Menü „Menü zum Bearbeiten auswählen“ und wählen Sie ein Menü aus der Liste aus. Klicken Sie danach auf „Auswählen“.

Suchen Sie nun den ersten Menüpunkt, zu dem Sie ein Symbol hinzufügen möchten, und klicken Sie darauf. Wählen Sie dann einfach die neue Schaltfläche „Bild / Symbol hinzufügen“.

Sie können nun entscheiden, ob Sie ein eigenes Bild verwenden oder ein Symbol auswählen möchten.

Um ein vorgefertigtes Symbol zu verwenden, klicken Sie auf das Optionsfeld neben „Symbole“. Sie können dann klicken, um ein beliebiges Dashicon oder Font Awesome-Symbol auszuwählen.

Möchten Sie stattdessen Ihre eigenen Bilder verwenden?

Wählen Sie dann das Optionsfeld neben „Bild“ und klicken Sie auf den Link „Bild festlegen“.

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

Wenn Sie in den Einstellungen des Plugins „Bild bei Hover-Feld aktivieren“ aktiviert haben, müssen Sie auch auf „Bild bei Hover festlegen“ klicken.

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

Manchmal möchten Sie diese Einstellung möglicherweise ignorieren und das gleiche Symbol anzeigen, egal was passiert. Klicken Sie dazu auf „Set image on hover“ und wählen Sie dann genau das gleiche Bild aus.

Wenn Sie dies nicht tun, verschwindet das Symbol, 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. Wenn Sie für alle Symbole die gleiche Größe verwenden, sieht das Menü tendenziell übersichtlicher aus.

Sie können jedoch das wichtigste Symbol des Menüs vergrößern. Wenn Sie beispielsweise einen Online-Shop mit einem Plugin wie WooCommerce erstellt haben, können Sie ein größeres Symbol für „Zur Kasse“ verwenden, damit es auffällt.

Wenn Sie mit dem Symbol zufrieden sind, ist es an der Zeit, sich die Beschriftung des Menüpunkts anzusehen.

Standardmäßig zeigt das Plugin die Titelbezeichnung nach dem Symbol an.

Um dies zu ändern, wählen Sie eines der Optionsfelder im Abschnitt "Titelposition".

Eine andere Option besteht darin, das Navigationslabel vollständig zu entfernen und ein Nur-Symbol-Menü zu erstellen. Dadurch kann verhindert werden, dass ein Menü mit vielen Elementen überladen aussieht.

Sie sollten die Beschriftungen jedoch nur ausblenden, wenn die Bedeutung der einzelnen Symbole offensichtlich ist. Wenn es unklar ist, werden Besucher Schwierigkeiten haben, sich in Ihrem WordPress-Blog oder Ihrer Website zurechtzufinden.

Um fortzufahren und das Label auszublenden, aktivieren Sie das Optionsfeld 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, gehen Sie einfach wie oben beschrieben vor.

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

Sie können Ihren Navigationsmenüs auch Bildsymbole hinzufügen, indem Sie benutzerdefiniertes CSS verwenden. Dies gibt Ihnen mehr Flexibilität, um genau zu steuern, wo die Symbole in Ihren Menüs erscheinen.

Es erfordert jedoch, dass Sie benutzerdefinierten Code in WordPress hinzufügen, daher wird es für fortgeschrittenere oder fortgeschrittenere WordPress-Benutzer empfohlen.

Bevor Sie beginnen, laden Sie alle Ihre Bilddateien in die WordPress-Medienbibliothek hoch. Stellen Sie für jedes Bild sicher, dass Sie seine URL kopieren und in einen Texteditor wie Notepad einfügen. Sie müssen die Links in Ihrem Code verwenden, sodass Sie viel Zeit sparen können.

Um die URL eines Bildes zu finden, wählen Sie es einfach in der WordPress-Medienbibliothek aus und sehen Sie sich dann das Feld „Datei-URL“ an.

Ausführlichere Anweisungen finden Sie in unserer Anleitung zum Abrufen der URL von Bildern, die Sie in WordPress hochladen.

Gehen Sie danach zu Darstellung » Menüs .

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

Fahren Sie danach fort und klicken Sie auf „Auswählen“.

Als Nächstes müssen Sie benutzerdefinierte CSS-Klassen aktivieren, indem Sie auf „Bildschirmoptionen“ klicken.

Aktivieren Sie im angezeigten Steuerfeld das Kontrollkästchen neben "CSS-Klassen".

Danach können Sie jedem Element im Navigationsmenü benutzerdefinierte CSS-Klassen hinzufügen. So verknüpfen Sie jeden Menüpunkt mit einem Bild in der WordPress-Medienbibliothek.

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

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

Sie verwenden diese benutzerdefinierten CSS-Klassen im nächsten Schritt, also notieren Sie sie in Ihrem Editor oder einer ähnlichen App.

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

Hinweis: Jedes Symbol wird an seine eigene CSS-Klasse gebunden, also achten Sie darauf, die Menüpunkte unterschiedlich zu beschriften, wenn Sie separate Symbole verwenden möchten.

Jetzt können Sie mit CSS Bildsymbole zu Ihren WordPress-Navigationsmenüs hinzufügen.

Häufig werden Sie in WordPress-Tutorials aufgefordert, Code-Snippets zu Ihren WordPress-Designdateien hinzuzufügen. Dies kann jedoch häufige WordPress-Fehler verursachen und ist nicht sehr anfängerfreundlich.

Deshalb empfehlen wir WPCode.

WPCode ist das beliebteste Code-Snippets-Plugin, das von über 1 Million WordPress-Websites verwendet wird. Sie können benutzerdefinierten Code hinzufügen, ohne die Datei functions.php Ihres Themes zu bearbeiten.

Als erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets » Snippet hinzufügen .

Bewegen Sie hier einfach die Maus über „Hinzufügen Ihres benutzerdefinierten Codes“.

Wenn es angezeigt wird, klicken Sie auf "Snippet verwenden".

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

Öffnen Sie danach das Dropdown-Menü „Codetyp“ und wählen Sie „CSS-Snippet“.

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

Um Ihnen zu helfen, haben wir unten ein Beispiel-Snippet erstellt. Sie können fortfahren und „.carticon“ in die benutzerdefinierte CSS-Klasse ändern, die Sie im vorherigen Schritt erstellt haben. Außerdem müssen Sie die URL durch einen Link zum Bild in Ihrer WordPress-Medienbibliothek ersetzen:

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

Hinweis: Sie müssen den Punkt „.“ beibehalten. vor der CSS-Klasse im Code-Snippet. Das sagt WordPress, dass es sich um eine Klasse und nicht um eine andere Art von CSS-Selektor handelt.

Sie müssen das obige Snippet für jeden einzelnen Menüpunkt, den Sie oben erstellt haben, anpassen. Sie können sie einfach alle in das Feld „Codevorschau“ einfügen.

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

Sie möchten den benutzerdefinierten CSS-Code auf unserer gesamten WordPress-Website verwenden, klicken Sie also auf „Automatisch einfügen“, wenn es nicht bereits ausgewählt ist.

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

Danach können Sie zum oberen Rand des Bildschirms scrollen und auf den Schalter „Inaktiv“ klicken, sodass er sich in „Aktiv“ ändert.

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

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

Abhängig von Ihrem Thema müssen Sie möglicherweise das CSS anpassen, damit es die Bildsymbole genau an der richtigen Stelle anzeigt. Wenn dies der Fall ist, gehen Sie zu Code Snippets » Code Snippets im WordPress-Dashboard.

Bewegen Sie dann einfach den Mauszeiger über das Snippet und klicken Sie auf den Link „Bearbeiten“, wenn es angezeigt wird.

Dadurch wird der Code-Editor geöffnet, in dem Sie einige Änderungen vornehmen können.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Bildsymbole zu Ihrem WordPress-Navigationsmenü hinzufügen. Sie können auch unseren Leitfaden zu den besten Drag-and-Drop-WordPress-Seitenerstellern durchgehen und erfahren, wie Sie mit WordPress online Geld verdienen können.

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