Social Icons als Menü im WordPress Theme umsetzen

Viele Theme Entwickler verwenden inzwischen WordPress Menüs für die Anzeige von Social Icons. Damit muss der Benutzer nur noch ein neues Menü erstellen, all seine sozialen Netzwerke als Links dem Menü hinzufügen, Menü-Position zuweisen, fertig.

Neben der schnellen Konfiguration bietet die Methode weitere Vorteile. Die Implementierung erfolgt mit sehr wenig Code und ohne einer langen Liste von Theme Optionen zur Eintragung der einzelnen Netzwerke. Und da immer mehr Themes auf diese Implementierung setzen, kann das erstellte Menü bei einem Theme Wechsel oft direkt wieder verwendet werden.

Implementierung eines Social Icon Menüs

Technisch gesehen werden die Menü-Links mit dem href-Attribut in CSS identifiziert und ihnen eine passende Icon Grafik zugewiesen. Während hier auch mit echten Grafiken gearbeitet werden kann, empfehle ich die Verwendung eines Icon Fonts wie beispielsweise Genericons. Zum ersten Mal gestoßen auf diese Vorgehensweise bin ich via Kovshenin, wobei die ursprüngliche Idee von Justin Tadlock stammt.

Dieses Tutorial zeigt eine vollständige Lösung für die Umsetzung eines Social Icons Menü und ist direkt aus einem meiner Themes entnommen.

1) Social Menü registrieren und Genericons Font einbinden

Als Erstes muss das Social Icon Menü im Theme registriert und der Genericons Font eingebunden werden. Beides kann durch entsprechende Funktionen in der functions.php geschehen, welche den entsprechenden Action Hooks übergeben werden.

Neue Menü Position registrieren

Die Registration einer neuen Menü-Position für die Social Icons wird in der Setup Funktion des Themes vorgenommen werden. Diese wird mit dem Hook after_setup_theme registriert.

Einbetten des Genericon Icon Fonts

Der Icon Font wird mit einer zweiten Funktion geladen, welche dem Action Hook wp_enqueue_scripts zugewiesen wird. Zur richtigen Funktionsweise muss der Genericon Icon Font im /css/ Verzeichnis des Themes abgelegt werden.

Beispiel-Code:

2) Social Icons Menü ausgeben

Anschließend kann das Social Icons Menü an einer geeigneten Stelle im Theme angezeigt werden, beispielsweise in der header.php.

Mit der Funktion has_nav_menu() kann überprüft werden, ob der Nutzer ein Social Icons Menü angelegt hat. Mit wp_nav_menu() wird das Menü angezeigt (siehe Codex für verfügbare Parameter).

Wichtig ist die Zuweisung des menu_class Parameters, wodurch wir das Menü mit .social-icons-menu im Stylesheet gezielt ansprechen können.

3) Styling des Menüs

Zum Schluss brauchen wir noch etwas CSS Code für das Styling des Menüs, welches in die style.css des Themes gehört. Am Anfang kümmern wir uns um das generelle Styling der Menüpunkte, und fügen anschließend die einzelnen Icons hinzu.

Fazit

Mit etwas Code haben wir damit ein funktionsfähiges Social Icons Menü erstellt.