Implamentació d’un slider sense plugins

A aquesta classe implementarem un dels sliders més utilitzats a l’actualitat, el Nivo Slider. Aquest slider té un pluguin de pagament per WordPress però la versió jQuery és gratuita. La setmana passada vam afegir el jQuery a la nostra plantilla adjuntant el següent codi a l’arxiu functions.php:

function my_init_method() {
 if (!is_admin()) {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '/wp-content/themes/temapropi/scripts/jquery-1.10.2.min.js');
 wp_enqueue_script( 'jquery' );
 }
}
add_action('init', 'my_init_method');

I afegint l’arxiu jquery-1.10.2.min.js a la carpeta scripts del nostre tema.

Un cop fet això, que nosaltres ja ho teniem fet, explicarem la implementació del slider.

Nivo Slider

Anem a la web de Nivo Slider i ens descarreguem el pluguin jQuery gratuït. Si anem a la pàgina de documentació veureu que ens explica els passos a seguir per implementar el slider. El primer que em de fer és descomprimir l’arxiu descarregat de nivo i extreure els fitxers jquery.nivo.slider.pack.js , nivo-slider.css i la carpeta themes i posar-los a la carpeta scripts del nostre tema.

Vinculem les fulles d’estils amb els següents scripts que van a l’arxiu header.php abans de tancar el head:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/scripts/nivo-slider.css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/scripts/themes/default/default.css" type="text/css" media="screen" />

I un script al footer.php abans de tancar el body:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.nivo.slider.pack.js"></script>
 <script type="text/javascript">
 $(window).load(function() {
 $('#slider').nivoSlider();
 });
 </script>

Aquest script conté les funcions que realitza el slider. Més endavant el modificarem per veure com funciona.

Les imatges del nostre slide les gestionarem a la web utilitzant la funció the_post_thumbnail() que ja hem utilitzat anteriorment. Donarem d’alta una nova mida anomenada homepage-slider de mida 960px per 310px amb la fució crop activada:


add_image_size( 'homepage-slider', 960, 310, true );

Fet això ja podem modificar el nostre arxiu index.php per determinar com mostrarem el slider a la web. Busquem el següent codi:

<div id="nivoslider">
 <img src="http://lorempixum.com/g/920/310" />
 </div><!-- end of nivoslider -->

L’estructura que ens recomanant a la web de Nivo Slider te que ser semblant a això:

<div id="nivoslider">
  <div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
       <!-- aquí van les imatges -->
    </div>
  </div>
</div>

El que farem és agafar mitjançant una query les imatges d’entrades que siguin d’una categoria concreta, com podria ser slider, i les hi associarem la mida homepage-slider.

<?php query_posts('category_name=slider' );
 	while ( have_posts() ) : the_post(); ?>
	<a href="<?php the_permalink();  ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail( 'homepage-slider', array('title' => ''.get_the_title().'' )); ?></a>
 	<?php endwhile; wp_reset_query(); ?> 

Aquí tenim un exemple que podem fer servir per altres vegades de com podem fer que un tumbnail es converteixi a un enllaç d’una entrada. Tota la info d’això com sempre al codex.

Si us fixeu amb el codi veureu que cada imatge que passa ens portarà amb un link al post on tenim la imatge. També hem afegit un no paràmetre al post_thumbnail

array('title' => ''.get_the_title().'' )

Que ens permet agafar la informació del títol de l’entrada i mostrar-ho amb un div a la part inferior del slide. Altres exemples de paràmetres que podem asignar a un tubmnail són:

the_post_thumbnail( 'thumbnail', array('class' => 'alignleft post_thumbnail', 'style' => 'width: 186px;', 'alt' => 'no alt', 'title' => ''.get_the_title().'' ));

Si ho ajuntem tot ens quedarà el següent codi:

<div id="nivoslider">
 		<div class="slider-wrapper theme-default">
 			<div class="ribbon"></div>
			<div id="slider" class="nivoSlider">
 				<?php query_posts('category_name=slider' );
 				while ( have_posts() ) : the_post(); ?>
				<a href="<?php echo get_permalink();  ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail( 'homepage-slider', array('title' => ''.get_the_title().'' )); ?></a>
 				<?php endwhile; wp_reset_query(); ?>
 			</div>
		</div>
 </div><!-- end of nivoslider -->

Per que es mostri el slide crearem 3 o 4 entrades amb una imatge destacada i a la categoria slider

Un cop estigui funcionant el slide si volem modificar els paràmetres de funcionament ho farem des del footer.php substituim $(‘#slider’).nivoSlider() pel següent codi:

$('#slider').nivoSlider({
    effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,                     // For box animations
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 3000,                // How long each slide will show
    startSlide: 0,                  // Set starting Slide (0 index)
    directionNav: true,             // Next & Prev navigation
    controlNav: true,               // 1,2,3... navigation
    controlNavThumbs: false,        // Use thumbnails for Control Nav
    pauseOnHover: true,             // Stop animation while hovering
    manualAdvance: false,           // Force manual transitions
    prevText: 'Prev',               // Prev directionNav text
    nextText: 'Next',               // Next directionNav text
    randomStart: false,             // Start on a random slide
    beforeChange: function(){},     // Triggers before a slide transition
    afterChange: function(){},      // Triggers after a slide transition
    slideshowEnd: function(){},     // Triggers after all slides have been shown
    lastSlide: function(){},        // Triggers when last slide is shown
    afterLoad: function(){}         // Triggers when slider has loaded
});

Podeu descarregar els arxius de la classe aquí:

[download id=”716″]