1. WP Meetup Hamburg
Torsten Landsiedel
Social Menus

2. Social-Media-Icons, die auch bei einem
Theme-Wechsel erhalten bleiben
Warum?

3. Justin Tadlock:
http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2
Wer hat’s erfunden?

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 ...

5. <?php if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => 'menu-social',
'container_class' => 'menu',
'menu_id' => 'menu-social-items',
'menu_class' => 'menu-items',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
)
);
} ?>
Menü 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?

8. <?php if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => 'menu-social',
'container_class' => 'menu',
'menu_id' => 'menu-social-items',
'menu_class' => 'menu-items',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
)
);
} ?>
Menü einbauen

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/

10. Menü befüllen und Voilá!

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.

12. Bonus-Features
Mögliche Icon-Fonts:
● Zocial
http://zocial.smcllns.com/
● Font Awesome
http://fortawesome.github.io/Font-Awesome/
● Genericons
http://genericons.com/
● Oder ein eigens gebauter Font mit Fontello / Icomoon
http://fontello.com/ – https://icomoon.io/

13. Danke für eure Aufmerksamkeit
Jetzt kommen eure Fragen!