WordPress: creare uno slider di post in evidenza con Coin Slider

Coin Slider è un semplice ma efficacissimo plugin per jQuery che possiamo aggiungere al nostro tema di WordPress per creare uno slider di post in evidenza con stupendi effetti di transizione tra una slide e l'altra. In questo post vi mostrerò come fare.

Creare un tag per i post dello slider

Per prima cosa andiamo a creare un nuovo tag tra i tag di WordPress che chiameremo slideshow. Aggiungiamo quindi questo tag ai post che vogliamo mettere in evidenza. Ovviamente i post dovranno anche avere un'immagine in evidenza di una certa dimensione (consiglio 500 x 300 in modo da avere uno slider proporzionato). La dimensione è quella originale dell'immagine caricata, non quella visualizzata dal vostro tema.

Creare la struttura dello slider

Aggiungiamo il seguente codice al file functions.php:

function create_posts_slideshow() {
    
    $html = '<div id="coin-slider">';

	$query = new WP_Query( array('tag'=>'slideshow', 'posts_per_page'=>3) );
	
	
		while( $query->have_posts() ) {
		
			$query->the_post();
			$id = get_the_ID();
			
			
			$html .=  '<a href="' . get_permalink($id) . '">';
			$html .= get_the_post_thumbnail($id, array(500,300), array('title' => get_the_title()));
			$html .= '<span>' . get_the_title() . '</span>';
			$html .= '</a>';
		
		
		}
		
		wp_reset_postdata();
	
	
	$html .= '</div>';
	
	return $html;


}

In questo caso i post visualizzati saranno tre, ma potete sempre aumentarne il numero impostando il parametro posts_per_page. Quindi inseriamo il nostro slider nella home page, andando a modificare il file index.php (o home.php se il vostro tema lo prevede) inserendo il seguente codice nel punto in cui volete che compaia lo slider:

<?php 

  if(is_home()) {
	echo create_posts_slideshow();
  }
	
	
?>

Ora dobbiamo aggiungere i file JavaScript e gli stili CSS.

Aggiungere i file JavaScript

Caricate il file coin-slider.min.js in una directory del vostro sito. Nel mio esempio userò una struttura di sottodirectory creata all'interno della directory del tema corrente, ma voi potete anche usare un'altra directory.

Quindi create un nuovo file JavaScript ed inserite al suo interno il seguente codice:

(function($) {


	$(function() {
	
		$('#coin-slider').coinslider({
			width: 500,
			height: 300
		});
	
	});


})(jQuery);

Salvatelo come slider.js e caricatelo in una directory del vostro sito.

La cosa importante è specificare sempre URL assoluti per i file in questione. Dato che il plugin dipende da jQuery, dovete assicurarvi che jQuery sia stata caricata. Altrimenti dovete caricarla voi, aggiungendo il seguente codice al vostro file functions.php:

function add_scripts() {

	if(!is_admin()) {

		wp_enqueue_script('jquery');
	
		if(is_home()) {
	
			wp_register_script('coinslider', get_bloginfo('template_url') . '/js/plugins/coinslider/coin-slider.min.js', '1.0', true);
			wp_enqueue_script('coinslider');
			wp_register_script('slider', get_bloginfo('template_url') . '/js/slider.js', '1.0', true);
			wp_enqueue_script('slider');
	
		}
	

	
	
	}
}

add_action('wp_footer', 'add_scripts');

Gli script vengono caricati nel footer in quest'ordine:

1. jquery
2. coin-slider.min.js
3. slider.js

Ovviamente il secondo parametro della funzione wp_register_script() va impostato usando l'URL che avete scelto per i vostri file. Mi raccomando: controllate sempre gli URL che devono essere assoluti.

L'ultimo passaggio è aggiungere gli stili CSS.

Aggiungere gli stili CSS

Aprite il file coin-slider-styles.css e copiate gli stili CSS presenti nel foglio di stile principale del vostro tema, modificando i valori delle proprietà per adattarli al layout che avete scelto. Nel nostro caso centreremo il contenitore nella pagina e modificheremo la larghezza della didascalia (che è di 545 pixel nel CSS originale del plugin) per adattarla alle immagini:

/*=
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none;}

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 480px; padding: 10px; background-color: #000000; color: #FFFFFF; } /* 480 + 10 + 10 = 500 */

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

#coin-slider {
	margin: 1em auto; /* centra lo slider */
}

Ovviamente le modifiche agli stili sono soggettive e dipendono dal layout del vostro tema.

Demo