WordPress: aggiungere la immagine in evidenza nella pagina di dettaglio articoli

Fin dalla versione 2.9 WordPress consente di associare una immagine a ciascun articolo: originariamente chiamata Thumbnail Image (Miniature dei Post), tale funzionalità è stata rinominata in Featured Image (Immagine in Evidenza) nella versione 3.0. Associare l’immagine giusta a un articolo non è soltanto una ottima pratica a livello SEO, ma risulta anche fondamentale per migliorare sensibilmente il layout di tutte le pagine, moduli e widget che presentano un elenco di articoli, inclusa (quasi sempre) la Home Page: immaginate quanto sarebbero noiose quelle lunghe liste di titoli senza che vi sia una immagine a corredo di ciascuno di essi.

related-post-images
Le immagini in evidenza fanno bella mostra di sé nel widget “Related Posts” di questo blog.

Nella maggior parte dei casi, i temi WordPress più diffusi utilizzano le immagini in evidenza anche all’interno delle pagine di visualizzazione dei singoli post: in quei casi l’immagine è particolamente efficace perché può essere mostrata a tutto schermo, a patto ovviamente di avere le dimensioni minime necessarie.

related-post-images-single-post
Questa immagine risulta particolarmente efficace per dare risalto all’articolo.

Il Problema

Sfortunatamente, non tutti i temi WordPress hanno avuto questa intuizione: ne esistono infatti alcuni, come ad esempio il pur utilizzatissimo Ribosome, che non prevedono la possibilità di mostrare l’immagine in evidenza anche all’interno delle pagine di visualizzazione dei singoli articoli. Fortunatamente, il problema si può risolvere in pochi minuti, a patto ovviamente di avere un account con accesso Administrator. In questo articolo spiegheremo rapidamente come fare.

La Soluzione

La prima cosa da fare è accedere al pannello di amministrazione di WordPress: una volta lì, fate click su Aspetto > Editor, quindi selezionate il file Funzioni del tema (functions.php) e aggiungete le seguenti righe di codice PHP in fondo al file:

Sostituite quel 720 con la larghezza desiderata: se volete che l’immagine compaia a tutto schermo, dovete impostare la stessa dimensione in larghezza che la pagina di visualizzazione di un singolo post attribuisce all’elemento   oppure all’elemento  : nella maggior parte dei template questi due elementi hanno la stessa larghezza.

Una volta fatto questo,selezionate il file Articolo Singolo (single.php), cercate al suo interno il richiamo alla funzione   e inserite il seguente codice subito prima di questa:

Questo codice farà sì che l’immagine in evidenza compaia subito prima del testo dell’articolo, con le caratteristiche che abbiamo impostato nel file functions.php. Se volete che compaia prima del titolo, con un effetto simile a quello che potete vedere in questo blog, dovrete inserire il codice di cui sopra subito prima della funzione  , che con tutta probabilità si troverà qualche riga sopra.

Centrare l’immagine

L’implementazione che abbiamo appena realizzato risulta ottimale quando l’immagine ha una larghezza pari o superiore a quella prevista per l’articolo: in tutti i casi in cui l’immagine è più piccola, questa risulterà allineata a sinistra. Per risolvere il problema, è sufficiente intervenire sul file CSS del nostro tema (Aspetto -> Modifica CSS) e aggiungere la seguente istruzione:

Il codice di cui sopra farà sì che l’immagine sia sempre centrata rispetto all’articolo: ovviamente è solo un esempio, avete infatti la possibilità di inserire qualsiasi tipo di stile CSS: margini, padding, et. al.

Problematiche comuni

Se il file single.php del vostro tema WordPress non contiene alcun richiamo alle funzioni   e  , significa che il tema fa uso di un template separato per la visualizzazione dell’articolo. Dovrete quindi cercare un richiamo alla funzione , la quale viene utilizzata con uno o due parametri corrispondenti al nome file del template utilizzato. Ad esempio, il file single.php del sopracitato tema Ribosome contiene la seguente riga:

Questo significa che, per inserire la nostra immagine predefinita, dovremmo operare sul file content.php: al suo interno, con tutta probabilità, troveremo i riferimenti alle funzioni   e   che ci consentiranno di inserire il nostro codice nel punto giusto.

Riferimenti

Nel caso in cui vogliate approfondire i concetti trattati in questo articolo, consigliamo la lettura delle seguenti sezioni della documentazione ufficiale di WordPress:

Utilizzo di un Tema Child

Le modifiche descritte in questa pagina hanno un grande difetto: intervengono, anche se in minima parte, sul codice del vostro tema, obbligandovi quindi a “ripeterle” ad ogni aggiornamento dello stesso. Al di là delle inevitabili seccature, dover intervenire numerose volte sul codice di un tema non è una buona pratica, in quanto espone il vostro blog a problemi di stabilità legati al sempre possibile errore umano.

Per ovviare a questo tipo di situazioni è fortemente consigliato creare un Tema Child (o Child Theme), una funzionalità di WordPress che consente di “ereditare” le funzionalità di un altro tema (denominato tema genitore), permettendo così di aggiungere o modificare le sue funzionalità. Un Tema Child è il sistema più semplice e sicuro per modificare un tema esistente in quanto non altera il codice del tema genitore.

A breve pubblicheremo un articolo dedicato ai Temi Child, che conterrà anche una breve guida alla loro creazione. Nel frattempo, potete documentarvi direttamente sull’apposita pagina presente nella documentazione ufficiale.

 

 

 

RELATED POSTS

About Ryan

IT Project Manager, Web Interface Architect e Lead Developer di numerosi siti e servizi web ad alto traffico in Italia e in Europa. Dal 2010 si occupa anche della progettazione di App e giochi per dispositivi Android, iOS e Mobile Phone per conto di numerose società italiane.

View all posts by Ryan