So fügen Sie mit cPanel Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Wenn Sie Symbole in einem Navigationsmenü gesehen haben, fragen Sie sich möglicherweise auch, ob Sie diese auf Ihrer WordPress-Website verwenden möchten. Das Problem tritt jedoch auf, wenn Sie Programmierkenntnisse benötigen.

Wenn Sie ein Neuling sind, können Sie ein Plugin installieren und aktivieren, um eines der Symbole aus der Font Awesome-Bibliothek zu verwenden. Wenn Sie sich jedoch ein wenig mit CSS auskennen, können Sie im Handumdrehen Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzufügen.

Es stellt sich die Frage, ob Sie cPanel-Zugriff benötigen oder nicht. Nun, in diesem Tutorial müssen Sie benutzerdefiniertes CSS hinzufügen. Sie können entweder den Standard-CSS-Editor aus Ihrem Admin-Bereich oder den zusätzlichen CSS-Bereich im Customizer verwenden.

Obwohl die meisten WordPress-Experten den Theme-Editor aus Sicherheitsgründen verbergen, können Sie bei Bedarf den integrierten Customizer verwenden.

In diesem Tutorial stelle ich Ihnen einen Beispielcode zur Verfügung, damit Sie das Konzept verstehen. Das Hinzufügen von CSS liegt bei Ihnen.

Das liegt daran, dass jede Person eine andere Methode zum Hinzufügen von benutzerdefiniertem CSS hat.

Laden Sie Symbolbilder in Ihre Medienbibliothek hoch

Zunächst müssen Sie Symbolbilder auf Ihren Computer herunterladen. Laden Sie diese Bilder in Ihre WordPress-Medienbibliothek hoch.

Wenn Sie Symbole anstelle von Bildern verwenden möchten, müssen Sie eine Symbolbibliothek eines Drittanbieters integrieren, was die HTTP-Anfragen erhöht. Daher biete ich Ihnen eine einfache Lösung an, die sich nicht auf die Seitenladezeit einer Website auswirkt.

Befolgen Sie nun die Schritte.

Schritt 1:

Gehen Sie in Ihrem wp-Admin-Bereich zu „Darstellung“ > „Menüs“  , wo Sie das aktuelle Menü sehen können.

So fügen Sie Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Schritt 2:

Wenn Sie nun in der oberen rechten Ecke genau hinsehen, finden Sie einen Link „Bildschirmoptionen“ .

Sie können ein Mega-Dropdown-Menü sehen.

So fügen Sie Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Unter der Überschrift „Erweiterte Menüeigenschaften anzeigen“  sehen Sie ein Kontrollkästchen zum Überprüfen auf CSS-Klassen . Aktivieren Sie es.

Schritt 3:

Scrollen Sie nun nach unten und öffnen Sie einen beliebigen Menüpunkt. Sagen wir „Zuhause“.

So fügen Sie Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Unter CSS-Klassen (optional) sehen Sie ein Feld zum Ausfüllen .  Fügen wir „ menuicons “ als CSS-Klasse hinzu. Klicken Sie auf die Schaltfläche Menü speichern  .

Schritt 4:

Um ein Symbolbild anzuzeigen, benötigen Sie etwas CSS. Lassen Sie mich Ihnen ein Beispiel zeigen.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.menuicons {
Hintergrundbild: URL ( ‘http://www.yoursite.com/wp-content/uploads/2018/06/home.png’ ) ;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: links;
Polsterung links: 5px;
}
.menuicons {
background-image: url(‘http://www.yoursite.com/wp-content/uploads/2018/06/home.png’);
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
.menuicons {
background-image: url('http://www.yoursite.com/wp-content/uploads/2018/06/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Hinweis:  Vergessen Sie nicht, die Bild-URL durch die Adresse zu ersetzen, die Sie aus Ihrer Medienbibliothek auswählen.

Lassen Sie mich Ihnen zeigen, wo Sie es kopieren können. Gehen Sie zu Ihrer Medienbibliothek, klicken Sie auf das Symbolbild, das Sie anzeigen möchten, und kopieren Sie die Adresse, die Sie vor der URL sehen.

So fügen Sie Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Hier habe ich Ihnen gezeigt, wie Sie ein Bildsymbol nur für einen Menüpunkt hinzufügen. Für jeden Menüpunkt müssen Sie eine andere Klasse und einen neuen CSS-Code mit der URL des jeweiligen Bildsymbols auswählen.

Hier ist eine Demo des Bildsymbols, das ich gerade für das Home-Symbol hinzugefügt habe.

So fügen Sie Bildsymbole zu Ihren WordPress-Navigationsmenüelementen hinzu

Wie ich bereits erwähnt habe, gibt es verschiedene Möglichkeiten, benutzerdefiniertes CSS hinzuzufügen. Wenn Sie CSS nicht von einer anderen Quelle als Ihrer Haupt-CSS-Datei laden möchten, können Sie es mit FTP oder cPanel bearbeiten.

Gehen Sie zu  Dateimanager >> wp-content >> themes >> Theme-Ordner >> style.css,  klicken Sie mit der rechten Maustaste und wählen Sie Bearbeiten.

Fast jedes WordPress-Hosting  bietet cPanel-Zugriff.

Fügen Sie Bildsymbole zu WordPress-Navigationsmenüelementen hinzu

Für viele WordPress-Benutzer kann die Änderung des Layouts der vorhandenen Website beängstigend sein, da sie möglicherweise nicht über CSS-Kenntnisse verfügen.

Aber wie Sie sehen, benötigen Sie lediglich grundlegende CSS-Kenntnisse, um ein Bildsymbol als Hintergrundbild festzulegen und seine Position anzupassen.

Abschluss

Wenn Sie immer noch der Meinung sind, dass der Umgang mit CSS schwierig sein kann, sollten Sie ein Plugin verwenden. Obwohl es nicht schwierig ist, die oben aufgeführten Schritte zu befolgen.

Ich hoffe, Sie können Bildsymbole zu WordPress-Navigationsmenüelementen hinzufügen.

Schauen Sie sich diese Top 3 WordPress-Hosting-Dienste an:

A2-Hosting
4.7

1.886 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie A2 Hosting

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4,0
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4,0
Hostinger
4.6

2.435 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie Hostinger

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.7
  • Unterstützung
    4.7
  • Merkmale
    4.8
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4.7
HostArmada
5,0

716 Benutzerbewertungen

2,49 $ /Monat
Startpreis

Besuchen Sie HostArmada

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4.5
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.5
  • Preisgestaltung
    4,0
  • Schauen Sie sich unsere Empfehlungen für das beste WordPress-Webhosting an .