Eine neue Webseite entsteht (Teil 11): Einen jQuery Bilder-Slider integrieren

Ein dezent eingesetzter Bilder-Slider ist ein sehr schönes Feature, besonders für eine Café- oder Restaurant-Webseite. Daher zeige ich in diesem Teil der CoffeeLove Tutorial-Serie, wie du das beliebte jQuery-Plugin »Nivo-Slider« verwendest, um einen Bilder-Slider auf der Startseite deines WordPress-Themes einzubauen.

Live-Demo und Theme-Dateien

Damit du dem Tutorial besser folgen kannst, habe ich eine Live-Demo des Themes inkl. Slider vorbereitet. Außerdem kannst du dir, die in diesem Tutorial bearbeiteten Theme-Dateien (header.php, template-home.php, functions.php, style.css) in einem ZIP-Ordner downloaden.

Webseiten Tutorial CoffeeLove Teil11
(Foto-Kredit der Bilder: Sugarbloom)

1. Den Nivo-Slider downloaden

Auf der Webseite von dev7studios kannst du dir den Nivo-Slider kostenlos herunterladen. Die Production-Version (7kb) ist dabei ausreichend. Im Download-Ordner findest du die nivo-slider.css Datei und die JavaScript-Datei jquery.nivo.slider.pack.js. Die JavaScript-Datei kopierst du dir jetzt in deinen Theme-Ordner (am besten in einen extra Ordner z.B. mit dem Namen js).

Webseiten Tutorial CoffeeLove Teil11
Der Nivo-Slider hat sehr schöne Animations-Effekte, die du ganz nach deinen Wünschen anpassen kannst.

2. Die JavaScript-Dateien aufrufen

Damit die Slider-Animation später in deinem Theme laufen kann, musst du die jQuery-Bibliothek, sowie die jquery.nivo.slider.pack.js Datei innerhalb deines head-Tags aufrufen. In WordPress ist es am besten, wenn du dafür die Funktion wp_enqueue_script nutzt. Infos zu wp_enqueue_script findest du auch im WordPress-Codex.

Eine ausführliche Beschreibung zum Thema »JavaScript in WordPress aufrufen« kannst du auch im Artikel »JavaScript-Bibliotheken in und aus WordPress nutzen« auf dem Blog von Frank Bültge nachlesen.

Mit der Funktion rufst du also deine JavaScript-Dateien nicht direkt in den head-Tag (header.php) auf, sondern lädst sie über deine functions.php Datei. Dazu öffnest du die functions.php Datei eines Themes und fügst folgenden Code ein:

// Calls jQuery from Google Library
if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
}

// Calls the Script for the Nivo Image Slider
add_action('wp_enqueue_scripts', 'my_scripts');
function my_scripts() {
    wp_enqueue_script('nivo', get_bloginfo('template_url').'/js/jquery.nivo.slider.pack.js', array('jquery'), '2.1', false);
}

Der erste Teil des Codes ruft jQuery über die Google Library API auf, und sagt WordPress, dass du (außer auf Admin-Seiten) nicht die von WordPress bereits zur Verfügung gestellte jQuery-Version nutzen möchtest. Weitere Infos zu diesem Code-Schnipsel findest du bei »Digging into WordPress«.

Im zweiten Code-Abschnitt wird eine Funktion genutzt, um das Script für den Nivo-Slider (also die Datei jquery.nivo.slider.pack.js) zu integrieren. Dabei verwende ich auch die Funktion get_bloginfo(‚template_url‘), mit der ich den Pfad zu meinem Theme-Ordner (also http://deinedomain.de/wp-content/themes/deinthemename/) aufrufen kann.

Wichtig: Achte beim Übertragen des Codes in dein eigenen Themes darauf, dass auch die Pfade zum Ordner, in der du die jquery.nivo.slider.pack.js einsortiert hast, übereinstimmen. Außerdem solltest du noch kontrollieren, ob in der header.php Datei eines Themes bereits der benötigte Code-Schnipsel

<?php wp_head(); ?>

innerhalb des head-Tags vorhanden ist.

3. HTML-Code einfügen

Im nächsten Schritt legst du jetzt den HTML-Code für deinen Bilder-Slider an. Zuvor solltest du alle Slider-Bilder auf die gleiche Größe zuschnitten, und in einem Ordner (z.B. in den Theme-Ordner images/image-slider) ablegt haben. Da der Bilder-Slider des CoffeeLove-Themes auf der Startseite sein soll, füge ich den HTML-Code in meine template-home.php Datei ein.

<div id="image-slider-wrap">
	<div id="image-slider">
		<img src="<?php bloginfo('template_url'); ?>/images/image-slider/slider-01.jpg" alt="Image01" />
		<img src="<?php bloginfo('template_url'); ?>/images/image-slider/slider-02.jpg" alt="Image02" />
		<img src="<?php bloginfo('template_url'); ?>/images/image-slider/slider-03.jpg" alt="Image03" />
		<img src="<?php bloginfo('template_url'); ?>/images/image-slider/slider-04.jpg" alt="Image04" />
		<img src="<?php bloginfo('template_url'); ?>/images/image-slider/slider-05.jpg" alt="Image05" />
	</div>
</div>
<!--end Image Slider-->

Um die URL zu den Bildern flexibel zu halten, nutze ich wieder die Funktion bloginfo (‚template_url‘).

4. JavaScript-Code für die Slider-Animation

Den noch fehlenden JavaScript- Code für deine Slider-Animation rufst du jetzt entweder in der header.php Datei eines Themes unterhalb von wp_head(); auf, oder in der footer.php direkt oberhalb von wp_footer();. Der Code lautet:

<script type="text/javascript">
jQuery(window).load(function() {
	$('#image-slider').nivoSlider();
});
</script>

Innerhalb dieses Codes kannst du die Animation deines Sliders jetzt noch durch etliche Optionen beeinflussen. Ich habe beim CoffeeLove-Slider z.B. den Effekt der Animation bestimmt, die Geschwindigkeit der Animation und der Pause zwischen den Animationen festgelegt und die Vor- und Zurück-Buttons deaktiviert. Der Code sieht dann so aus:

<script type="text/javascript">
jQuery(window).load(function() {
	$('#image-slider').nivoSlider({
		effect:'sliceDownRight', //bestimmt den Animations-Effekt: 'fold,fade,sliceDown,sliceUp,sliceDownLeft,sliceUpLeft,random...'
		animSpeed:500, //Geschwindigkeit der Animation
		pauseTime:4000, //Pause zwischen jeder Animation
		directionNav:false, //Next & Prev Buttons zeigen oder verbergen
	});
});
</script>

Eine Liste aller Optionen zur Anpassung des Sliders findest du auf der Nivo-Slider Webseite unter »Usage«.

5. Das CSS-Styling

Als letzten Schritt musst du jetzt noch den CSS-Code für deinen Slider anpassen. Im Download-Ordner des Nivo-Sliders findest du dafür die nivo-slider.css Datei. Ich habe den Code der Datei kopiert, und in mein Theme-Stylesheet style.css eingefügt. Auf diese Weise kann ich auf eine weitere CSS-Datei verzichten.

Standardmäßig sind bereits etliche Styles für den Slider vorbereitet (z.B. für Image-Links, den Vor- und Zurück Button etc.). Im CoffeeLove-Theme benötige ich viele der Styles nicht, diese habe ich daher gelöscht. Stattdessen habe ich ein Image für die Muffins als Navigation vorbereitet. Nach meiner Anpassung sehen die Styles für den CoffeeLove-Slider so aus:

/* --- Nivo Image Slider --- */
#image-slider-wrap {
	width:540px;
	height:300px;
	margin:0px 10px 0px 0px;
	float:right;
	background:url(images/bg-trans-brown.png) 0 0 repeat;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#image-slider {
	position:relative;
	width:520px;
	height:280px;
	margin:10px 0px 0px 10px;
}
#image-slider img {
	position:absolute;
	width:520px;
	height:280px;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Control nav styles */
.nivo-controlNav a {
	position:relative;
	width:22px;
	height:22px;
	display:block;
	margin:0px 5px 0px 0px;
	float:left;
	background:url(images/slider-navi.png) 0px -3px no-repeat;
	top: 305px;
	left:195px;
	z-index:99;
	text-indent:-9999px;
	cursor:pointer;
}
.nivo-controlNav a:hover {
	background:url(images/slider-navi.png) 0px -25px no-repeat;
}
.nivo-controlNav a.active {
	background:url(images/slider-navi.png) 0px -25px no-repeat;
}

Die Position der Slider-Elemente, wie z.B. der Navigation (Muffins), kannst du ganz leicht bestimmen, indem du den Positions-Wert auf absolut setzt, und deinen Image-Slider DIV auf relativ. So orientiert sich die Position der Navigation an dem des Image-Sliders. Die abgerundeten Ecken des Slider-Hintergrunds habe ich mit der CSS3-Eigenschaft »border-radius« erstellt. Im Internet Explorer verzichte ich dann einfach auf die abgerundeten Ecken, da der IE-Browser diese Funktion noch nicht unterstützt.

Hast du Fragen zu diesem Teil der Tutorial-Serie oder weitere Tipps und Anregungen, um ein jQuery Image-Slider in ein WordPress-Theme umzusetzen. Über dein Feedback und deine Tipps zum Tutorial freue ich mich sehr!

Weitere Teile der Tutorial-Serie

38 Kommentare

  1. Mjamm Mjamm… ich hätte so gern eins von den Cupcakes… aber ich glaube fast, um die geht es nicht ;-)

    Die Tutorial Serie ist einfach gut…

    Der Slider ist nicht schlecht für eine Handvoll ausgesuchte Bilder… Aber ich habe noch keinen Slider gefunden der z.B. die neuesten Artikel slidet mit Bild… zumindest keinen der leicht zu bedienen ist.
    Ich suche sowas für das Fotoblog meiner Schwester…
    Ist das im Footer bei euch ein Plugin?

    LG Daniela

    • Also ich kenn jetzt leider keinen einfachen Slider (habs scho selbst mal gesucht), aber wenn, dann würde ich einen einfachen nehmen (so wie den hier?) und einfach
      zigtausende Loops starten mit Querys (showpost=1, den zweiten dann offset=1&showpost=1), müsste eigentlich gehen. Ist halt umständlich :(

      • Hallo Daniela, Hallo Chrissy,

        ja, wir haben die neusten Artikel bei uns mit query_posts(’showposts=9′); gelöst, und diesen Loop (mit einer unordered list) dann in das Plugin dann ein ein jQuery Slider-Plugin eingefügt.
        Wir haben jCarousel eingesetzt. Ich habe aber neulich auch mal einen Artikel mit einem recht neuen, schönen Slider-Plugin gemacht, dem Caroufredsel-Slider (beide funktionieren eigentlich gleich).

        Die Thumbnails fügen wir mit bei uns mit der the_post_thumbnail Funktion ein. Mit Vorschaubildern in Custom Fields könnte es aber genauso funktionieren. Man muss ein bisschen CSS anpassen, bei den Slider-Plugins, aber dann funktioniert es eigenlich recht gut :-)

        Viele Grüße und ein schönes Wochenende :-)
        Ellen

  2. Hi Ellen,

    Wie immer ein sehr gutes Tutorial.

    Eine Frage: welchen Vorteil bringt es, das Javascript über die functions.php einzubinden? Das müsste doch auch gehen, wenn ich das ganze von Hand in die Header.php schreibe, oder?

    Grüße
    Wolfgang

    • Hallo Wolfgang,

      vielen Dank für dein Feedback zum Tutorial :-)

      Meines Wissens nutzt man die Funktion wp_enqueue_script in WordPress vor allem, damit sich unterschiedliche Plugins nicht gegenseitig in die Quere kommen können und um zu verhindern, dass jQuery oder eine andere Library zwei mal geladen wird. Daher der sichere Weg über die functions.php Datei :-) Funktionieren tut es natürlich auch, wenn man den Code direkt in die header.php Datei einfügt. Hoffe diese Antwort hilft dir etwas weiter.

      Viele Grüße und ein schönes Wochenende :-)
      Ellen

  3. Bin froh diesen Blog gefunden zu haben. Und nach langem Lesen schreibe ich dann auch mal was. Exzellente Tutorials zum Thema Theme selbermachen. Glaub sogar, dass es das Beste ist, was zumindest im deutschsprachigen Raum existiert. Und ich habe da einige gelesen. ^^
    Euer Blog macht einfach Laune. :-)

    • Hallo Christian,

      vielen Dank für dein tolles Feedback. Es freut uns sehr, dass dir die Blog-Beiträge und das Tutorial so gut gefallen. Das gibt auf alle Fälle jede Menge Motivation :-)

      Vielen Dank und viele Grüße,
      Ellen

  4. Sieht sehr schick aus, die Seite mit dem Slider. Nur leider verstehe ich vom Tutorial nur Bahnhof, da fehlt mir das Background Wissen. Aber trotzdem interessant zu sehen, ich noch alles lernen muss…

    • Hallo Elke,

      vielen herzlichen Dank für deinen Kommentar, es freut mich, dass dir die Slider-Umsetzung gefällt :-) Am besten du arbeitest du dich Schritt für Schritt voran, mit der WordPress Umsetzung oder einer Slider-Integration auf deinem Blog. Dann kann eigentlich gar nichts schief gehen. Und wenn du den Code am Anfang auch nicht genau verstehst, macht das nichts, mit der Zeit steigt man immer mehr durch. Learning by doing ist oft die beste Methode :-)

      Viel Spaß und viele Grüße,
      Ellen

  5. Interessante Umsetzung ;-)
    Ich hatte vorletzte Woche nach einem Slider gesucht, mir unzählige Plugins und Lösungen angesehen, das ein oder andere implementiert und dann wieder rausgeworfen (Javascript Fehler) und dann doch am Ende noch einen über eine manuelle Integration gefunden, der genau das macht was ich wollte: Die letzten Artikel mit Bild und Excerpt anzeigen und via rechts und links Buttons hin- und herscrollen möglich. War ein ziemlicher Aufwand, aber am Ende bin ich glücklich ;-)

    • Hallo Tanja,

      vielen herzlichen Dank für dein Feedback und deinen Erfahrungsbereicht zur Slider-Integration :-)

      Ja, ich habe auch schon etliche Optionen ausprobiert. Es kommt ja auch immer darauf an, welchen Content man in den Slider packen möchte. Den Nivo-Slider finde ich für einen reinen Bilder-Slider (eventuell noch mit Bild-Unterschriften) eine sehr schöne und einfach umzusetzende Lösung. Klasse, dass du noch eine Lösung für dich gefunden hast, mit der du zufrieden bist :-)

      Viele Grüße,
      Ellen

  6. Super Ellen,
    war schon ziemlich frustriert von dem fruchtlosen Slider-Einbau-Geschniggel, doch Dank deiner Anleitung hat´s endlich geklappt. Vielen Dank für deinen Einsatz. Wenn es Elmastudio nicht geben würde, müßte man es erfinden.

    • Hallo Stefan,

      vielen herzlichen Dank für dieses tolle Feedback. Wir freuen uns riesig, dass dir die Artikel hier so gut gefallen und weiterhelfen :-) Und klasse, dass es mit deinem Slider jetzt geklappt hat!

      Viele Grüße,
      Ellen

  7. Hallo, eine super Anleitung. Einfach nachzuvollziehen – dennoch habe ich ein Probblem welches ich mir nicht erklären kann – vielleicht kenn ihr es ja und könnt mir einen Tipp geben :-)

    Also auf allen Seiten wird der Footer korrekt angezeigt. Nur auf der Startseite fehlt der Footer. Habe mich am Tutorial orientiert und auch eure Dateien benutzt – klappt aber nicht….komme da irgendwie nicht weiter….der Footer ist einfach nicht da :-(

    danke

    • Hallo Gerold,

      vielen Dank für dein nettes Feedback, es freut mich sehr, dass dir das Tutorial so gut weiter geholfen hat. Hast du eventuell deine Seite schon online gestellt und einen Link, damit ich mir den Code einmal anschauen kann? Welche Seite ist denn deine Startseite? Eine statische Seite (z.B. template-home.php) oder der Blog?

      Viele Grüße,
      Ellen

  8. Hallo Ellen,

    ja die Seite ist online. Habe allerdings den Wartungsmodus aktiv. Macht aber nichts, denn ich habe den „Fehler“ gefunden.

    Es lag an den Twitternarichten: Fatal error: Call to undefined function twitter_messages() in /is/htdocs/*/www/wp-content/themes/xyz/template-home.php on line 44.

    Nachdem ich die Abfrage in der template-home.php entfernt habe, wird nun auch auf der statischen Startseite der Footer angezeigt. Super – vielen Dank für die Mühe.

    Schönes WE

  9. Hey Ellen,

    vielen Dank für die gute Anleitung. Habe erfolgreich ein Banner in meine Homepage integriert. Wenn ich aber jetzt zusätzlich das Plugin „Events Manager Extended“ verwenden möchte, funktioniert die Animation nicht mehr. Weißt du vielleicht was ich da machen kann?

    Grüße
    David

    • David, das kannst du mit den Einstellungen im Header regeln, bei mir sieht das so aus:

      $(window).load(function() {
      $('#slider').nivoSlider({
      effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
      animSpeed:1500, // Slide transition speed
      pauseTime:7000, // How long each slide will show
      startSlide:0, // Set starting Slide (0 index)
      directionNav:true, // Next & Prev navigation
      directionNavHide:true, // Only show on hover
      controlNav:false, // 1,2,3... navigation
      keyboardNav:true, // Use left & right arrows
      pauseOnHover:true, // Stop animation while hovering
      manualAdvance:false, // Force manual transitions
      captionOpacity:0.6, // Universal caption opacity
      prevText: 'Zurück', // Prev directionNav text
      nextText: 'Vor', // Next directionNav text
      });
      });

      keyboardNav:true, // Use left & right arrows

      statt true hier false einsetzen!

  10. Hallo ellen, vielen Dank für den tollen Beitrag. Dank dir habe ich mich heut getraut und den Nivoslider in unsere Webseite eingebaut. Ich bin super glücklich damit und er gefällt mir super für die Webseite, die Bilder wirken jetzt viel besser als vorher mit den Popups oder der schlechten Flash Qualität. Ich habe nur ein kleines Problem, bzw. für mich ist es größer für Dich bestimmt klein. Ich möchte die Prev / NEXT Navigation NICHT HABEN. Die soll ganz verschwinden, nu die Navigation über die Miniaturen möchte ich behalten. Ich kriege es nicht hin, irgendwie kann ich da löschen wo ich will im CSS .. die Navi verschwinden nicht. Ich möchte einfach nicht, das die Pfeile zu sehen sind wenn man mit der Maus zufällig auf das Bild kommt. Wie stelle ich das nur ab, kannst Du mir helfen? Über eine Antwort würde ich mich riesig freuen. Gruß aus Köln, dirk

  11. Hallo,

    ich wollte mir auch einen Slider auf meine page machen und habe es genau so gemacht wie hier beschrieben…. wenn ich am ende dann aber alles aufrufen will kriege ich nur die fehlermeldung:
    Fatal error: Call to undefined function get_header()
    was hab ich denn falsch gemacht?
    Ich Habe die seite noch auf meine computer mache das also local

  12. Hallo,

    kleines update :D
    ich habe es jetzt soweit, aber bei mir werden jetzt nur zahlen angezeigt keine bilder!

  13. Vielen Dank für diese tolle Anleitung, hat mir sehr geholfen! Insbesondere die Funktion wp_enqueue_script war mir neu, dank deiner Beschreibung war die Einbindung der Sripte ein Kinderspiel :-)

  14. Hallo,
    insgesamt eine super-Artikelreihe :-) Nur mit dem Slider hatte ich ein paar Probleme. Einige Stunden hat es gedauert den Slider wie beschrieben in einem Theme zum Laufen zu bekommen bis ich herausgefunden habe, dass das mit dem $-Zeichen von jQuery bei meinem Blog nicht funktioniert (soll bei WordPress standardmässig nicht funktionieren???). Was muss man machen, damit jQuery das $-Zeichen auch bei WordPress verwenden kann?
    Gruß
    Matthias

  15. Besten Dank für Tutorial.

    Hab‘ alles ausprobiert: funktioniert einwandfrei.

    Meine Frage: wie kann ich die Bilder aus dem Backend so hochladen, dass sie automatisch in Slider-Ordner eingefügt werden? Man hat ja nicht immer die Möglichkeit über ftp die Bilder hochzuladen.

    Danke in Voraus
    RG

  16. Hallo,

    ist es irgendwie mög­lich, dass man beim Nivo Slider die Liste der Bilder nicht im Template hard­co­diert son­dern dyna­misch aus­lesen lässt? Zum Beispiel möchte ich alle Bilder eines bestimmten Ordners in den Slider nehmen, will aber nicht jedes ein­zelne Bild über ein img-Tag im HTML-Code einbinden.…

    LG

  17. super tutorial. damit kann endlich mal einigen geholfen werden, die es nicht von anfang an verstehen. sehr ausführlich, weiter so!

  18. … vielen Dank für das Tut … wie füge ich aber einen Slider so ein, dass er auf jeder Seite angezeigt wird, sozusagen anstatt einer Kopfgrafik?

    (fragt) Roland

  19. Hallo,

    das ist wirklich ein super Tutorial, super verständlich, vielen Dank dafür!

    Ich bin beim Nivo Slider auf ein Problem gestoßen… Es werden alle Bilder untereinander angezeigt und bewegen sich nicht… Hat jemand ne Idee woran das liegen könnte??

    Vielen Dank
    VG Julia

  20. Ich habe den Slider ohne WordPress in eine HTML Seite eingebaut. So weit funktioniert alles tiptop. Allerdings suche ich die Funktion wo man den Vorher/Nacher Button erstell. (Mir zeigt es sie einfach als Text an. Ausserdem wird da wo du bei dir die cookies platziert hast (unter dem slider), bei mir nur 1,2,3,4 angezeigt. Wir ändere ich diese zu Punkten oder Bilder?

  21. Wow … Supertolles Tutorial! Echt klasse gemacht.

    Bisher habe ich nur bestehende Themes angepasst, aber mit dieser tollen Anleitung werde ich denn mal den nächsten Schritt in Richtung Theme-Programmierung wagen.

  22. Hi Ellen
    Super Tutorial!!!
    Hab eine Menge gelernt :-)
    Ich habe nur leider ein kleines problem mit dem nivo Sider:
    die directionnav Pfeile befinden sich unter dem Slider und reagieren nicht auf absolutwerte imm css top
    Warum??

  23. Hallo Ellen,
    endlich mal ein deutschsprachiger Blog über WordPress mit super Interessanten und SEHR hilfreichen Beiträgen.
    Die ist nicht mein erster Beitrag den ich hier verfolge. Jedoch der erste, wobei ich gern eine Frage stellen würde :)
    Das Tutorial Top, kann ich auch „nachmachen“ und auf meine Seite umsetzen… aber irgendwie fehlt mir dann doch wissen um andere jQuery Plugins durch diesen Beitrag/Tutorial einzufügen.
    Könntet ihr mal ein Tutorial allgemein schreiben wie man ein jQuery Plugin einfügt?
    Oder anhand 2-3 Beispiele dass man genauer weiß was man ändern muss.
    Dieses Tutorial hier
    http://www.htmldrive.net/items/show/1133/Awesome-jQuery-image-Swish-Zoom-Hover-Effect?ModPagespeed=noscript
    hätte ich gern eingefügt… klappt aber absolut gar nicht. Habe die Codes von hier genommen und wollte diese umändern / anpassen… aber funkt nicht :(

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *