Durante la scorsa lezione, abbiamo affrontato il processo di personalizzazione del nostro sito Web utilizzando WordPress e il plugin Advanced Custom Fields (ACF). Durante questa fase ci siamo concentrati sulla creazione dei campi personalizzati per le pagine che compongono il sito. Consentendo così la modifica e la personalizzazione dei contenuti in base ad esigenze specifiche e di andare oltre a quelli che sono i campi messi a disposizione di default da WordPress.
A questo punto è tempo di ottimizzare maggiormente le nostre pagine e di renderle ancora più dinamiche grazie all'inserimento di elementi animati come gallerie fotografiche, slider ed altri effetti in grado di dare un aspetto ancor più moderno e dinamico al sito Web.
Partiamo come al solito dalla prima pagina, la situazione attuale della Home Page è la seguente:
Come creare una galleria slider personalizzata con WordPress
Nelle scorse lezioni abbiamo evitato di personalizzare il <div> chiamato slideshow per il semplice motivo che era necessario dedicare il giusto tempo a questa customizzazione. Ora è giunto il momento di entrare nel merito.
Creare una galleria slider personalizzata con WordPress, HTML e CSS
Lo sviluppo di una galleria slider animata può essere effettuato in modi diversi. Esistono infatti molteplici soluzioni che permettono di raggiungere risultati molto simili tra loro. Questo non può essere che un bene in quanto potremo usare un metodo estremamente personalizzato per creare ogni singolo elemento.
Iniziamo scaricando una libreria essenziale per la creazione dello slider: OWL Carousel.
Owl Carousel è una libreria JavaScript open source ampiamente utilizzata per la creazione di slider di immagini o carousel dinamici all'interno di siti e applicazioni Web. È un plugin basato su jQuery che offre una soluzione semplice ed elegante per creare slider interattivi e responsive.
Grazie alle sue numerose opzioni di personalizzazione è diventato uno strumento popolare tra gli sviluppatori Web per migliorare l'esperienza degli utenti nella navigazione di contenuti visivi su diverse piattaforme. Garantisce inoltre un'elevata compatibilità cross-browser, il che lo rende perfetto per funzionare su una vasta gamma di applicazioni. Garantendo accessibilità ed un ottima esperienza utente.
Procediamo con il download della libreria e con la procedura guidata all'installazione di OWL situata all'interno della voce "Docs".
Come prima cosa includiamo all'interno di una cartella dedicata i file che compongono la libreria.
CSS:
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">JavaScript:
<script src="owlcarousel/owl.carousel.js"></script>
Richiamiamo poi i file all'interno della pagina header.php.
Passiamo poi alla creazione della struttura che darà forma allo slider, inserendola all'interno del <div> chiamato slideshow situato nella pagina front-page.php.
<div id="slideshow">
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
</div>È molto importante che il <div> contenitore abbia come nome della classe owl-carousel. Questa classe servirà infatti da attivatore dell'animazione.
Inseriamo quindi le regole jQuery per consentire alla libreria di attivare le sue funzioni. Facciamo ciò all'interno del file header.php in modo da richiamarle, all'occorrenza, in tutte le pagine.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".owl-carousel").owlCarousel();
});
</script>Il codice jQuery appena inserito richiama la regola base per attivare la libreria. All'interno della documentazione è possibile trovare l'elenco delle regole complete per poter personalizzare la nostra galleria.
Aggiorniamo ora le regole nel modo seguente. Componendo uno slider ancora più completo:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".owl-carousel").owlCarousel({
items : 1,
autoplay:true,
nav: true,
navText: ["",""],
loop: true,
//touchDrag: false,
//mouseDrag: false,
autoplayTimeout:3000,
responsive : {
// breakpoint from 0 up
0 : {
items: 1,
//nav: false,
},
// breakpoint from 480 up
480 : {
items: 1,
},
// breakpoint from 768 up
768 : {
items: 4,
}
}
});
});
</script>
Immagini e movimento
Ora lo slider funziona e permette lo scorrimento anche tramite "drag and drop" gli elementi. A questo punto non rimane altro che modificare gli elementi inserendo le immagini e adattando il movimento all'effetto che vogliamo ottenere
<div class="owl-carousel">
<div class="immagine_slider"></div>
<div class="immagine_slider"></div>
<div class="immagine_slider"></div>
<div class="immagine_slider"></div>
<div class="immagine_slider"></div>
</div>Quello che faremo sarà usare i <div> inseriti all'interno del contenitore owl-carousel come slide della galleria ed inserire al loro interno le immagini (come background) in modo tale da ottenere l'effetto slideshow.
Dobbiamo poi richiamare le immagini. Ancora una volta useremo il plugin ACF che ci consentirà di caricare le immagini attraverso WordPress.
Creiamo un nuovo gruppo di campi personalizzati chiamato "Slideshow Home Page" ed inseriamo al suo interno 5 slot di tipo "immagine".
Andiamo quindi all'interno della Home Page e selezioniamo le fotografie che vogliamo compaiano nello slider.
A questo punto non rimane che richiamarle via codice nella pagina front-page.php.
Dobbiamo infine impostare il numero di slide a 1 variando il valore items:1 e aggiornando lo script.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".owl-carousel").owlCarousel({
items : 1,
autoplay:true,
nav: true,
navText: ["",""],
loop: true,
//touchDrag: false,
//mouseDrag: false,
autoplayTimeout:3000,
responsive : {
// breakpoint from 0 up
0 : {
items: 1,
//nav: false,
},
// breakpoint from 480 up
480 : {
items: 1,
},
// breakpoint from 768 up
768 : {
items: 1,
}
}
});
});
</script>