Circa un anno fa ho modificato il template base di wordpress twenty-ten per crearne uno personalizzato. Per realizzarlo avevo usato anche uno slideshow che mette in evidenza una serie di notizie. Inserire uno slideshow nel blog da un lato rende il sito più accattivante dall’altro rallenterà il caricamento della home, infatti per funzionare necessitano di jquery e di altri script javascript, personalmente per il momento ho deciso di non inserire nessuno slider. Se continuerai a leggere scoprirai come inserire uno slideshow nel blog.

Uno slideshow anche se pesante da renderizzare come componente potrebbe aiutare ad abbassare la frequenza di rimbalzo per tutti i navigatori online che approdano sulla home del vostro blog.
Esistono anche dei plugin che creano lo slideshow automaticamente, ma secondo me la soluzione migliore rimane quella di gestirlo manualmente e inserirlo da qualche parte nel template. Affinchè questo sistema funzioni dovrete curare al massimo le immagini che andrete ad associare alle alle notizie, perchè più metterete immagini di impatto più verranno lette. Per mantenere leggibile il vostro blog anche da dispositivi mobili vi consiglio di cercare di far sparire lo slideshow per risoluzioni più basse del normale.

Nivo Slider

Nivo Slider risulta essere uno slider leggero circa 15kb in questo modo non appesantirà il vostro sito. Utilizza tag standard per essere compatibile con tutti i browser e ha la particolarità di essere semantico, quindi dovrebbe essere indicizzato dai crawlers di google. Gli sviluppatori hanno creato sia la versione standalone sia il plugin per wordpress e potete vedere la demo e scaricarlo da questo indirizzo: http://nivo.dev7studios.com

Content Slider

Su css-tricks è stato pubblicato un tutorial molto chiaro che permette di realizzare uno slideshow per i contenuti. A differenza del nivo slider mostra anche delle immagini miniaturizzate cliccabili nella parte in basso.
Potete vedere la demo e scaricarlo da questo indirizzo: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider

JQuery Slideshow con sottotitoli

Seguendo il tutorial simple jquery slide show with caption ho creato uno slideshow con il thumbnail cliccabile di fianco se vi interessa potete scaricarlo o visualizzare il codice su github. Purtroppo questa cosa l’avevo fatta molto tempo fa e ora sembra che l’autore del tutorial abbia creato uno script migliore e non mantenga più quello vecchio. Non avendo molto tempo libero non credo che adatterò la versione con le miniature di fianco a quello nuovo. Ricorda che il codice di questo script non nè semantico e nè ottimizzato.

Ora diamo un occhiata al codice html:

Per personalizzarlo vi basterà aprire la pagina index.html e modificare la parte relativa alle immagini grandi che si trova dentro il div con id gallery (vedi codice sopra) modificando ovviamente il tag href dove bisogna inserire l’url che si desidera, nel tag src ci va il percorso/url dell’immagine e nel tag rel ci va il testo che appare in semitrasparenza. Per ogni foto che volete aggiungere dovrete inserire un tag con id ordinato crescente id=”content3″, id=”content4″ etc. e attribuirgli la classe con class=”show”. Come potete notare questo script non è per niente semantico e neanche standard c’è un h1 dentro rel, tuttavia qualcuno potrebbe prenderne spunto! 🙂

Poi bisogna modificare anche i thumbnail modificando il tag src dell’immagine in miniatura che si trova nel div thumb-container. L’attributo href deve contenere il cancelletto e il numero del content linkato.

Il codice che crea lo slidere e il thumbnail è nel file javascript SimpleSlideShow.js Se non cambierete il javascript le dimensioni delle immagini dovrebbero essere 400px per 200px le grandi e 90px per 50px quelle piccole.

Se conoscete anche voi degli slideshow ben fatti sentitevi liberi di segnalarli con un commento.