Tutorial WordPress jQuery – Sliding Post

Inizia una nuova rubrica su Fedeweb.net, dove vedremo dei brevi tutorial dove uniremo WordPress con jQuery.

Oggi vediamo come applicare Mosaic, plugin jQuery realizzato da Build Internet, ai post di WordPress.

Puoi vedere la demo di Mosaic per capire quello che si vuole realizzare con il tutorial.

Questa tecnica può essere particolarmente adatta per un portfolio realizzato in WordPress, o per i top post del tuo blog.

Qui metterò solamente il codice relativo a WordPress, mentre per tutti gli effetti e l’utilizzo di Mosaic in generale ti rimando alla pagina del plugin, che ti consiglio di scaricare prima di provare il tutorial.

Codice WordPress

<?php query_posts( 'posts_per_page=5&cat=2' );
  	if (have_posts()) : while (have_posts()) : the_post(); ?>
	

		
			

				
<?php the_title() ?>
	
			
		
		
<?php the_post_thumbnail() ?>
	
	<?php endwhile; endif; ?>

Il primo passo è quello di fare una query dove andiamo a prendere i post che desideriamo, tramite la funzione query_posts.

Poi nel ciclo classico di wordpress andiamo a prendere il link all’articolo con la funzione the_permalink(), il titolo (the_title()) che comparirà al passaggio del mouse sopra la miniatura, impostata in precedenza nell’articolo (the_post_thumbnail()).

Codice jQuery

Applichiamo ora Mosaic al box, che dobbiamo richiamare nell’header del nostro tema WordPress e applichiamolo ai box.

<script type="text/javascript" src="mosaic.1.0.1.min.js"></script>
<script type="text/javascript">
			jQuery(function($){
				$('.bar').mosaic({
					animation:'slide'
				});
		    });</script>

Finito! Appuntamento al prossimo tutorial