Creare uno slideshow in wordpress senza plugin | iacopobellavia.com

GLI SLIDESHOW, CHE PASSIONE!
Quante volte avete desiderato inserire nel vostro sito web uno slideshow personalizzato? Invece vi siete dovuti accontentare di slideshow preconfezionati, impossibili da personalizzare graficamente e spesso mal funzionanti?
A me è successo e allora mi sono rimboccato le maniche e ho trovato la soluzione che vi presento qui di seguito.

CREARE SLIDESHOW SENZA AUSILIO DI ALCUN PLUGIN
Questa guida vi spiegherà passo, passo come creare uno splendido slideshow in WordPress senza l’utilizzo di alcun plugin.
Eh già, perché la maggior parte dei plugin sono a pagamento e ognuno di essi presenta delle peculiarità interessati, che però non sono mai comprese nello stesso pacchetto. Inoltre non è sempre semplice gestire il tema grafico di tali slideshow e si rischia di ottenere un risultato standard, identico a quello di tanti altri siti.
A questo punto, facciamocelo da soli!

Seguendo questa guida, potrete realizzare slideshow in cui girano (o ciclano) immagini, video, testi, anteprime di articoli o anche contenuti personalizzati misti. È utilizzabile anche per creare un layout alternativo nelle pagine category.php o delle animazioni stile “SuperGulp!” (per chi se lo ricorda…).
Gran bella soluzione, non trovate? Allora forza, mano ai mouse!!!

INTRODUZIONE
Prima cosa da fare è recuperare la jQuery che permette di creare gli slideshow: Cycle2!
Quindi si passa a progettare il contenuto, decidendo cosa dovrà ciclare (o girare) in ogni slide dello slideshow e poi lo si realizzerà con poche, ma efficaci, righe di codice.
Nell’esempio che vi mostrerò, richiamerò le anteprime dei post di una ben precisa categoria e li farò ciclare con un effetto a dissolvenza.

PARTE PRIMA: RECUPERIAMO CYCLE 2
Potete recuperare la jQuery a questo indirizzo: http://malsup.github.io/min/jquery.cycle2.min.js
Si tratta di una pagina di codice, salvatela in una directory del vostro sito, va bene anche nella directory principale, e poi caricatela online nello spazio hosting del vostro sito, via FTP. Adesso la jQuery è online ad un indirizzo simile a questo: http://www.nomedelsito.it/jquery.cycle2.min.js
A questo punto aprite il file header.php nella cartella del vostro tema attivo e inserite queste righe di semplice codice prima del comando wp_head():

	<script src="http://www.nomesito.it/jquery.cycle2.min.js"></script>
	<script type="text/javascript"> <!-- updatepage();//--> </script>

<?php wp_head(); ?>
</head>
<body>

PARTE SECONDA: CREIAMO IL CONTENITORE PER LO SLIDESHOW
A questo punto il Cycle2 verrà caricato nel vostro sito, ora possiamo iniziare a creare lo slideshow.
Come detto lo utilizzeremo per prelevare le anteprime di alcuni articoli relativi ad una categoria, ad esempio la categoria che abbia come slug: “news” e poi, con un bottone, li collegheremo all’articolo originale.
Cycle2 si attiva automaticamente su qualsiasi elemento dell’HTML che abbia una class=”cycle-slideshow” e poi cerca al su interno interno gli elementi da far ciclare. Nell’esempio che segue, lo slideshow si trova nell’index.php e lo faremo girare in una <ul>. Tramite il parametro inline data-cycle-slides=”li”, diamo indicazioni a Cycle2 che intendiamo far ciclare tutti gli elementi <li> all’interno di questa <ul>.
Quindi aprite il file index.php e inserite questo codice proprio dentro al container principale in modo che lo slideshow appaia sotto la testata:

<ul id="carosello" class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="fade" data-cycle-speed="1000">

<li></li>
...
<li></li>

</ul>

Analizziamo questo codice.
La <ul> ha un id=”carosello”, che ho inserito io per controllarla via CSS, poi c’è la class=”cycle-slideshow” che provvede a trasformarla automaticamente in uno slideshow. Segue un data-cycle-slides=”li” che è il comando per indicare a Cycle2 che gli elementi da far ciclare sono i <li> che staranno dentro a questa <ul>. Invece data-cycle-fx=”fade” applica all’animazione l’effetto di dissolvenza incrociata, molto elegante. Infine data-cycle-speed=”1000″ impone alle dissolvenze la durata di un secondo (mille millisecondi). Naturalmente potete anche modificare questi parametri ed aggiungerne degli altri secondo le indicazioni riportate sul sito ufficiale, che poi vi indicherò.

Ora vediamo i CSS associati alla <ul>.
La id=”carosello” potete regolarla come preferite, basta che gli diate:

  • un overflow: hidden;
  • una larghezza uguale a quella del <div> che la contiene
  • e un’altezza ben definita
I <li> dovranno avere il list-style: none.
Ecco un esempio:
#carosello {
	width: 990px;
	height: 298px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	overflow: hidden;
}
#carosello li{
	list-style: none;
	width: 990px;
	height: 298px;
	box-shadow: inset -3px 3px 3px #ddd, inset 3px -3px 3px #fff;
}

PARTE TERZA: IL CONTENUTO DELLO SLIDESHOW
Adesso passiamo al codice per recuperare le anteprime degli articoli da ciclare nello slideshow. Ecco il codice, dopo lo commenteremo:

<ul id="carosello" class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="fade" data-cycle-speed="1000">

<?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
	<li>
	<a href="<?php the_permalink() ?>">
	<div class="miniatura"><?php the_post_thumbnail('medium'); ?></div>
	<div class="testo-wrap"><p class="titolo"><?php the_title(); ?></p>
	<?php the_excerpt(); ?></div>
	</a>
	</li>
   <?php endwhile; ?> 
   <?php else: ?>
   <?php endif; ?>

</ul>

Come potrete notare il loop che ho adoperato è molto semplice e per ora richiama gli ultimi articoli da tutte le categorie.
Dopo il while inizia il primo <li> che verrà poi duplicato finché ci sono articoli e secondo il massimale che avete impostato nel pannello di controllo di WordPress alla voce Impostazioni/Lettura.
Quindi ho inserito un tag <a> per trasformare tutto il contenuto del <li> in un link all’articolo originale, grazie alla funzione the_permalink() propria di WordPress.
Dentro al tag <a> c’è poi un <div> con class=”miniatura” che contiene il comando the_post_thumbnail(‘medium’) che recupera l’immagine in evidenza del relativo articolo, in formato medio.
Un secondo <div>, con class=”testo-wrap” circonda sia il titolo, richiamato con la funzione the_title(), sia il riassunto dell’articolo che verrà visualizzato in un <p> dalla funzione the_excerpt().
Per il titolo non ho utilizzato nessun tag header (h1, h2, ecc.) perché non vorrei che i robot facessero confusione vedendo troppi titoli, ma probabilmente si tratta di una mia paranoia, potete tranquillamente utilizzare un h3 o h4. In questo caso invece, a contorno del titolo, c’è un <p> con class=”titolo”.

Ecco di seguito dei CSS che possono aiutarvi a stilizzare gli elementi qui sopra:

.miniatura {
	float: left;
	margin-right: 40px;
	top: -40px;
	box-shadow: 3px 0 3px #fff;
}
.testo-wrap{
	margin: 100px 0 0 0;
}
.titolo {
	font-size: 34px;
	font-family: 'sorts mill goudy', sans-serif;
	color: #bc890f;
	text-shadow: -1px 1px 3px #aaa;
}

Se volete vedere il risultato, ecco un link da visitare.

PARTE QUARTA: RAFFINIAMO IL CODICE
In questo modo otteniamo un bello slideshow, che però possiamo raffinare indirizzandolo ad una categoria ben precisa ed impostando un numero di articoli diverso da quello indicato nelle impostazioni di WordPress.
Per farlo basterà utilizzare l’oggetto WP_Query(), in questo modo:

<ul id="carosello" class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="fade" data-cycle-speed="1000">

<?php if (have_posts()) : 
   $the_query = new WP_Query( 'category_name=news','posts_per_page=3');
   while ($the_query->have_posts()) : $the_query->the_post(); ?>
	<li>
	<a href="<?php the_permalink() ?>">
	<div class="miniatura"><?php the_post_thumbnail('medium'); ?></div>
	<div class="testo-wrap"><p class="titolo"><?php the_title(); ?></p>
	<?php the_excerpt(); ?></div>
	</a>
	</li>
   <?php endwhile; ?> 
   <?php else: ?>
   <?php endif; ?>

</ul>

Così facendo, il loop recupererà gli ultimi 3 articoli della categoria “news”.
L’oggetto WP_Query(), come ben saprete, offre molte altre possibilità, evitando di effettuare chiamate dirette al DB, lasciando così ampi spazi per personalizzare ulteriormente questo slideshow.
Ho preferito richiamare solo 3 articoli perché, a mio parere, uno slideshow deve presentare solo poche informazioni per poterlo fare al meglio.

CONCLUSIONE
Per concludere questo articolo, che spero potrà essere utile, notifico che Cycle2 è veramente molto completo e, studiando un po’ le semplici API disponibili, è possibile inserire molti accessori, tra cui:

  • bottoni per saltare alla slide successiva o tornare alla precedente
  • un contatore per informare a quale slide è arrivato lo slideshow
  • il bottone per la pausa
  • scegliere altri tipi di transizioni tra una slide e l’altra
  • ecc.

Ma per una lista più completa, vi indirizzo al sito ufficiale.

Tenete poi conto che, benché io nell’esempio abbia fatto ciclare delle anteprime di articoli generate con un loop, è possibile anche inserire nelle slide delle semplici immagini. Ecco un ultimo esempio:

<ul id="carosello" class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="fade" data-cycle-speed="1000">

<li><img src="mia-immagine-01.jpg" /></li>
<li><img src="mia-immagine-02.jpg" /></li>
<li><img src="mia-immagine-03.jpg" /></li>

</ul>

Buon carosello a tutti!

Facebook Twitter Pinterest Email