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

Aggiornato il

Che cosa sono e come funzionano le immagini in evidenza

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 (Fig. 1).

Immagni in evidenza nella homepage del sito Frukt

Fig. 1: Homepage del sito Frukt

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) (Fig. 2).

Pannello Immagine in evidenza

Fig. 2: Il pannello “Immagine in evidenza” nell’area di amministrazione di WordPress

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” (Fig. 3).

Pannello impostazioni schermo

Fig. 3: Il pannello “Impostazioni schermo”

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) (Fig. 4). Ricordati di cliccare il tasto a destra in basso “Imposta immagine in evidenza” per confermare!

Inserimento immagine in evidenza

Fig. 4: Caricamento dell’immagine in evidenza

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 (Fig. 2). 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 (Fig. 1)! 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?

Riferimenti dalla documentazione ufficiale di WordPress

di Mattia Frigeri

COMMENTI

  • ciao ma se ho un tema dove é già impostato il cambio lingua ed é tutto funzionante come posso far cambiare la featured image per la lingua corrispondente?
    ciao
    e grazie

    • Ciao, WordPress di default non permette il “multilingua” in un sito. Il che significa che con tutta probabilità nella tua installazione è stato aggiunto un plugin: il migliore che conosco è WPML, per caso si tratta di questo? Da questa informazione dipenderà la risposta alla tua domanda.

  • Ciao! Sai come si fa ad abilitare i commenti sotto i progetti? Io ho un blog su WordPress, e scegliendo tra vari temi possibili ne ho impostato uno che mi permettesse di avere in homepage l’anteprima degli articoli sotto forma di immagini. In realtà, mette nella homepage solo i progetti (le loro immagini in evidenza, ovvio), ma non gli articoli: così ho trasferito tutto da “articoli” a “progetti” (tra l’altro, facendo impazzire tra i link i poveri utenti che con google arrivano da me) e ora mi trovo con zero feedback perchè ho appena scoperto che sono disabilitati sia i commenti che i like ai progetti.
    Scusa del papiro e se sono stata ripetitiva…
    Grazie dell’attenzione! :)

  • Ciao: io ho già un tema di quelli gratuiti ma voglio spostare l’immagine in evidenza che ora si trova in home page di fianco agli articoli, all’interno del riquadro dell’anteprima degli articoli e all’inizio, magari scrivendo anche il nome dell’autore. Come posso fare?

    • Ciao, dipende: il tuo sito è ospitato su wordpress.com? In questo caso non puoi modificare nulla, perché non hai accesso ai files del tema. Se invece qualcuno te l’ha installato su un dominio di tua proprietà, probabilmente hai la possibilità di apportare le modifiche grafiche di cui hai bisogno. Certo, per farlo (dato che dall’area di amministrazione, a quanto ho capito, non puoi) ti servirà l’aiuto di un tecnico che sappia dove mettere le mani!