Nach einem erneuten Designwechsel und hoffentlich letzten wusste ich nicht so recht wo ich mit den Social Media Icons hin sollte. Da mir die Plugins und üblichen Widgets einfach zu langweilig sind, begab ich mich auf der Suche nach einer Alternative zum WordPress Navigationsmenü und wurde fündig.
Ich war seit einiger Zeit schon am überlegen die Icons ins WordPress Navigationsmenü zu packen, aber wusste nicht, wie ich das hin bekomme. Nach dem Ich mich dann vor einigen Tagen auf die Suche gemacht habe, konnte ich bei Youtube ein nettes Tutorial finden, wie ich die Menütexte durch Grafiken ersetzen kann. Das ganze ist mit ein wenig Arbeit an der style.css-Datei verbunden und einem kleinen Trick bei den Menüs. Ich werde das ganze am Beispiel des neuen Home-Icons bei mir erklären.Voraussetzung für das ganze sollte die aktuelle WordPress Version sein!
Schritt 1 zum WordPress Navigationsmenü:
Wir loggen uns in das Dashboard ein und gehen über den Punkt Design zu den Menüs. Jetzt gucken wir oben rechts und müssten die 2 Punkte Optionen und Hilfe sehen. Nun klicken wir auf Optionen und machen bei Erweiterte Menüeigenschaften anzeigen einen Haken bei CSS-Klassen rein. Dies ist der wichtigste Teil damit wir das ganze über die CSS bearbeiten können.
Schritt 2:
Wir bleiben im Menü und erstellen einen neuen Link. Bei mir wäre das https://paid4-world.de und als Titel nehmen wir jetzt einfach mal home und fügen das ganze anschließend zum Menü hinzu.
Schritt 3
Bei den Menüs finden wir jetzt den Punkt Home und klicken bei benutzerdefiniert auf den Pfeil nach unten um die Menüelemente zu bearbeiten. Jetzt geht ein Untermenü auf und man sieht die Url, den angezeigten Namen und da druntersteht der Punkt CSS-Klassen(optional), dort geben wir jetzt menu-home ein. An dieser Stelle sollte man das Menü unbedingt abspeichern sonst klappt das ganze am Ende nicht.
Schritt 4
Dies ist der letzte und entscheidende Schritt. Wir gehen über Design zum Editor und öffnen die Stylesheet dort. Ganz unten fügen wir nun folgenden Code ein:
.menu-home {text-indent: -9999px; background-image: url(euer Link zur Grafik!) !important; background-repeat: no-repeat !important
}
Die Grafiken kann man von Iconfinder.com beziehen, wo ich auch meine her habe. Gegebenenfalls müsst ihr noch den Abstand nach links, rechts, oben oder unten anpassen, was ich bei mir machen musste. Bei mir war die Grafik zu weit oben also hab ich durch margin-top den Abstand nach oben hergestellt. Ihr solltet die Grafiken bereits vorher auch in der richtigen Größe wählen, damit euer Topmenü nicht gesprengt wird.
Den Code könnt ihr für sämtliche Menüpunkte nehmen und müsst dann nur immer den vorderen Teil ändern zum Beispiel: .menu-twitter oder .menu-facebook. Natürlich müsst ihr dann auch bei den Menüpunkten die CSS-Klassen eintragen und immer menu davor setzen und dann den Namen.
Ich hoffe ich konnte das ganze vernünftig formulieren und der ein oder andere wird diese Anleitung erfolgreich nutzen.
