Die benutzerdefinierte Menüfunktion „nicht mehr so neu“ von WordPress 3.0+ ist nicht nur äußerst nützlich, sondern auch sehr leistungsfähig. Ich habe bereits einige Beiträge über das Bearbeiten und Anpassen des Menüs geschrieben (z. B. das Hervorheben aktueller Seitenlinks) und heute zeige ich Ihnen, wie Sie Ihren Themen spezielle Klassen hinzufügen können, damit Sie ganz einfach benutzerdefinierte Symbole neben Ihren Navigationslinks anzeigen können .
Hinzufügen eines Home-Symbols neben dem WordPress-Homepage-Link
Um besser zu erklären, wie man Symbole hinzufügt, werde ich Sie durch die Schritte zum Hinzufügen eines Home-Typ-Symbols neben Ihrem Homepage-Link führen.
Schritt 1: Laden Sie ein cooles Home-Icon herunter
Für diese Vorschau habe ich gerade ein einfaches Home-Symbol von Finicons.com heruntergeladen – Verknüpfung
Schritt 2: Aktivieren Sie Klassen in Ihrem WordPress-Menü
Standardmäßig zeigt das WordPress-Menü die „Klassen“-Attribute im Menü-Builder nicht an, also klicken Sie auf die „Bildschirmoptionen“ und stellen Sie sicher, dass es aktiviert ist.
Schritt 3: Stil zum Homepage-Link hinzufügen
Jetzt können Sie zu einem Homepage-Link navigieren oder einen erstellen und ihm eine neue Klasse hinzufügen. Ich habe eine Klasse namens „home-link-icon“ hinzugefügt.
Schritt 4: Fügen Sie CSS für das Home-Menü-Symbol hinzu
Jetzt müssen Sie nur noch das CSS zu Ihrem Stylesheet hinzufügen, um das Symbol für die gerade erstellte Klasse anzuzeigen. Hinweis: Stellen Sie sicher, dass Sie das in Schritt 1 heruntergeladene Symbol zum Bilderordner Ihres Designs hinzufügen.
Beispiel-CSS
.home-link-icon a{ padding-left: 30px !important; background-image: url(images/home.png); background-position: left; background-repeat: no-repeat; }
Beispielbild
Unten sehen Sie mein CSS in Aktion in einem Thema, an dem ich derzeit arbeite, um es kostenlos in meinem Abschnitt „Kostenlose WordPress-Themen“ zu veröffentlichen. Es ist nicht wirklich perfekt positioniert und das Symbol passt nicht, aber für dieses Tutorial können Sie sehen, wie es funktionieren soll.