View
1.138
Download
0
Category
Preview:
Citation preview
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!
Recommended