WordPress: JQuery Nivo Slider ohne Plugin einbinden

Heute wollte ich für ein WordPress Theme einen Content- Imageslider einbinden. Auf der Suche nach dem geeigneten Imageslider bin ich auf unzählige Plugins für WordPress gestossen. Auf meiner WordPress Testinstallation habe ich mir ein paar davon angeschaut. Was mir dabei negativ aufgefallen ist: Etliche dieser Plugin Slider kommen nicht gerade schlank daher. Deshalb habe ich mich auf die Suche nach einer geeigneten Alternative gemacht…

Schlussendlich habe ich mich dann für den bekannten Nivo Slider von Dev7studios entschieden. Der Nivo Slider ist ein auf JQuery basierender Image Slider, der alle von mir benötigten Funktionen mitbringt und nicht zu aufgebläht daherkommt.

Es gibt den Nivo Slider in zwei verschiedenen Varianten. Einmal als WordPress Plugin (kostenpflichtig), und einmal als JQuery „Plugin“. Beide kannst Du Dir bei Bedarf hier herunterladen: http://nivo.dev7studios.com/

Der Vorteil der JQuery „Plugin“ Version: Sie ist gratis!

Der JQuery Nivo Slider im kurzen überblick:

• 16 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weighs 12kb
• Supports linking images
• HTML Captions
• 3 Slick Themes
• Free to use and abuse under the MIT license
• Responsive

Ein Leichtgewicht von einem Content Slider und zudem absolut skalierbar – d.h. ich kann den Nivo Slider genau so konfigurieren, wie ich das will.

Nun kommen wir also zum wichtigeren Teil. Wie binde ich den JQuery Nivo Slider ohne Plugin in mein WordPress Theme ein?!

Eine kurze Recherche bei Dr. Google hat mir auch hier wieder weitergeholfen. Einmal gibt es auf der Seite von Dev7studios selber ein kurzes Tutorial, wie man das JQuery Nivo Slider Plugin manuell in WordPress einbinden kann:

Manually Setting up the jQuery Nivo Slider Plugin in WordPress

Und das Tutorial von Paul Robinson auf return-true.com hat mir ebenfalls dabei geholfen, den Image Slider erfolgreich in mein WordPress Theme einzubinden.

Ich bin dabei den Anweisungen von Paul Schritt für Schritt gefolgt. Sie verwendet dabei in ihrem Tutorial folgende Funktion:

function theme_add_scripts() {
 wp_enqueue_script('jquery');
 wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
}
add_action('init', 'theme_add_scripts');

Mit dieser Funktion bindet sie das für den Nivo Slider benötigte JQuery Skript in WordPress – genauer gesagt in der functions.php im entsprechenden Theme Ordner – ein.

Dann rufen wir mit wp_enqueue_style() die benötigten Stylesheets auf:

function theme_add_styles() {
 wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');
 wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
}
add_action('init', 'theme_add_styles');

Damit wir nun aber unseren Image Slider nicht immer manuell mit neuen Bildern füttern müssen, können wir ganz einfach in der functions.php mit

add_theme_support('post-thumbnails');
add_image_size('nivothumb', 960, 320, true);

das Hochladen von Beitragsbildern und anschliessende Verkleinern auf die gewünschte Thumbnail Grösse aktivieren. In den meisten Fällen sollte eigentlich die Funktion Artikelbilder hochzuladen bereits per default eingestellt sein. Sollte dies der Fall sein, kannst Du add_theme_support(‚post-thumbnails‘); also getrost weglassen und einfach add_image_size(’nivothumb‘, 960, 320, true); verwenden.

Abschliessend müssen wir natürlich an der gewünschten Stelle in WordPress (beispielsweise in der header.php oder in der index.php) den Nivo Slider ins HTML einbinden – sonst weiss der Slider natürlich nicht, wo er überhaupt auftauchen soll…Hier der Code, wie Paul ihn im Tutorial verwendet:

<div id="slider">
<?php
 $tmp = $wp_query;
 $wp_query = new WP_Query('posts_per_page=5&category_name=featured');
 if(have_posts()) :
 while(have_posts()) :
 the_post();
?>

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>

<?php
 endwhile;
 endif;
 $wp_query = $tmp;
?>
</div><!-- close #slider -->

Bei mir hat das allerdings so nicht funktioniert. Nach weiteren Recherchen und einem mittlerweile rauchenden Kopf (gut zwei Stunden hat’s gedauert, bis ich endlich die Lösung gefunden hatte) bin ich dann darauf gekommen, dass ich ja einfach mal im „demo“ Ordner vom Nivo Slider nachschauen könnte, wie denn dort die richtige HTML Struktur aussehen sollte.

Alles in allem schaut der Code, um den JQuery Nivo Slider in WordPress einzubinden dann so aus:

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

<?php
 $tmp = $wp_query;
 $wp_query = new WP_Query('posts_per_page=5&category_name=tagebuch');
 if(have_posts()) :
 while(have_posts()) :
 the_post();
?>

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('frontslider-thumb'); ?></a>

<?php
 endwhile;
 endif;
 $wp_query = $tmp;
?>

</div><!-- close #slider -->
</div>

Und Voilà – der Slider sitzt am richtigen Platz (zumindest schon fast…) und läuft wie am Schnürchen. Dabei ist zu beachten, dass Du bei

$wp_query = new WP_Query('posts_per_page=5&category_name=featured');

die Anzahl der gewünschten Posts angeben kannst, die der Slider anzeigen soll. Wenn Du z.Bsp. mehr als 5 Posts (oder Bilder) anzeigen willst, dann kannst Du dies einfach dort mit angeben: posts_per_page=10

Auch kannst Du ganz einfach angeben, aus welcher Kategorie deine Bilder angezeigt werden. Im Beispiel wird hier die Kategorie featured verwendet – Du kannst natürlich jede beliebige Kategorie dazu wählen. Dann einfach category_name=meineeigenekategorie angeben.

Damit ich nun nicht den ganzen JQuery Code für die Steuerung des Content Sliders in meinem Header sitzen habe, bin ich folgendermassen vorgegangen:

Diesen Javascript Code

jQuery(window).load(function() {
 jQuery('#slider').nivoSlider({
  effect:'random', //Specify sets like: 'fold,fade,sliceDown'
  slices:15,
  animSpeed:500, //Slide transition speed
  pauseTime:5000,
  startSlide:0, //Set starting Slide (0 index)
  directionNav:true, //Next & Prev
  directionNavHide:true, //Only show on hover
  controlNav:false, //1,2,3...
  keyboardNav:true, //Use left & right arrows
  pauseOnHover:true, //Stop animation while hovering
  captionOpacity:0.8, //Universal caption opacity
 });
});

in ein separates File namens nivo-options.js kopiert und dann wieder mit wp_enqueue_script() in der vorher erstellten Funktion in meiner functions.php aufgerufen:

function theme_add_scripts() {
 wp_enqueue_script('jquery'); //omit if jQuery already included
 wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/nivo-slider/jquery.nivo.slider.pack.js', 'jquery' );
 wp_enqueue_script('nivoptions', get_bloginfo('stylesheet_directory').'/nivo-slider/nivo-options.js', 'jquery' );
 }

Der Vollständigkeit halber hier noch einmal meine modifizierte functions.php:

/**
 * Including the nivo slider - http://return-true.com/2010/09/getting-jquery-nivo-slider-to-work-inside-your-wordpress-theme/
 */
 // first add the jquery scripts
 function theme_add_scripts() {
  wp_enqueue_script('jquery'); //omit if jQuery already included
  wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/nivo-slider/jquery.nivo.slider.pack.js', 'jquery' );
  wp_enqueue_script('nivoptions', get_bloginfo('stylesheet_directory').'/nivo-slider/nivo-options.js', 'jquery' );
 }
 add_action('init', 'theme_add_scripts');

 // add the css sheets
 function theme_add_styles() {
  wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/nivo-slider/nivo-slider.css', false );
  wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/nivo-slider/default.css', false );
 }
 add_action('init', 'theme_add_styles');

Da ich den Slider aber nur auf der Startseite in meinem Theme verwenden möchte, habe ich vor dem HTML für den Slider einfach noch eine if Bedingung hinzugefügt und frage mit is_front_page() ab, ob wir uns auch tatsächlich auf der Startseite von meinem Theme befinden (Ich habe eine statische Seite als Startseite festgelegt).

// Check if this is the frontpage - if true, show the nivo slider
 if (is_front_page()) { ?>

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

 <?php
  $tmp = $wp_query;
  $wp_query = new WP_Query('posts_per_page=5&category_name=tagebuch');
  if(have_posts()) :
  while(have_posts()) :
  the_post();
 ?>
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('frontslider-thumb'); ?></a>

 <?php
  endwhile;
  endif;
  $wp_query = $tmp;
 ?>

 </div><!-- close #slider -->
</div>

Alles in allem eigentlich eine relativ einfache Sache – wichtig ist einfach, dass man die kleinen Details genau befolgt und auch die verschiedenen Pfadangaben an die eigene Umgebung anpasst. Wie gesagt, eine fehlende CSS Klasse hat mich hier schnell zwei Stunden gekostet – hätte auch vermieden werden können…

Aber was solls, wieder was gelernt und nun gehts daran, den JQuery Nivo Slider noch via CSS an mein WordPress Theme anzupassen. Auf jeden Fall eine coole Sache, das mit dem gratis JQuery Nivo Slider Plugin für WordPress – man braucht halt einfach manchmal etwas mehr Geduld, als wenn man einfach ein Plugin installiert. Dafür hat man aber mehr oder weniger volle Kontrolle darüber, was im Core von WordPress gerade so rumwerkelt. Es geht auch ohne Plugins!