Inserire l’immagine di anteprima di un articolo in homepage in WordPress

Può capitare di voler inserire l’immagine di anteprima (thumbnail) dell’articolo direttamente in homepage… infatti alcuni temi, specialmente quelli gratuiti, non offrono questa soluzione (ecco anche il motivo per cui consiglio di acquistare i temi professionali). Ma non disperarti, in questo articolo ti guiderò alla modifica del tema per inserire le immagini di anteprima in homepage, il tutto in pochi minuti (si spera ;)).

Questo è il risultato finale che ho ottenuto:

Parola d’ordine: backup

Per prima cosa, scarica via ftp l’intera cartella del tuo tema che trovi in wp-content/themes/nome-tema/ , giusto per avere un po’ più di sicurezza e tranquillità nel caso di errori.

Prima di partire è bene che tu capisca cos’è il tema child e perchè dovresti usarlo.

Il tuo tema supporta le thumbnails?

Controlla se nel file functions.php del tema che hai scaricato è presente il seguente codice:

[php]
add_theme_support( ‘post-thumbnails’ );
[/php]

Se è presente, non devi fare niente.

Se invece non è presente, allora devi inserire prima dell’ultimo tag ?> nel file functions.php del tema che vuoi modificare (child o originale)  il seguente codice:

[php]
add_theme_support( ‘post-thumbnails’ );
[/php]

Ora il tuo tema supporta le thumbnails 🙂

Inserisci le thumbnails in homepage

Apri il file che genera l’homepage, solitamente è index.php. Come fare a capire se è il file corretto? Leggi l’articolo come e dove modificare WordPress.

Cerca il punto in cui è presente il codice the_content oppure the_excerpt. Prima di tale codice, inserisci questo:

[php]
<!– Codice per mostrare l’immagine di anteprima in homepage by Roberto Iacono di robertoiacono.it –>
<div class="postThumb">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(‘thumbnail’);
}
else {
echo ‘<img src="Digita l URL della immagine di default" />’;
}
?>
</a>
</div>
[/php]

In pratica, se l’articolo ha un’immagine in evidenza, mostra la miniatura (thumbnail) dell’immagine in evidenza associata al post stesso, all’interno di un contenitore div (con classe class=”postThumb”), il quale permetterà una gestione semplificata dello stile tramite codice CSS. Altrimenti, mostra un’immagine di default, che dovrai indicare inserendo l’URL dell’immagine alla riga 9.

Ora dovresti veder comparire qualcosa in homepage! Se l’aspetto è orribile, non ti preoccupare… presto rimedierai 🙂

Le miniature vengono mostrate in homepage, ma è possibile che vengano mostrate anche nella pagina categorie, tag, search, a seconda di come è strutturato il codice. Per mostrare le immagini solamente in homepage, dovrai inserire questa condizione:

[php]
<?php if(is_home()) : ?>
CODICE CHE TI HO FORNITO SOPRA
<?php endif; ?>
[/php]

Imposta le dimensioni delle miniature

Prima di tutto, devi decidere le dimensioni delle thumbnail. Molti utilizzano le classiche 150×150 oppure 100×100, probabilmente sono le migliori per diffondere i contenuti sui social network (che sono ottimizzati per creare le miniature quadrate), altrimenti puoi osare un po’ di più con miniature rettangolari.

Per impostare queste dimensioni, vai su Impostazioni > Media > Dimensione Miniatura > :

Digita le dimensioni e salva.

Se hai già caricato delle immagini, dovrai rigenerare tutte le miniature a mano… Scherzo! 😛 Mi sarebbe piaciuto vedere la tua espressione suicida 🙂 Utilizza il plugin Regenerate Thumbnails per questo scopo. Installalo e premi il pulsante Regenerate All Thumbnails nella pagina delle impostazioni del plugin, niente di più semplice.

Un po’ di stile

È ora di passare allo stile delle miniature. Aggiungi il seguente codice nell’ultima riga del file style.css:

[css]
/* Stile per la miniatura in homepage by Roberto Iacono di robertoiacono.it */
.postThumb{
float:left;
margin:15px 10px 15px 0;
display:block;
}
.postThumb img{
border:none;
background:#F0F0F0;
padding:1px;
border:1px solid #ccc;
}

[/css]

Questo codice aggiunge un bordo sottile ma elegante ed un piccolo un margine attorno all’immagine. Lo stile float:left, serve per poter contornare l’immagine con il testo, quindi otterrai il seguente risultato: immagine a sinistra, testo a destra.

Come impostare l’immagine da mostrare in homepage?

Dopo che hai inserito tutto il codice, non ti resta altro da fare che impostare quale immagine mostrare in homepage per ogni articolo. Per farlo, WordPress mette a disposizione il box Immagine in evidenza durante la modifica/creazione dell’articolo:

Se non vedi questo box, vai in alto a destra, premi su Impostazioni schermo e seleziona la casella Immagine in evidenza.

In questo box, premi il link Imposta l’immagine in evidenza e seleziona l’immagine che vuoi che venga mostrata in homepage… niente di più semplice.

Ricordati che dovrai fare questo procedimento a mano per tutti i nuovi post! Per i vecchi articoli, puoi utilizzare il plugin Auto Featured Image che permette di assegnare in automatico tutte le immagini in evidenza dei vecchi articoli, risparmiandoti un sacco di lavoro.

Dì la tua

Hai qualche suggerimento da dare per lo stile della miniatura? Scrivilo nei commenti qui sotto… e goditi le tue nuove immagini di anteprima!