WordPress: immagini in evidenza (featured images) all’interno di articoli (post) e pagine

2013/12/19
wordpress

Ogni tema di WordPress che si rispetti (gratuito o a pagamento), sfrutta le immagini in evidenza (chiamate featured images nella versione inglese). Si tratta di immagini che carichi normalmente, ma che puoi abbinare attraverso un particolare procedimento ad una pagina o ad un articolo. Nella maggior parte dei casi sono sfruttate come anteprime all’interno della homepage: in una lista di notizie, una serie di ultimi lavori, ecc.

La home del sito Frukt ad esempio, usa le immagini in evidenza per mostrare i “progetti recenti”: ad ogni singolo progetto è abbinata infatti un’immagine.

A livello grafico, queste immagini stimolano l’interesse del visitatore, spingendolo ad approfondire l’argomento (prova a pensare se al posto di tutte quelle foto ci fosse stato solo del testo: la sezione “latest projects” sarebbe stata molto meno accattivante!).

Se il tema che hai acquistato o scaricato gratuitamente supporta quindi le immagini in evidenza, usarle è molto facile: all’interno dell’articolo o della pagina in questione, vedrai in basso a destra il pannello “Immagine in evidenza” (o “Featured image”, a seconda della lingua in cui WordPress è stato installato).

Se non riesci a trovarlo, i casi sono due: o il tuo tema non le supporta (e allora puoi metterci una pietra sopra), oppure senza volere hai disattivato la visualizzazione a schermo di quel pannello. Riattivalo quindi aprendo la tendina “Impostazioni schermo” (in alto a destra nell’area di amministrazione) e spuntando la relativa casella “Immagine in evidenza”.

Una volta accertato che il pannello sia al suo posto, clicca sul link “Imposta l’immagine in evidenza”, e ti apparirà l’interfaccia per inserire il file di immagine (potrai prenderlo direttamente dalla libreria dei media di WordPress, o sfogliarla sul tuo computer). Ricordati di cliccare il tasto a destra in basso “Imposta immagine in evidenza” per confermare!

A seconda di come è stato progettato il tema che stai usando, l’immagine in evidenza apparirà in un’area specifica del sito: potrebbe essere nell’homepage, nella pagina dei “lavori in corso”, o da qualche altra parte; la scelta è stata presa in precedenza dal designer che l’ha creato, quindi considera che su questo punto hai zero o pochissimo controllo. Ovviamente, ti consiglio di controllare molto bene la documentazione del tema che stai usando per sapere in che dimensione e modalità caricare correttamente le immagini!

Si conclude così la prima parte di questo tutorial. Se invece sei tu stesso un designer di temi per WordPress e ti interessa capire come implementare le immagini in evidenza nel tuo progetto, il resto dell’articolo è stato scritto apposta per te.

Utilizzare le immagini in evidenza in un tema che stai disegnando tu

Si entra ora in una fase leggermente avanzata, quella per cui sei tu, sviluppatore o designer, a decidere se abilitare o meno le immagini in evidenza all’interno del tuo tema: sta a te scegliere anche il punto esatto in cui farle apparire. Tralascerò volontariamente alcuni aspetti chiave sul funzionamento del motore di WordPress, dando per scontato che se sei arrivato a leggere fino a qui, un minimo di ciò ti sia già familiare: sai già per esempio che WordPress ruota tutto attorno ad una serie di “file base” chiamati templates.

Bene! Per prima cosa, un tema che supporta le immagini in evidenza deve prima esplicitamente dichiararlo: proprio come alla dogana, quando fai presente agli ufficiali quello che possiedi. Ma un template di WordPress non è una persona, e le sue “dichiarazioni” le fa attraverso il file functions.php, spesso presente nella sua cartella principale (attenzione: functions.php è un file “opzionale”, e se non c’è ti basta semplicemente crearlo!).

Le immagini in evidenza sono considerate una “feature opzionale”, per cui all’interno del file functions.php (che serve apposta ad implementare tutte le funzionalità aggiuntive), scriverai:


<?php
    add_theme_support('post-thumbnails'); 
?>

Questa stringa di codice php (il linguaggio al cuore del CMS WordPress) abilita una volta per tutte le immagini in evidenza: ti apparirà ora in ogni pagina o articolo il relativo pannello di gestione. Questo è il modo più semplice per attivarle, ma non è l’unico: ci sono ovviamente una marea di opzioni aggiuntive che volendo puoi dichiarare, ma che esulano dallo scopo di questo tutorial.

A questo punto hai “abilitato” le immagini in evidenza per il tema che stai progettando: ma il tuo lavoro non finisce qui! Devi ancora indicare dove e come debbano comparire tra le pagine del tuo sito. E per farlo, devi mettere mano ad almeno un altro file template di WordPress.

Mostrare l'immagine in evidenza all'interno della homepage

Supponiamo per esempio che tu voglia caricare le immagini in evidenza all’interno della homepage (piuttosto che all’interno della testata di un articolo, nella pagina dei “progetti”, o in un’altra posizione): in questo caso devi aprire il file index.php o front-page.php (nel 99% dei casi è uno di questi due), e copiare al suo interno:



<ul class="progetti-recenti">

    <?php
    $progetti_recenti = new WP_Query('category_name=progetti-recenti');
    while($progetti_recenti->have_posts()) : $progetti_recenti->the_post();
    ?>

        <li>

            <!-- IMMAGINE IN EVIDENZA -->
            <?php if( has_post_thumbnail()) { the_post_thumbnail(); } ?>

            <h3><?php the_title(); ?></h3>
            <p><a href="<?php the_permalink(); ?>">READ MORE</a></p>

        </li>

    <?php
    endwhile;
    wp_reset_postdata();
    ?>

</ul>

In questo caso hai sfruttato la famosa WP_Query di WordPress per creare una lista (<ul>) dei progetti più recenti (cioè quelli appartenenti alla categoria Progetti recenti), ed hai abbinato ad ognuno di essi:

Un’immagine (in evidenza)
Un titolo <h3>
un link “READ MORE” (leggi di più)

E’ proprio questo il caso del sito Frukt! Di tutto il codice che ho scritto sopra, il solo che serve a richiamare l’immagine in evidenza di ogni singolo progetto è questo:



<?php if( has_post_thumbnail()) { the_post_thumbnail(); } ?>

La lista che hai appena creato potrà essere stilizzata come una normale lista di un sito statico: probabilmente sfrutterai la classe progetti-recenti (abbinata all’oggetto ul) per assegnare varie proprietà all’interno del tuo CSS.

Per concludere...

Le operazioni che puoi fare con le immagini in evidenza non finiscono certo qui, e ci sono tantissime altre casistiche che verrebbe la pena di studiare. E se dovessi essere tu a scegliere, che cosa ti piacerebbe approfondire di questo argomento?