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:

[php]
// 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);
}
[/php]

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]
<?php wp_head(); ?>
[/php]

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.

[php]
<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–>
[/php]

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:

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

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:

[php]
<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>
[/php]

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:

[php]
/* — 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;
}
[/php]

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