Indice dei contenuti
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.
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.
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:
|
1 2 |
// Add single-post-thumbnail image size: 720 pixels wide and unlimited height add_image_size( 'single-post-thumb', 720, 9999 ); |
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 <main id"=main"> oppure all'elemento <article> : 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 the_content() e inserite il seguente codice subito prima di questa:
|
1 2 3 4 5 6 |
<!-- Insert Featured Image (see functions.php for details) --> <?php if ( has_post_thumbnail() ) { the_post_thumbnail('single-post-thumb'); } ?> |
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 the_title() , 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:
|
1 2 3 4 5 |
/* Single Post Thumbnail Image styling */ img.wp-post-image.attachment-single-post-thumb { display: block !important; margin: auto !important; } |
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 the_title() e the_content() , significa che il tema fa uso di un template separato per la visualizzazione dell'articolo. Dovrete quindi cercare un richiamo alla funzione get_template_part, 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:
|
1 |
get_template_part( 'content', get_post_format() ); |
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 the_title() e the_content() 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:
- Post Thumbnails (disponibile anche in italiano a questa pagina).
- Functions: the_post()
- Functions: get_template_part()
- Functions: get_post_format()
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.
Buona sera!
Ho trovato questo articolo fantastico, chiaro ed esplicativo!!!
L’ho messo in pratica (ho faticato un attimo a trovare la finzione the_title(), ma alla fine l’ho scovato in template-parts > content-page.php) ho copiato lo script, ho copiato il secondo script in Modifica CSS aggiuntivo e, finalmente, ecco l’immagine in evidenza che compare centrata e sopra al titolo!
Yeeee…
Finché sono andata un pochino più giù e ho scoperto che me la ripeteva di nuovo anche subito sotto al titolo, tutta allineata a sinistra.
Help!!! Dove ho sbagliato? C’è un modo per ovviare a questo problema e togliere il doppione sotto al titolo?
Grazie!!!
Ciao! Sono contento che l’articolo ti sia piaciuto. Per quanto riguarda il tuo problema, è importante capire due cose:
1) che tema utilizzi?
2) l’immagine in evidenza era già presente all’interno dei tuoi post prima di apportare la modifica da noi suggerita (e quindi la volevi solo”spostare”) oppure non c’era proprio?
E’ molto strano che l’output avvenga due volte, in quanto la chiamata a the_post_thumbnail(‘single-post-thumb’) inserisce soltanto un singolo tag A (con all’interno un singolo elemento IMG): hai controllato se the_post_thumbnail era già presente e/o si trova altre volte all’interno della pagina?
Ciao!
Grazie mille per la rapidità con cui mi avete risposto!!!
Il tema che uso si chiama Azalea e la possibilità di inserire l’immagine in evidenza c’era già, ma compariva dopo il titolo e tutta allineata a sinistra (mentre io volevo spostarla prima del titolo e centrata).
Sicuramente, ci dev’essere un qualche comando da qualche parte che la inserisce una seconda volta nella posizione originale e che dovrei eliminare, solo che non sono riuscita a trovarlo: the_post_thumbnail non compare da nessuna altra parte :-(
E’ per caso questo?
https://justgoodthemes.eu/azalea/
Se si, get_post_thumbnail è implementato tramite una funzione proprietaria che hanno chiamato jgtazalea_post_thumbnail() : la trovi in /template-parts/content.php
Se no, dammi una URL dove posso scaricarlo e ti dico dove si trova.