WP Meetup HamburgTorsten Landsiedel

Social Menus

Social-Media-Icons, die auch bei einem Theme-Wechsel erhalten bleiben

Warum?

Justin Tadlock:

http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2

Wer hat’s erfunden?

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

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

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

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?

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

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/

Menü befüllen und Voilá!

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.

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 / Icomoonhttp://fontello.com/ – https://icomoon.io/

Danke für eure Aufmerksamkeit

Jetzt kommen eure Fragen!