WordPress: creare uno slider di contenuti

Vogliamo creare uno slider di contenuti controllato da jQuery che mostri i nostri ultimi post nella home page del nostro sito in WordPress. Invece di usare un plugin, che di solito sporca il nostro tema con una serie di script e di elementi HTML non sempre ottimizzati, decidiamo di fare da soli, consci del fatto che alla fine del lavoro la soddisfazione sarà doppia. Vediamo come fare.

Per prima cosa dobbiamo definire una funzione nel file functions.php del nostro tema che crei una struttura di questo tipo:

<div id="slideshow">
	<div id="slideshow-wrapper">
		<div class="slide" id="s1">
			<!-- thumbnail del post-->
			<h2><!-- titolo linkato --></h2>
			<p><!-- riassunto --></p>
			
		</div>
		<!-- altre 5 slide -->
	</div>
	<div id="slideshow-nav">
		<a href="#s1"><!-- thumbnail del post --></a>
		<!-- altri link -->
	</div>
</div>

Ecco la nostra funzione:

function featured_slider() {


    $slider_query = new WP_Query('posts_per_page=6');
    $postcount = 0;
    $html = '<div id="slideshow"><div id="slideshow-wrapper">';
    while ($slider_query->have_posts()) { 
    	$slider_query->the_post();
        $do_not_duplicate = get_the_ID();
        $postcount++;
        
        $html .= '<div class="slide" id="s' . $postcount . '">';
        
        if(has_post_thumbnail()) {
        
        	$html .= get_the_post_thumbnail($do_not_duplicate);
        
        }
        
        $html .= '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
        $html .= '<p>' . get_the_excerpt() . '</p>';
        $html .= '</div>';
    }
    
    $html .= '</div>';
    $html .= '<div id="slideshow-nav">';
    
    $slider_query2 = new WP_Query('posts_per_page=6');
    $postcount2 = 0;
    
    while($slider_query2->have_posts()) {
    
    	$slider_query2->the_post();
    	
    	$do_not_duplicate2 = get_the_ID();
    	
    	$postcount2++;
    	
    	$html .= '<a href="#s' . $postcount2 . '">';
    	
    	if(has_post_thumbnail()) {
    	
    		$html .= get_the_post_thumbnail($do_not_duplicate2);
    	
    	}
    	
    	$html .= '</a>';
    
    
    }
    
    $html .= '</div></div>';
    
    return $html;
    


}

Abbiamo creato due nuovi loop tramite la classe WP_Query e abbiamo estratto i nostri ultimi sei post inserendo la thumbnail, il riassunto, il titolo e il link permanente. Abbiamo anche usato due contatori per poter sia inserire un ID progressivo su ciascuna slide sia un'ancora su ciascun link della navigazione.

Quindi aggiungiamo la funzione al nostro tema:

<?php if(is_home()) { echo featured_slider(); }?>

A questo punto usiamo degli stili CSS:

#slideshow {
  width: 580px;
  margin: 0.5em auto;
  height: 390px;
  position: relative;
  top: -1.8em;
  overflow: hidden;
  border: 2px solid #aaa;
}

#slideshow-wrapper {
	width: 3480px;
	height: 300px;
	position: relative;
}

#slideshow-wrapper div.slide {
	width: 580px;
	height: 300px;
	float: left;
}

#slideshow-wrapper div.slide img {
	width: 180px;
	height: 150px;
	float: right;
	padding-top: 30px;
}

#slideshow-wrapper div.slide h2,
#slideshow-wrapper div.slide p {
	margin: 0 200px 0 0;
padding: 1em 0 0 20px;
}

#slideshow-wrapper div.slide h2 a {
	font-size: 0.7em;
	border-bottom: none;
}

#slideshow-wrapper div.slide h2 a:hover {border-bottom: none;}

#slideshow-wrapper div.slide p {
	font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, serif;
	margin: 0;
	padding: 0 0 0 20px;
}

#slideshow #slideshow-nav {
	margin: 10px auto;
	width: 580px;
	height: 80px;
	border-top: 1px solid #aaa;
	padding: 5px 0;
}

#slideshow #slideshow-nav a {
	float: left;
	display: block;
	width: 90px;
	height: 80px;
	margin-right: 5px;
}

#slideshow #slideshow-nav a img {
	border: none;
	display: block;
	width: 100%;
	height: 100%;
}

Infine aggiungiamo jQuery:

(function($) {

	$(document).ready(function() {
	
		var Slideshow = new function() {
    

	var timer = null,
	    index = 0,
	    wrapper = $('#slideshow-wrapper', '#slideshow'),
	    slides = $('div.slide', wrapper),
	    thumbs = $('a', '#slideshow-nav');
	    
	var getSlidePositions = function() {
	
		var positions = [];
		slides.each(function(i) {
		
			var left = $(this).position().left;
			
			positions[i] = left;
		
		});
		
		return positions;
	
	};
	
	var addOffsetsToImages = function() {
	
		slides.each(function() {
		
			$(this).attr('position', $(this).position().left);
		
		});
	
	};
	
	var autoSlide = function() {
	
		var offsets = getSlidePositions();
		timer = setInterval(function() {
		
		    index++;
		    
		    if(index == offsets.length) {
		    
		    	index = 0;
		    
		    }
		
			wrapper.animate({
				left: - offsets[index]
			}, 1000, function() {
			
				thumbs.eq(index).animate({
					opacity: 0.5
				}, 1000, function() {
				
					$(this).animate({
						opacity: 1
					}, 1000);
				
				});	
			
			});
		
		
		
		}, 3000);
		
	
	
	};
	
	var handleThumbLinks = function() {
	
		thumbs.each(function() {
		
			var $a = $(this);
			var imgId = $($a.attr('href'));
			var $offset = imgId.attr('position');
			
			$a.click(function(event) {
			
				clearInterval(timer);
				
				wrapper.animate({
					left: - $offset
				}, 1000, function() {
				
					autoSlide();
				
				});
			
				event.preventDefault();
			
			});
		
		});
	
	};
	
		
	this.init = function() {
	
		addOffsetsToImages();
	
		autoSlide();
		
		handleThumbLinks();	
		
	};


}();
 
  Slideshow.init(); 

	
	
	});


})(jQuery);

Ovviamente potete intervenire sul codice PHP, CSS e JavaScript per personalizzare il tutto secondo le vostre esigenze.