Tutorial WordPress jQuery – Sliding Post

Scritto da fedeweb il 11 gennaio 2012 con 0 commenti | Pubblicato in Tutorial Wordpress jQuery


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.

Tutorial WordPress jQuery - Sliding Post

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 ;)

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

Non ci sono commenti

Non ci sono al momento commenti su Tutorial WordPress jQuery – Sliding Post. Forse vuoi commentare tu per primo?

Lascia un commento