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:
<ul class="fa-ul"> <li><a href="http://www.facebook.com/blafasel"><i class="fa fa-facebook fa-fw"></i>Facebook</a></li> <li><a href="https://twitter.com/blafasel"><i class="fa fa-twitter fa-fw"></i>Twitter</a></li> <li><a href="https://plus.google.com/u/0/107862983960150496076/posts"><i class="fa fa-google-plus fa-fw"></i>Google Plus</a></li> <li><a href="https://flattr.com/profile/blafasel"><i class="fa fa-flattr fa-fw"></i>Flattr</a></li> <li><a href="https://www.youtube.com/user/blafasel"><i class="fa fa-youtube fa-fw"></i>YouTube</a></li> <li><a href="https://www.xing.com/net/blafasel"><i class="fa fa-xing fa-fw"></i>Xing</a></li> <li><a href="https://www.blafasel.de/feed/"><i class="fa fa-rss fa-fw"></i>RSS</a></li> <li><a href="https://www.flickr.com/photos/blafasel"><i class="fa fa-flickr fa-fw"></i>Flickr</a></li> </ul>
Die ergibt dann folgende Optik:
Das Icon der Social Media Plattform ergibt sich also nicht aus der URL, sondern durch die Klassenattribute:
<i class="fa fa-facebook fa-fw"></i>
(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:
<nav class="my-socialmedia" aria-label="Social Media Plattformen"> <ul> <li><a href="https://www.facebook.com/blafasel">Facebook</a></li> <li><a href="https://twitter.com/blafasel">Twitter</a></li> <li><a href="https://plus.google.com/u/0/107862983960150496076/posts">Google Plus</a></li> <li><a href="https://flattr.com/profile/blafasel">Flattr</a></li> <li><a href="https://www.youtube.com/user/blafasel">YouTube</a></li> <li><a href="https://www.xing.com/net/blafasel">Xing</a></li> <li><a href="https://www.blafasel.de/feed/">RSS Feed</a></li> <li><a href="https://www.flickr.com/photos/blafasel">Flickr</a></li> <li><a href="mailto:bla@fasel.de">Mail</a></li> </ul> </nav>
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:
.my-socialmedia {
ul {
@extend .fa-ul;
&.inline li {
display: inline-block;
border: 1px solid #fff;
border-radius: 50%;
:hover {
background: #000;
color: white;
border: 1px solid #000;
border-radius: 50%;
}
}
&.hidecontent li {
a {
overflow: hidden;
display: inline-block;
width: 1.4em;
height: 1.4em;
text-align: center;
vertical-align: middle;
}
}
li {
a {
@extend .fa-star;
&::before {
@extend .fa;
width: 1.4em;
height: 1.4em;
text-align: center;
vertical-align: middle;
}
&[href*="delicious.com"] {
@extend .fa-delicious;
}
&[href*="facebook.com"] {
@extend .fa-facebook;
}
&[href*="feed"] {
@extend .fa-rss;
}
&[href*="flattr.com"] {
@extend .fa-refresh;
}
&[href*="flickr.com"] {
@extend .fa-flickr;
}
&[href*="google.com"] {
@extend .fa-google;
}
&[href*="plus.google.com"] {
@extend .fa-google-plus;
}
&[href*="github.com"] {
@extend .fa-github;
}
&[href*="instagram.com"] {
@extend .fa-instagram;
}
&[href*="linkedin.com"] {
@extend .fa-linkedin;
}
&[href^="mailto"] {
@extend .fa-envelope-o;
}
&[href*="pinterest.com"] {
@extend .fa-pinterest;
}
&[href*="slack.com"] {
@extend .fa-slack;
}
&[href*="reddit.com"] {
@extend .fa-reddit;
}
&[href*="slideshare.com"] {
@extend .fa-slideshare;
}
&[href*="snapchat.com"] {
@extend .fa-snapchat;
}
&[href*="skype.com"],
&[href*="skype:"] {
@extend .fa-skype;
}
&[href*="spotify.com"] {
@extend .fa-spotify;
}
&[href*="stumbleupon.com"] {
@extend .fa-stumbleupon;
}
&[href*="tumblr.com"] {
@extend .fa-tumblr;
}
&[href*="twitter.com"] {
@extend .fa-twitter;
}
&[href*="vimeo.com"] {
@extend .fa-vimeo;
}
&[href*="whatsapp.com"] {
@extend .fa-whatsapp;
}
&[href*="wordpress.org"],
&[href*="wordpress.com"] {
@extend .fa-wordpress;
}
&[href*="xing.com"] {
@extend .fa-xing;
}
&[href*="youtube.com"] {
@extend .fa-youtube;
}
}
}
}
}
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:
<nav class="my-socialmedia" aria-label="Social Media"> <ul class="hidecontent inline"> <li><a href="https://www.facebook.com/blafasel">Facebook</a></li> <li><a href="https://twitter.com/blafasel">Twitter</a></li> <li><a href="https://plus.google.com/u/0/107862983960150496076/posts">Google Plus</a></li> <li><a href="https://flattr.com/profile/blafasel">Flattr</a></li> <li><a href="https://www.youtube.com/user/blafasel">YouTube</a></li> <li><a href="https://www.xing.com/net/blafasel">Xing</a></li> <li><a href="https://www.blafasel.de/feed/">RSS Feed</a></li> <li><a href="https://www.flickr.com/photos/blafasel">Flickr</a></li> <li><a href="mailto:bla@fasel.de">Mail</a></li> </ul> </nav>
Und das Ergebnis ist eine schöne Iconliste:
That’s it.