CSS Gallery con Wordpress

Le CSS Gallery sono sempre più numerose, così come numerosi sono i dubbi sulla loro reale utilità.
In questo articolo vogliamo semplicemente mostrarvi come crearne una in pochi minuti, dando per scontato che se avete deciso di realizzarne una lo avrete sicuramente fatto con un’idea di originalità rispetto alle altre gallery già esistenti.

Per partire, dovete ovviamente disporre di una copia di Wordpress installata e configurata.
A questo punto, scaricate da OsDesigner.net il tema CSS Gallery: si tratta di un tema progettato appositamente per la creazione di una gallery, validato XHTML 1.0 e CSS, predisposto per l’inserimento di annunci pubblicitari, comprensivo di paginazione, suddivisione in “tabs” dei contenuti della barra laterale e tag cloud. Scaricatelo, copiatelo nella cartella dei temi e attivatelo tramite il pannello di amministrazione di Wordpress.

Procuratevi ora i seguenti plugin:

  1. Thumbnail Size
  2. WP-PostRatings

Installiamoli e attiviamoli. Per quanto riguarda il primo, serve ad impostare una dimensione fissa per le miniature delle immagini caricate: secondo le impostazioni di default del tema, il plugin va settato (sotto Opzioni / Thumbnail Size) a 225px; nel caso in cui vogliate personalizzare la grafica, potete ovviamente cambiare il settaggio a vostro piacimento.
Il secondo plugin serve invece a permettere la votazione dei post (quella con le classiche stelline, per intenderci).
Andate su Rating / Rating Options, scegliete lo stile grafico che preferite e settate l’opzione “Show loading image with text” su “no”. Scorrete verso il fondo della pagina, troverete un riquadro dal nome “Rating Templates”.
Sostituite i valori presenti con quelli riportati qui:

1. Ratings Vote Text:
<span>%RATINGS_USERS% voti, punteggio: %RATINGS_AVERAGE%</span>%RATINGS_IMAGES_VOTE%

2. Ratings Voted Text: <span>%RATINGS_USERS% voti, punteggio: %RATINGS_AVERAGE%</span>%RATINGS_IMAGES%

3. Ratings No Permission Text:<span>Devi effettuare il login per votare</span>%RATINGS_IMAGES%

4. Ratings None: <span>Nessun voto</span>%RATINGS_IMAGES_VOTE%

Fatto! La nostra gallery è ora pronta per funzionare.
Vediamo ora come postare il primo sito: dalla schermata “Scrivi” carichiamo l’immagine (se non facciamo modifiche al tema, non dovrà superare i 500px in larghezza) e inviamola all’editor con le opzioni “Visualizza miniatura” e link a “File”. Cliccando su “Codice sorgente” vedremo il tag che richiama l’immagine (la miniatura) e il relativo link all’immagine ingrandita.
Scorriamo ora più in basso e andiamo a creare i tre campi personalizzati (questa operazione serve solo per il primo post, per quelli successivi dovremo solamente riempire i campi in questione): image, dove inseriremo il link dell’immagine a grandezza naturale (copiandolo dal codice sorgente); thumbs, dove inseriremo il link della miniatura (come sopra) e infine url dove inseriremo il link del sito che abbiamo postato. Inseriamo eventuali tag, selezioniamo le categorie, e siamo pronti per la pubblicazione!

Personalizzazioni
Rimangono ancora alcune cosette da sistemare: se vogliamo sistemare i nostri annunci pubblicitari dobbiamo editare i files google.php e ads.php. Inoltre sarà bene inserire una form che permetta ai nostri visitatori di suggerisci un sito, o semplicemente di contattarci: possiamo ad esempio installare uno dei numerosi plugin per Wordpress che permettono la creazione di una form di contatto, oppure inserire un semplice form-to-mail in Ajax.

Possiamo infine sfruttare la funzionalità dei campi personalizzati per aggiungere nuovi contenuti ai post. Ad esempio, se vogliamo inserire una descrizione per ogni sito postato, possiamo inserire un nuovo campo personalizzato chiamato desc, che richiameremo inserendo nel file single.php la seguente riga:

<p>
<?php $values = get_post_custom_values(”desc”); echo $values[0]; ?>
</p>

nel punto in cui vogliamo che venga visualizzata la descrizione.

Ultimo ma non meno importante è il lavoro di personalizzazione grafica, indispensabile per dare un’identità alla nostra gallery.
In uno dei prossimi articoli vedremo come fare per gestire una CSS Gallery che contenga anche dei normali post testuali.



Altri articoli che potrebbero interessarti