Tutorial: Nivo Slider auf WordPress anpassen

Ja ihr habt ihn quasi grade vor der Nase. Den Nivo Slider, welcher da oben so nett eine kleine Auswahl an Artikeln hin und her wechselt. Doch wie kommt der eigentlich da hin? Wie wird er auf WordPress angepasst durch jQuery?

Von dem Nivo Slider an sich gibt es derzeit 3 Versionen. Eine kostenlose jQuery Version, welche generelle Webseiten bedient und alle Grundfunktionen enthält, sowie zwei WordPress Versionen, welche als Plugin funktionieren, allerdings beide kostenpflichtig sind.

Wie man sich das Geld sparen und den Nivo Slider kostenlos einbinden kann zeige ich im Folgenden:

1. Erste Schritte

Zunächst muss das kostenlose Nivo Slider Paket runtergeladen und entpackt werden. Kopiere dann die Dateien aus dem nivo-slider/themes/default Ordner in deinen images Ordner, worauf wir später zurückgreifen müssen, falls wir Elemente, wie etwa die arrows.png, später benutzen möchten.

Nun musst du dich noch entscheiden, wohin du in deinem WordPress Theme den Slider integrieren möchtest. Entschieden? Gut! Weiter gehts!

2. Einen speziellen „Loop“ in das Theme integrieren

An der Stelle, wo du den Nivo Slider integrieren möchtest fügst du jetzt folgenden WordPress Loop ein:

<div id="slider" class="nivoSlider">

   <?php $my_query = new WP_Query('showposts=5&category_name=featured'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
         <img src="<?php echo get_post_meta($post->ID, 'nivoimage', true); ?>" alt="" title="<?php the_title(); ?>" />
      </a>
   <?php endwhile; ?>

</div>

Der oben einsehbare Code ruft die letzten 5 Beiträge (showposts=5) aus der Kategorie „Featured“ auf. Diese Artikelkategorie muss natürlich bestehen, ansonsten wird nichts angezeigt. Alternativ kann unter „category_name=featured“ auch jede andere Kategorie für Beitrage eingetragen werden. Aber bitte immer darauf achten, dass ihr den Artikel, welchen ihr dann anzeigen lassen wollt auch in dieser Kategorie abgelegt worden ist!

Für die einzelnen Bilder muss man „Benutzerdefinierte Felder“ nutzen. Dazu wird einfach ein neues benutzerdefiniertes Feld erstellt mit dem Namen: „nivoimage“ und ein Bild eurer Wahl hochgeladen (auf die im CSS angegebene Größe achten!) und der Pfad zum Bild unter „Wert“ eingetragen.

Weitere Infos über die benutzerdefinierten Felder können im WordPress Codex eingesehen werden.

Implementieren von jQuery

Das hinzufügen der jQuery Bibliotheken ist ziemlich simpel und verhält sich ähnlich wie im Nivo Tutorial beschrieben.

Zunächst sollten aber die restlichen Dateien aus dem Ordner /nivo-slider wie etwa die Dateien jquery.nivo.slider.js an einen Ort deiner Wahl in deinem Template Ordner kopiert werden.

Ist dies erledigt so können diese beiden Codezeilen in den -Bereich in der header.php Bereich deines Blog Themes eingefügt werden. Natürlich angepasst an deinen Ablageort deiner Javascript Dateien:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.js" type="text/javascript"></script>

Außerdem muss der Slider selber geladen werden:

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

Wie die Funktionen des Sliders in der $(window).load – Funktion aussehen und bearbeitet werden kann man ebenfalls im Nivo jQuery Plugin Tutorial nachlesen. Ändern tut sich hier nämlich nichts.

Das Stylessheet

Wie man das CSS anpasst ist im Prinzip auch ziemlich einfach. Hier kann man bedenkenlos erneut auf das NIVO Slider Tutorial zurückgreifen und alle Einstellungen einfach übernehmen oder eben selber welche erstellen. Am einfachsten ist es die CSS Klassen aus der nivo-slider.css-Datei kopieren und in euer Stylessheet eures Themes einfügen.

Abschluss

Fertig! So einfach kann es gehen! Mehr ist nicht nötig um den NIVO Slider in euer WordPress Theme zu integrieren.

Hier noch einmal kurz das wichtigste um den Betrieb zu gewährleisten:

• Stelle sicher, dass du eine Kategorie für Artikel mit dem Namen „Featured“ angelegt hast und jeden Artikel, der vom Slider angezeigt werden soll auch in diese Kategorie ablegst!
• Stelle sicher, dass das benutzerdefinierte Feld „nivoimage“ besteht und der richtige Link zum Bild unter „Wert“ eingetragen ist.
• Stelle sicher, dass die Höhen- und Breitenangaben im CSS mit denen des Bildes übereinstimmen!
• Sei dir sicher, dass du die jQuery Bibliotheken korrekt eingebunden hast!

Probleme oder Anregungen? Hinterlasse mir einen Kommentar unter diesen Beitrag oder schreibe mir eine eMail über das Kontaktformular und ich helfe gerne weiter!