Possiamo creare uno slideshow di post in WordPress utilizzando un tag personalizzato con cui contrassegnare i post che vogliamo inserire nello slideshow e la classe WP_Query per creare un Loop personalizzato. Poi ci affideremo ai CSS e a jQuery per implementare il layout e gli effetti visivi. Vediamo come.
Per prima cosa definiamo un tag custom che chiameremo slideshow e lo assegniamo a quei post che vogliamo inserire nello slideshow. Quindi definiamo la seguente funzione nel file functions.php del nostro tema:
function create_posts_slideshow() {
$html = '<div id="post-slideshow">';
$html .= '<div id="post-slideshow-wrapper">';
$query = new WP_Query( array('tag'=>'slideshow', 'posts_per_page'=>3) );
while( $query->have_posts() ) {
$query->the_post();
$id = get_the_ID();
$html .= '<div class="slide">';
$html .= '<a href="' . get_permalink($id) . '">';
$html .= get_the_post_thumbnail($id, array(450,300), array('title' => get_the_title()));
$html .= '</a></div>';
}
wp_reset_postdata();
$html .= '</div></div>';
return $html;
}
Per funzionare è necessario che sia stata impostata un'immagine in evidenza sui post e che il vostro tema supporti le thumbnail per i post. A questo punto abbiamo la struttura HTML di base. Aggiungiamo quindi gli stili CSS nel file CSS principale del nostro tema:
#post-slideshow {
width: 450px;
height: 300px;
position: relative;
margin: 1.5em auto;
border: 4px double #bbb;
overflow: hidden;
}
#post-slideshow-wrapper {
width: 1350px;
height: 300px;
position: relative;
background: #eee;
}
#post-slideshow-wrapper div.slide {
width: 450px;
height: 300px;
float: left;
}
#post-slideshow-wrapper div.slide a,
#post-slideshow-wrapper div.slide img {
border: none;
width: 450px;
height: 300px;
display: block;
}
A questo punto creiamo un file JavaScript contenente il codice per gestire lo slideshow con jQuery:
(function($) {
$(document).ready( function() {
var Slideshow = new function() {
var slideshow = document.getElementById('post-slideshow'),
wrapper = $('#post-slideshow-wrapper', slideshow),
slides = $('div.slide', wrapper),
index = 0,
timer = null;
var autoSlide = function() {
timer = setInterval(function() {
index++;
if(index == slides.length) {
index = 0;
}
wrapper.animate({
left: - slides.eq(index).position().left
}, 2000);
}, 2000);
};
var pauseOnHover = function() {
slides.hover(function() {
clearInterval(timer);
timer = null;
}, function() {
autoSlide();
});
};
this.init = function() {
autoSlide();
pauseOnHover();
};
}();
Slideshow.init();
});
})(jQuery);
Chiamiamo il nostro file slideshow.js e lo carichiamo in una directory a scelta del nostro tema. Quindi dobbiamo inserirlo nella coda degli script. Dobbiamo anche inserire prima jQuery qualora il nostro tema non lo faccia. Inseriamo il seguente codice nel file functions.php del nostro tema:
if (!is_admin()) add_action( 'wp_print_scripts', 'add_slideshow_js' );
function add_slideshow_js() {
if(!is_admin()) {
wp_register_script('slideshow', (get_bloginfo('url') . '/test/jquery/slideshow.js'), false, '1.0.0');
wp_enqueue_script('jquery');
wp_enqueue_script('slideshow');
}
}
Quindi possiamo usare la nostra funzione principale nel nostro tema dove vogliamo che appaia il nostro slideshow:
<?php echo create_posts_slideshow(); ?>
E questo è il risultato: