Come personalizzare l’html della Galleria di default di WordPress

Nel mio precedente articolo abbiamo visto come creare uno shortcode personalizzato e ho lasciato in sospeso l’esempio della personalizzazione dello shortcode [gallery], ovvero un modo per creare diversi tipi di presentazione frontend per la galleria di default presente su WordPress.

Oggi vedremo assieme un esempio completo per creare uno slideshow di immagini partendo da una galleria inserita nell’editor del backend di WordPress.

 galleria-wordpress

Faccio prima un passo indietro e vi ricordo le motivazioni che mi hanno spinto a cercare un modo per personalizzare l’output HTML di presentazione dello shortcode [gallery] del nostro CMS preferito:

  • l’html generato contiene le miniature delle immagini con link alla versione originale dell’immagine stessa (o peggio alla relativa pagina di tipo Media). Noi, però, vogliamo realizzare uno slideshow con immagini grandi e ci serve una particolare struttura html per far funzionare il plugin jQuery di turno che intediamo usare.
  • l’utilizzatore finale del nostro sito WordPress è il cosidetto “utonto” e dobbiamo quindi fornirgli un modo semplice per creare il suddetto slideshow scegliendo le immagini che preferisce. Certo, potremmo sviluppare un plugin personalizzato con tanto di pulsante integrato nell’editor TinyMce ma… ne avreste davvero il tempo e la voglia?

Bene, fatta questa necessaria premessa entriamo nel vivo di questa guida cominciando a delineare alcuni “requisiti” del nostro slideshow:

  • lo slideshow dovrà essere largo quanto la pagina in cui verrà posizionato. Nel nostro caso supporremo di avere a disposizione 600px
  • il nostro “utonto” caricherà immagini di dimensione variabile (nella maggior parte dei casi le foto provenienti dalla sua fantastica fotocamera digitale da 48 megapixel che produce file da 10 Mb l’uno :D )
  • Ci sarà una sola galleria in ogni pagina

La prima cosa da fare è definire una nuova dimensione per le immagini create automaticamente da WordPress quando si esegue l’upload di un file. Di default vengono creati 3 file (oltre all’originale) che corrispondono esattamente alle dimensioni impostate dal backend di WordPress: piccola (thumbnail), media (medium), grande (large).

Se una delle dimensioni predefinite rispecchia già i vostri requisiti potete tranquillamente usare uno dei valori scritti tra parentesi, al posto della nostra “slideshow-custom-dimension” che andremo ora a creare.

Un altro vantaggio nel creare una nuova dimensione è che il cropping a dimensione fissa si può impostare dal backend solo per la dimensione piccola (thumbnail).

Dato che il nostro “utonto” caricherà foto di qualsivoglia formato, dimensione e peso cercheremo di uniformare l’output finale per avere una certa “coerenza estetica”, non avere fastidiosi movimenti del layout dovuti ad immagini con diverse altezze e mantenere leggero il caricamento delle pagine.

Ecco il codice da inserire nel file functions.php del vostro tema:

add_image_size('slideshow-custom-dimension', 600, 400, true);

Grazie a questa riga di codice avremo a disposizione immagini per la nostra galleria slideshow con dimensioni esatte di 600x400px. L’ultimo parametro infatti comunica a WordPress di eseguire un cropping esatto.

Nel precedente articolo c’eravamo lasciati con questo snippet di codice che mostrava come sovrascrivere lo shortcode [gallery] presente nativamente su WP.

Eccolo:

/* questo rimuove lo shortcode nativo (in realtà non servirebbe)*/
remove_shortcode('gallery', 'gallery_shortcode');

add_shortcode('gallery', 'galleria_con_slideshow');

function galleria_con_slideshow($attr) {
$output = '<div>';
/* vostro fantastico codice per lo slideshow */
$output .= '</div>';
return $output;
}

Oggi completeremo la parte di codice che produce l’html per realizzare uno slideshow di immagini. Per la funzionalità di “scorrimento animato” mi sono affidato al famoso plugin jQuery Cycle quindi il markup che vedrete è creato appositamente per questo particolare script.

Non penso comunque che avrete difficoltà a personalizzare il codice per produrre il vostro personale slideshow o qualsiasi altro “design” desideriate.

Per non sbagliare :) sono partito direttamente dal codice originale dello shortcode WordPress che gestisce la galleria di immagini.

La funzione che andrò a sostituire si chiama gallery_shortcode e si trova nel file media.php all’interno della cartella wp-includes.

Proprio mentre scrivevo questo articolo ho notato che hanno aggiunto nella funzione nativa 2 interessanti parti che non troverete nella mia versione personalizzata, ma che voglio ugualmente commentare.

La prima è questa:

$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;

quindi esiste un filtro chiamato “post_gallery” che permette (ad esempio ad un plugin) di sovrascrivere l’html della galleria. I più attenti di voi si chiederanno: “perché non usare questo filtro per creare lo slideshow?”.

La risposta è semplice, non so se funziona! :)

Da quanto ho letto su alcuni forum sembra che questo filtro abbia dei problemi, perciò, dato che ho provato personalmente questo codice, lo presento così come funziona.

L’altra cosa interessante che ho trovato nel codice della funzione gallery_shortcode è questa:

if ( apply_filters( 'use_default_gallery_style', true ) )
	                $gallery_style = "
	                <style type='text/css'>
	                        #{$selector} {
	                                margin: auto;
	                        }
	                        #{$selector} .gallery-item {
	                                float: {$float};
	                                margin-top: 10px;
	                                text-align: center;
	                                width: {$itemwidth}%;
	                        }
	                        #{$selector} img {
	                                border: 2px solid #cfcfcf;
	                        }
	                        #{$selector} .gallery-caption {
	                                margin-left: 0;
	                        }
	                        /* see gallery_shortcode() in wp-includes/media.php */
</style>";

che permette sostanzialmente di rimuove gli stili css inline della galleria WordPress. Io li trovo davvero fastidiosi, voi?

Se siete d’accordo con me e non volete delle gallery con gli stili css dentro l’html aggiungete al vostro file functions.php questa riga di codice:

add_filter( 'use_default_gallery_style', '__return_false' );

Come personalizzare l’html della Galleria di default di WordPress

Vediamo finalmente il codice della nostra funzione galleria_con_slideshow che ci permetterà (finalmente) di creare lo slideshow.

Ecco il codice completo da inserire sempre nel file functions.php

Dato che è abbastanza lungo, ho commentato in modo esaustivo il codice per farvi capire bene i vari passaggi. Alcuni li ho “adottati” dal codice originale della funzione nativa di WP, altri (in particolare quelli dentro il ciclo foreach) li ho scritti io.

Vediamo velocemente i passi salienti:

  1. recupero il post corrente
  2. elaboro i parametri in ingresso (ids rappresenta gli identificativi numerici delle immagini selezionate per lo slideshow)
  3. recupero le immagini e ne ricavo l’html per lo slideshow
  4. carico file css e javascript (il plugin jQuery Cycle) aggiuntivi
  5. ritorno l’html generato (che sarà visualizzato poi in pagina lato frontend)

Fine!

Qui trovate la demo dello slideshow che si otterrà seguendo questo tutorial. Allego uno zip con un esempio statico dello slideshow che dovreste vedere nel vostro sito WordPress se seguite correttamente il tutorial.

All’interno trovate anche i file css e javascript da inserire nella cartella slideshow (il codice li cerca li) del vostro tema.

Spero abbiate trovato interessante questo articolo. Aspetto i vostri commenti… conoscevate già questa tecnica?

La utilizzerete? Avete provato il codice e qualcosa è andato storto?

Sono a disposizione per aiutarvi!

Tag: , ,

L'autore

Niki Rocco è Co-fondatore di Adviva, web agency specializzata nella realizzazione di siti web ed e-commerce con una particolare attenzione alla SEO e alla conversione/vendita. Ha una passione sfrenata per il web, la SEO e WordPress. Lo trovi su Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

  1. Come personalizzare l’html della Galleria...
    […] Nel mio precedente articolo abbiamo visto come creare uno shortcode personalizzato e ho lasciato in sospeso l’esempio della personalizzazione…
  2. WordPress per i tuoi clienti: semplificare l’interfaccia del popolare CMS – Parte 1 | Your Inspiration Web
    […] potrebbe sembrare a un “addetto ai lavori”. Già nei miei precedenti articoli “Personalizzare la galleria di WordPress” e “Come creare…