Webworking Wordpress

Social-Media-Liste mit Awesome ohne Inline-Elemente

Baut man an einem Theme, kommt es vor, daß man auch eine Social-Media-Liste einbauen will. Viele WordPress-Themes nutzen dabei die normale Menü-Funktion, bei der man externe Links eingeben kann. Anhand der URL in dem href-Attribut wird mittels CSS die Optik gestaltet.

Wie mach ich dies nun mit Awesome und SASS, aber ohne dass ich mein HTML-Code durch <i> oder <span>-Anweisungen vollstopfe?

Bei Font Awesome werden Social-Media-Icons jedoch meist durch eine HTML-Anweisung wie die folgende gekennzeichnet:

Die ergibt dann folgende Optik:

Das Icon der Social Media Plattform ergibt sich also nicht aus der URL, sondern durch die Klassenattribute:

(Zur Erläuterung der einzelnen Klassen, siehe die Awesome Dokumentation).

Das Problem ist allerdings nun, dass ich bei einer Nutzung des normalen Menüs diese Klassen und das zugehörige HTML gar nicht eingeben (lassen) will. Für einen normalen Autor einer Seite ist das -so einfach es auch für Entwickler ist- dann doch zu komplex und zu fehleranfällig.

Die Frage ist also: Wie sorge ich dafür, dass dieselbe Optik bei einem einfachen HTML wie dem folgenden erzeugt wird:

Da ich das Rad nicht neu erfinden will, nutze ich die SASS-Sourcen für Awesome. Auch in meinen Themes nutze ich SASS. Awesome ist darin dann integriert, so dass ich bequem alle Awesome-Klassen und Mixins nutzen kann.

Meine SASS-Anweisungen sehen wie folgt aus:

Zuerst definiere ich eine Klasse „my-socialmedia“ mit der ich die jeweilige Liste als Social-Media-Liste kennzeichne. Dies ermöglicht es mir, alle folgenden HTML Anweisungen und Klassen dieser Gruppe unterzuordnen.

Bei der Erstellung des Menüs in einem WordPress-Theme muss ich also nur noch diese eine Klasse drumherum setzen und kann dann die WordPress-Funktion wp_nav_menu() nutzen um das Menü auszugeben. Hooks, welche die einzelnen Items des Menüs durchsuchen um dort Klassen einzufügen, brauch ich nicht mehr.

Das Ergebnis sieht dann so aus:

Also schon fast das was ich will. Und noch mehr: Ich konnte bei dem fehlenden Icon für Flattr, welches im obigen Beispiel leer blieb, einen ähnlichen Ersatz einfügen.

Will ich nun noch dass nur die Icons in einer Reihe angezeigt werden, verwende ich die Klassen „hidecontent“ und „inline“, welche ich noch in der <ul> einfüge. Mein HTML sieht dann so aus:

 

Und das Ergebnis ist eine schöne Iconliste:

That’s it.

 

0 Kommentare zu “Social-Media-Liste mit Awesome ohne Inline-Elemente

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.