L’autore può aggiungere un’immagine, in WordPres immagine in evidenza, che può essere visualizzata nell’anteprima di ogni post, sempre che il tema supporti questa funzionalità.

Nell’immagine seguente viene mostrata la sezione dell’immagine in evidenza presente nella pagina utilizzata per la scrittura o la modifica di un articolo.

La sezione immagine in evidenza di WordPress

La sezione immagine in evidenza di WordPress

Abilitare l’immagine in evidenza nel file function.php

Per abilitare l’immagine in evidenza è necessario modificare il file functions.php del proprio tema inserendo la funzione add_theme_support(), come mostrato nel seguente esempio.

add_theme_support( 'post-thumbnails' );

Modificare i modelli del tema

Dopo aver abilitato le immagini in evidenza, per visualizzarle correttamente nel proprio tema si può utilizzare la funzione the_post_thumbnail().

Aprire il file modello del proprio tema in cui viene visualizzata l’anteprima del post, ad esempio il file index.php, archive.php o content.php, e modificare la parte del ciclo di visualizzazione dei post inserendo la funzione the_post_thumbnail(), nella sezione in cui si vuole visualizzare l’immagine.

…
<div class="post-meta">
<p>Pubblicato il ... </p>

</div><div class="post-content">
<?php if ( has_post_thumbnail() ) { ?>
<div class="cover">
  <a href="<?php the_permalink()?>"><?php the_post_thumbnail()?></a>
</div><?php } ?>
<?php the_content("Leggi l'articolo..."); ?></div>
…

Per collegare il post all’immagine usare la funzione the_permalink() come valore dell’attributo href del collegamento che circonda l’immagine in evidenza.

La funzione has_post_thumbnail() restituisce un valore boleano (true/false) in modo che tutto il codice di marcatura utilizzato per visualizzare l’immagine in evidenza sia inserito solo se l’immagine è stata associata al post.

Il codice di marcatura utilizzato nell’esempio (l’elemento div con classe cover) non è vincolante ma è utile per applicare all’immagine degli stili css.

Personalizzare lo stile

Lo stile dell’immagine in evidenza può essere modificato utilizzando la classe predefinita che WordPress aggiunge a ciascuna immagine.

.wp-post-image {/* 
  Stile per le immagini in evidenza */
}

Inoltre, è sempre possibile inserire all’interno del file modello in cui compare l’immagine in evidenza un elemento html al fine di poter applicare gli stili css necessari per integrare correttamente l’immagine nel proprio tema.

Per altre informazioni consultare la guida ufficiale di WordPress.