SlideShare ist ein Scribd-Unternehmen logo
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_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 / Icomoon
http://fontello.com/ – https://icomoon.io/
Danke für eure Aufmerksamkeit
Jetzt kommen eure Fragen!

Weitere ähnliche Inhalte

Andere mochten auch

Manejo tomates seminis
Manejo tomates seminisManejo tomates seminis
Manejo tomates seminis
Ruralticnova
 
8 c gas
8 c gas8 c gas
Esenarios olimpicos
Esenarios olimpicosEsenarios olimpicos
Esenarios olimpicos
meli-ayala-triana
 
Tutorial
TutorialTutorial
Tutorial
Anny Giraldo
 
Desempeños
DesempeñosDesempeños
Desempeños
libiaproyectocidep
 
Revolución bolivariana
Revolución bolivarianaRevolución bolivariana
Revolución bolivariana
Integridad Política
 
Feminicidio
FeminicidioFeminicidio
Cuetionario herramientas web 2.0
Cuetionario herramientas web 2.0Cuetionario herramientas web 2.0
Cuetionario herramientas web 2.0
Alberto Eduardo Avila Hernandez
 
Marketing 1,2,3 phillip k
Marketing 1,2,3 phillip kMarketing 1,2,3 phillip k
Marketing 1,2,3 phillip k
Rosber Muñoz Quispe
 
SKECH-Produktkatalog
SKECH-Produktkatalog  SKECH-Produktkatalog
SKECH-Produktkatalog
phonekiste
 
Wahlmanifest
WahlmanifestWahlmanifest
Wahlmanifest
tasnim22
 
Das Wetter
Das WetterDas Wetter
Das Wetter
VerenaMA2006
 
Brenda y santiago xd
Brenda y santiago xdBrenda y santiago xd
Brenda y santiago xd
puroxd
 
Elfchen Freiheit Demokratie
Elfchen Freiheit DemokratieElfchen Freiheit Demokratie
Elfchen Freiheit Demokratiemxgiosi
 
MIS DISEÑOS
MIS DISEÑOSMIS DISEÑOS
MIS DISEÑOS
digicol0415
 

Andere mochten auch (20)

Manejo tomates seminis
Manejo tomates seminisManejo tomates seminis
Manejo tomates seminis
 
8 c gas
8 c gas8 c gas
8 c gas
 
Farben
Farben Farben
Farben
 
Wer wir sind.
Wer wir sind.Wer wir sind.
Wer wir sind.
 
Esenarios olimpicos
Esenarios olimpicosEsenarios olimpicos
Esenarios olimpicos
 
Tutorial
TutorialTutorial
Tutorial
 
Die ferien sind vorbei
Die ferien sind vorbeiDie ferien sind vorbei
Die ferien sind vorbei
 
Desempeños
DesempeñosDesempeños
Desempeños
 
Revolución bolivariana
Revolución bolivarianaRevolución bolivariana
Revolución bolivariana
 
Feminicidio
FeminicidioFeminicidio
Feminicidio
 
Cuetionario herramientas web 2.0
Cuetionario herramientas web 2.0Cuetionario herramientas web 2.0
Cuetionario herramientas web 2.0
 
Marketing 1,2,3 phillip k
Marketing 1,2,3 phillip kMarketing 1,2,3 phillip k
Marketing 1,2,3 phillip k
 
SKECH-Produktkatalog
SKECH-Produktkatalog  SKECH-Produktkatalog
SKECH-Produktkatalog
 
Wahlmanifest
WahlmanifestWahlmanifest
Wahlmanifest
 
Das Wetter
Das WetterDas Wetter
Das Wetter
 
Brenda y santiago xd
Brenda y santiago xdBrenda y santiago xd
Brenda y santiago xd
 
Elfchen Freiheit Demokratie
Elfchen Freiheit DemokratieElfchen Freiheit Demokratie
Elfchen Freiheit Demokratie
 
Deutschsprachige länder1
Deutschsprachige länder1Deutschsprachige länder1
Deutschsprachige länder1
 
Desfile zue
Desfile zueDesfile zue
Desfile zue
 
MIS DISEÑOS
MIS DISEÑOSMIS DISEÑOS
MIS DISEÑOS
 

Mehr von Torsten Landsiedel

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der Praxis
Torsten Landsiedel
 
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
Torsten Landsiedel
 
Oh, no! DSGVO.
Oh, no! DSGVO.Oh, no! DSGVO.
Oh, no! DSGVO.
Torsten Landsiedel
 
WordPress kaputt machen
WordPress kaputt machenWordPress kaputt machen
WordPress kaputt machen
Torsten Landsiedel
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
Torsten Landsiedel
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPress
Torsten Landsiedel
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
Torsten Landsiedel
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPress
Torsten Landsiedel
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
Torsten Landsiedel
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Torsten Landsiedel
 
Das Child-Theme-Dilemma
Das Child-Theme-DilemmaDas Child-Theme-Dilemma
Das Child-Theme-Dilemma
Torsten Landsiedel
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und Kür
Torsten Landsiedel
 
Mitmachen bei WordPress
Mitmachen bei WordPressMitmachen bei WordPress
Mitmachen bei WordPress
Torsten Landsiedel
 
MetaMeetup
MetaMeetupMetaMeetup
MetaMeetup
Torsten Landsiedel
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
Torsten Landsiedel
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
Torsten Landsiedel
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in Berlin
Torsten Landsiedel
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-Blogs
Torsten Landsiedel
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 

Mehr von Torsten Landsiedel (19)

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der Praxis
 
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
 
Oh, no! DSGVO.
Oh, no! DSGVO.Oh, no! DSGVO.
Oh, no! DSGVO.
 
WordPress kaputt machen
WordPress kaputt machenWordPress kaputt machen
WordPress kaputt machen
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPress
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPress
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
 
Das Child-Theme-Dilemma
Das Child-Theme-DilemmaDas Child-Theme-Dilemma
Das Child-Theme-Dilemma
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und Kür
 
Mitmachen bei WordPress
Mitmachen bei WordPressMitmachen bei WordPress
Mitmachen bei WordPress
 
MetaMeetup
MetaMeetupMetaMeetup
MetaMeetup
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in Berlin
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-Blogs
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 

Social Media Menüs in WordPress

  • 1. WP Meetup Hamburg Torsten Landsiedel Social Menus
  • 2. Social-Media-Icons, die auch bei einem Theme-Wechsel erhalten bleiben Warum?
  • 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/
  • 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!