4. Menü registrieren
In der functions.php oder per Plugin:
add_action( 'init', 'my_register_nav_menus' );
function my_register_nav_menus() {
register_nav_menu(
'social',
__( 'Social', 'example-textdomain' )
);
}
Und dann ins Theme einbauen ...
6. Zum Beispiel Genericons, Zocial oder Font Awesome (und noch viele andere mehr)
@font-face {
font-family: 'Genericons';
src: url('fonts/genericons/genericons-regular-webfont.eot');
src: url('fonts/genericons/genericons-regular-webfont.eot?#iefix')
format('embedded-opentype'), url('fonts/genericons/genericons-regular-
webfont.woff') format('woff'),
url('fonts/genericons/genericons-regular-webfont.ttf') format
('truetype'),
url('fonts/genericons/genericons-regular-webfont.svg#genericonsregular')
format('svg');
font-weight: normal;
font-style: normal;
}
Icon-Font laden
7. Font per CSS anwenden
Per Attribut-Selektor:
#menu-social li a[href*="twitter.com"]::before
{ content: 'f202'; color: #33ccff; }
#menu-social li a[href*="facebook.com"]::before
{ content: 'f203'; color: #3b5998; }
#menu-social li a[href*="plus.google.com"]::before
{ content: 'f206'; color: #dd4b39; }
…
Hier lässt sich natürlich auch ein Icon-Bild oder SVG nutzen
Und was ist mit dem Menütext?
9. Text nutzen aber ausblenden
Diese Klasse sollte sowieso in jedem Theme sein!
.screen-reader-text {
position: absolute;
top: -9999em;
left: -9999em;
}
Sollte sowieso in jedem Theme vorhanden sein!
https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/
11. Bonus-Features
Auf Optionen klicken:
Und die entsprechende Zusatzfunktion des Menüs aktivieren:
In neuen Fenster/Tab öffnen, rel-Attribut setzen, zusätzliche CSS-Klassen, etc.