Zurück zur Startseite

18. Feb 2015

WordPress: individueller Slider im Header, so gehts!

wp_individueller-header-slider01Als alter TYPO3ler stecke ich in WordPress nicht so tief drin. Dennoch muss ich da hin und wieder auch ran. Ich war auf der Suche nach einer Lösung die einen Slider im Header (header.php) von WordPress einbindet und der individuell für jede Seite pflegbar ist. Das war nicht leicht, denn fast alle Slider Plugins lassen sich entweder in den Content, z.B. über Shortcodes oder fest im Theme in den Header über einen PHP Codeschnipsel einbinden. Letzteres gilt dann aber für alle Seiten! Zudem können nicht alle Slider verschiedene Slides anlegen.

1. Den richtigen Slider finden

Hier bin ich auf das bekannte NextGENGallery Plugin gestoßen, welches der eierlegenden Wollmilchsau ziemlich nahe kommt. Das Anlegen von Slides mit verschiedenen Bildern war schnell erledigt (siehe 5.).

2. Wie kommt der Slider in den Header?

Hierzu bieten die Slider in ihrer Dokumentation die üblichen PHP Codeschnipsel an. Man kann aber auch über do_shortcode(‚[shortcode]‘) zum Erfolg kommen. Hier bietet NextGenGallery eine reichhaltige Konfiguration unter: http://www.nextgen-gallery.com/?s=shortcodes an. In meinem Fall wollte ich eine Slideshow im Format 1140 x 450px einbinden. Der Code hierfür lautet.

<?php
$shortcode1 = '[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_slideshow"  show_thumbnail_link="0" gallery_width="1140" gallery_height="450"]';
echo do_shortcode($shortcode1);
?>

Über das Attribut gallery_ids wird die ID der Galerie angegeben. Der so in meiner header.php eingegebene Code erzeugt nun einen Slider im Header meines Themes. So weit schon ganz gut, aber individuell für jede Seite ist er noch nicht.

3. Wie kann der Slider vom Redakteur individuell ausgewählt werden?

Einen Slider für jede Seite zu erzeugen schien ein größeres Problem zu sein. Auch davon, dass es der Redakteur selbst machen kann war schon gar keine Rede. Seitenweise las ich im Netz von verschiedenen header.php, page.php Seiten oder von If-Abfragen nach Seiten IDs in einer header.php. Das mag funktionieren, ist aber aufwendig, unflexibel und schon gar nicht pflegbar. Zufriedenstellend war das alles nicht wirklich, also habe ich meine Birne mal selbst angestrengt. Dabei kam mir meine große Erfahrung im Lösen von ähnlichen Aufgaben in TYPO3 zu Hilfe. Stichwort Benutzerdefinierte Felder!

Genau das ist es! Ich erstellte also ein benutzerdefiniertes Feld „HeaderSlider“ und als Wert wird die ID der gewünschten Galerie gesetzt. Der Redakteur kann die ID in der Gallerieliste des NexGENGallery Plugins finden und muss sie nur im Feld eintragen.

4. Die Lösung

Der erste Teil der Aufgabe ist gelöst, der Redakteur kann nun für jede Seite eine Slideshow erstellen und über das benutzerdefinierte Feld eintragen. Der zweite Teil ist nun die technische Umsetzung. Dies erfolgt wieder in der header.php und sieht so aus:

<?php 
 if(get_post_meta($post->ID, "HeaderSlider", true) !='' ){
  $shortcode1 = '[ngg_images gallery_ids="'.get_post_meta($post->ID,"HeaderSlider",true).'" display_type="photocrati-nextgen_basic_slideshow" show_thumbnail_link="0" gallery_width="1140" gallery_height="450"]';
  echo do_shortcode($shortcode1);
 }
 ?>

Der unter 2. genannte Code wird etwas modifiziert. An der Stelle wo die Gallerie ID steht wird nun das benutzerdefinierte Feld mit get_post_meta($post->ID,“HeaderSlider“,true) abgefragt und eingetragen. Mit do_shortcode wird die Ausgabe gemacht und der Ordnung halber noch in eine If Abfrage gepackt, um sicher zu stellen, dass nur dann eine Ausgabe erfolgt, wenn das Feld nicht leer ist.

5. Der Ablauf

Der Redakteur erstellt nun seine Galerien im NextGENGallery Plugin und merkt sich die ID der Galerie die er einbinden will. In seiner neuen Seite wählt er das benutzerdefinierte Feld „HeaderSlider“ und setzt als Wert die ID der Galerie.
Einfach und benutzerfreundlich!

Gallerien mit IDs in NextGEN Gallery anlegen

Gallerien mit IDs in NextGEN Gallery anlegen

Benutzerdefinertes Feld HeaderSlider, für Slider mit Gallerie ID =1

Benutzerdefinertes Feld HeaderSlider, für Slider mit Gallerie ID =1

6. Was geht noch?

Das Thema individuelles Headerbild ist mit dieser Lösung auch gleich erschlagen. Für ein einzelnes Headerbild legt man eine Galerie mit nur einem Bild an und bindet sie über ein weiteres benutzerdefiniertes Feld „HeaderImage“ ein. NextGENGallery bietet auch die Darstellung als einfaches Bild an. Dazu ist eine weiterer Shortcode notwendig, der in Abhängigkeit vom gewählten benutzerdefinierten Feld eingeblendet wird.

<?php
if(get_post_meta($post->ID, "HeaderSlider", true) !='' ){
  $shortcode1 = '[ngg_images gallery_ids="'.get_post_meta($post->ID,"HeaderSlider",true).'" display_type="photocrati-nextgen_basic_slideshow" show_thumbnail_link="0" gallery_width="1140" gallery_height="450"]';
  echo do_shortcode($shortcode1);
}
if(get_post_meta($post->ID, "HeaderImage", true) !='' ){
  $shortcode1 = '[ngg_images gallery_ids="'.get_post_meta($post->ID,"HeaderImage",true).'" display_type="photocrati-nextgen_basic_singlepic" show_thumbnail_link="0" gallery_width="1140" gallery_height="450"]';
  echo do_shortcode($shortcode1);
}
?>

 

Benutzerdefinertes Feld HeaderImage, für Einzelbild mit Gallerie ID =2

Benutzerdefinertes Feld HeaderImage, für Einzelbild mit Gallerie ID =2

Autor: Andreas Kempf, Mittwoch, 18.02.2015 Allgemein Wordpress

9 Comments  Kontakt

9 Comments to WordPress: individueller Slider im Header, so gehts!

Dominik Suder
8. Juni 2015

Danke für den Beitrag. Für mich sehr Hilfreich.

Dieter Reich
4. Dezember 2015

Hallo Andreas,
es klappt alles wunderbar. Ich probiere zur Zeit mit dem WordPress-Theme: Cach Box.
Habe xampp installier und arbeite erst einmal mit dem lokalen Server. Header Content habe ich in der style css etwas angepasst, weil sonst zwischen Kopf und Navi-Menu zu viel Platz gewesen wäre. Die Idee von dir war also ideal.

Andre
10. März 2016

Hallo Andreas,
ich erstelle gerade mit wordpress (twentytwelve) eine neue Homepage.
Wo oder an welche Stelle schreibe ich den Code wie von Dir beschrieben in die vorhandene Header.php?

Vielen Dank.

Andreas Kempf
14. März 2016

Hallo Andre,
Ich habe den Code in einen DIV Layer an das Ende der header.php nach der Navigation gepackt.

Der Header wird in der index.php, page.php, single.php usw. wie gewohnt per < ?php get_header(); ?>
eingebunden
LG Andreas

Martin
16. Juni 2016

Hallo,

danke für die schöne Anleitung. Nur habe ich ein Problem, zudem mir noch jegliche Lösung fehlt.

Meine Menüleiste im CSS (unter welcher der Slider platziert werden soll) hat es nach unten verschoben. Die Oberkante der Menüleiste ist bündig mit der Oberkante des Slider-Bildes. Weil diese Menüleiste so angelegt ist, dass sie beim Scrollen der Seite stehen bleibt, scrollt das Bild hinter vder Menüleiste nach oben.

Wenn ich das Codefragment aus der header.php wieder entferne, sitzt die Menüleiste wieder korrekt am oberen Bildschirmrand. An den CSS-Einstellungen habe ich nichts geändert, das muss mit dem Quelcode in der header.php zusammenhängen.

Woran könnte das liegen?

Danke und Gruß
Martin

Martin
16. Juni 2016

Bin ein WENIG schlauer. Die Menüleiste im header verschiebt sich in Abhängigkeit zu dem platzierten Code-Element:

Wenn ich diesen Code in den Bereich … packe, bleiben Menüleister UND Slider beim Scrollen stehen, d.h. der Rest der Seite läuft „hinter“ den beiden Elementen durch.

Gehe davon aus, dass es bei meinem Theme nicht egal ist, an welcher Stelle in der header.php der Code steht.
Nur habe ich keine Idee, wo genau er hin muss.

Gruß
Martin

Andreas Kempf
16. Juni 2016

Hallo Martin,
ich denke dies liegt weniger daran wo der Code in der header.php steht, sondern vielmehr daran was der Code in der Ausgabe erzeugt.
Der Shortcode bindet ja das NextGen Gallery Plugin ein. In der Ausgabe wird daraus ein DIV mit der Galerie als Inhalt.

Die Problematik mit deiner Navigation besteht möglicherweise darin das dein DIV mit der Navigation und der DIV mit der Gallerie auf einer Ebene liegen.
Wenn dein DIV mit der Navi oben drüber fest stehen soll, müsstest Du mit CSS: position und z-index arbeiten.
Der Galerie-DIV kann über die CSS-Klassen: ngg-galleryoverview ngg-slideshow beinflusst werden.

Schau dir mal den Quelltext folgender Seite an. Da wird die Galerie eingebunden:
http://www.weku-team.de/

LG Andreas

Niels
12. Juni 2017

Hallo,

vielen Dank für diesen Artikel! Ich habe ewig nach einer Lösung gesucht (bin WordPress neu-Einsteiger).
Gibt es eine Möglichkeit den Bildtitel bei der Slideshow im Header mit anzeigen zu lassen?
So wüssten Besucher gleich, von wo/ von wem das Bild ist.

Herzliche Grüße!
Niels

Simone Schmidt
21. August 2017

Hallo Martin,
ich habe Deine Anleitung gefunden und es hat alles super geklappt, vielen Dank. Nur habe ich nun ein Problem und finde keine Lösung. Das Customizer- Bild samt div passt sich beim Verkleinern (z.B. fürs smartphone) an. Der Slider selbst wird zwar auch kleiner, aber der Abstand zum darunterliegenden Text bleibt gleich, so dass beim smartphone eine große Lücke zwischen dem slider und dem darunter folgendem Text entsteht. Ich habe den slider schon in ein div mit gleicher Klasse gepackt, aber das funktioniert nicht. Ich weiß einfach nicht weiter. Hast Du vielleicht eine Idee?
Freundliche Grüße
Simone

Schreib einen Kommentar

*


Dieser BLOG

Neben den Aspekten der Website Erstellung mit TYPO3 oder Wordpress vom Webdesign bis zur Extensionentwicklung, behandelt dieser BLOG auch das Thema Vermarktung im Internet. Zum Online Marketing gehören u.a. Lokale Suchmaschinenoptimierung, OnPage SEO, Online PR, Content Marketing, Newslettermarketing, Social Media, Webanalyse und vieles mehr.
Viel Spaß und neue Erkenntnisse wünscht
Andreas Kempf, Web-aktiv

web-aktiv.com  |  Kontakt   |  Impressum Datenschutz

Supporting Member of the TYPO3 Association

Werbung

XOVI