WP Meetup Hamburg
Torsten 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_registe...
<?php if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container...
Zum Beispiel Genericons, Zocial oder Font Awesome (und noch viele andere mehr)
@font-face {
font-family: 'Genericons';
src...
Font per CSS anwenden
Per Attribut-Selektor:
#menu-social li a[href*="twitter.com"]::before
{ content: 'f202'; color: #33c...
<?php if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container...
Text nutzen aber ausblenden
Diese Klasse sollte sowieso in jedem Theme sein!
.screen-reader-text {
position: absolute;
top...
Menü befüllen und Voilá!
Bonus-Features
Auf Optionen klicken:
Und die entsprechende Zusatzfunktion des Menüs aktivieren:
In neuen Fenster/Tab öffne...
Bonus-Features
Mögliche Icon-Fonts:
● Zocial
http://zocial.smcllns.com/
● Font Awesome
http://fortawesome.github.io/Font-A...
Danke für eure Aufmerksamkeit
Jetzt kommen eure Fragen!
Nächste SlideShare
Wird geladen in …5
×

Social Media Menüs in WordPress

1.617 Aufrufe

Veröffentlicht am

Social Media Profile als Menüs in WordPress einbinden.
Idee von Justin Tadlock
Vortrag beim WordPress Meetup Hamburg im Februar 2015

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.617
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.082
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Social Media Menüs in WordPress

  1. 1. WP Meetup Hamburg Torsten Landsiedel Social Menus
  2. 2. Social-Media-Icons, die auch bei einem Theme-Wechsel erhalten bleiben Warum?
  3. 3. Justin Tadlock: http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2 Wer hat’s erfunden?
  4. 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. 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. 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. 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. 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. 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. 10. Menü befüllen und Voilá!
  11. 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. 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. 13. Danke für eure Aufmerksamkeit Jetzt kommen eure Fragen!

×