Siete alla ricerca di un modo per aggiungere immagini in primo piano ai post del vostro blog WordPress?
Le immagini in primo piano, note anche come miniature dei post, sono una funzione ben nota di WordPress supportata dalla maggior parte dei temi. Sono l’immagine principale dei post del blog e spesso appaiono accanto all’intestazione sulla home page e sui social media.
In questo articolo vi mostreremo come aggiungere facilmente immagini in evidenza o miniature dei post in WordPress.
Guida per principianti alle immagini in primo piano in WordPress
Le immagini in primo piano sono una caratteristica dei temi WordPress. Quasi tutti i temi WordPress sono dotati di un supporto incorporato per le immagini in primo piano e le visualizzano magnificamente in diverse aree del vostro sito WordPress.
Come esseri umani, troviamo gli elementi visivi più accattivanti del testo semplice. Le immagini in primo piano aiutano a rendere più accattivanti le pagine del blog.
Inoltre, aiutano a creare un coinvolgimento degli utenti e ad aumentare le visualizzazioni delle pagine. Anche i motori di ricerca e i siti web dei social media possono utilizzare queste immagini e visualizzarle nei risultati di ricerca e nei feed di notizie dei social media.
Le immagini in primo piano sono utilizzate soprattutto per i post del blog, ma è possibile impostare immagini in primo piano anche per le pagine e i tipi di post personalizzati.
Nota: le immagini in primo piano non sono la stessa cosa delle immagini di copertina. Vedere la differenza tra immagine di copertina e immagine in primo piano in WordPress.
Detto questo, vediamo come aggiungere facilmente immagini in evidenza in WordPress.
Video tutorial
Se preferite le istruzioni scritte, continuate a leggere.
Aggiunta di una miniatura del post o di un’immagine in primo piano in WordPress
Per aggiungere un’immagine in evidenza a un post di WordPress, basta modificare o creare un nuovo post del blog.
Nell’editor dei contenuti, nella colonna di destra si trova la scheda Immagine in primo piano.
È necessario fare clic sull’area “Imposta immagine in primo piano” per visualizzare il popup del caricatore multimediale di WordPress.
Da qui è possibile caricare un’immagine dal computer o utilizzare un’immagine esistente dalla libreria multimediale. Una volta selezionata l’immagine, è sufficiente fare clic sul pulsante “Imposta immagine in primo piano”.
WordPress mostrerà ora un’anteprima dell’immagine in primo piano nella colonna di destra.
Tuttavia, l’immagine in primo piano avrà un aspetto diverso a seconda del tema di WordPress.
Ora è possibile salvare o pubblicare il post o visualizzarlo in anteprima per vedere come apparirà l’immagine in primo piano sul sito web.
A seconda delle impostazioni definite dallo sviluppatore del tema, l’immagine in primo piano apparirà automaticamente con i post.
Come trovare e utilizzare efficacemente le immagini in primo piano
La prossima grande domanda che la maggior parte dei principianti si pone è dove trovare le immagini da utilizzare come immagini in evidenza.
Non si può semplicemente usare la ricerca per immagini di Google e utilizzare qualsiasi immagine da Internet. Le immagini sono protette dalle leggi sul copyright e il loro utilizzo senza autorizzazione può causare problemi legali.
Fortunatamente, ci sono diverse risorse disponibili che potete utilizzare per trovare immagini gratuite per i vostri post sul blog.
I nostri preferiti sono:
- Shutterstock – Ha alcune immagini gratuite, ma il vero valore deriva dai suoi piani a pagamento, che danno accesso a tonnellate di foto di alta qualità, illustrazioni, disegni, video e altro ancora.
- Unsplash – Una popolare risorsa online che pubblica immagini ad alta risoluzione da utilizzare per il vostro sito web e altri progetti.
- Negative Space – Una raccolta ben organizzata di immagini libere da copyright.
- New Old Stock – Una raccolta di fotografie d’epoca provenienti da archivi pubblici.
Nota: tutte queste fonti forniscono immagini ad alta risoluzione, il che significa che le dimensioni dei file sono elevate. È necessario ottimizzare le immagini per il Web prima di utilizzarle come immagini in evidenza.
Le immagini in primo piano sono gestite dal tema di WordPress. Per modificare il modo in cui il tema visualizza le immagini in primo piano, è necessario avere alcune conoscenze di base di CSS o di codifica di WordPress.
Se vi sentite a vostro agio con la codifica, continuate a leggere per ulteriori suggerimenti.
Guida per gli sviluppatori di temi alle immagini in primo piano e alle miniature dei post in WordPress
L’immagine in primo piano è una funzione popolare supportata da quasi tutti i temi WordPress. In rare situazioni, potreste imbattervi in un tema che non supporta le immagini in primo piano o che non vi piace come gestisce le immagini in primo piano.
In questo caso, è possibile aggiungere il supporto per le immagini in primo piano al tema o modificare la modalità di visualizzazione.
Se vi sentite a vostro agio nella modifica dei file dei temi di WordPress e conoscete un po’ di CSS personalizzato, potete farlo da soli.
Se il vostro tema non supporta le immagini in primo piano, non vedrete l’opzione per aggiungere un’immagine in primo piano nell’editor dei contenuti.
Per aggiungere il supporto alle immagini in primo piano in un tema WordPress, è necessario aggiungere questa riga di codice nel file functions.php del tema:
add_theme_support( 'post-thumbnails' );
Non consigliamo di modificare direttamente il file functions.php del sito se non si è uno sviluppatore. Il minimo errore può rompere il sito e causare numerosi errori.
Un modo più semplice per aggiungere codice personalizzato è utilizzare WPCode. È il miglior plugin di snippet di codice per WordPress. È possibile gestire facilmente tutti gli snippet di codice personalizzati utilizzando il plugin e non doversi preoccupare di rovinare il sito web.
Per prima cosa, è necessario installare e attivare il plugin WPCode. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.
Dopo l’attivazione, è possibile andare su Code Snippets ” + Add Snippet dalla dashboard di WordPress. Da qui, è sufficiente selezionare l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.
Successivamente, è possibile inserire il codice personalizzato nell’area “Anteprima codice”.
Non dimenticate di fare clic sul menu a discesa “Tipo di codice” e di selezionare “Snippet PHP” come tipo.
Una volta terminato, è possibile scorrere verso il basso e selezionare il metodo di inserimento del codice.
Per impostazione predefinita, WPCode utilizza l’opzione “Inserisci automaticamente” ed esegue il codice ovunque. Tuttavia, è possibile modificare la posizione e selezionare di eseguire il codice in una posizione specifica, come l’intestazione, il piè di pagina, prima di un paragrafo e altro ancora.
Esiste anche un metodo Shortcode, in cui è possibile inserire manualmente uno shortcode per eseguire il codice.
Per questa esercitazione, è possibile utilizzare il metodo predefinito e inserire automaticamente il codice ovunque.
Una volta terminato, è sufficiente fare clic sulla levetta in alto per attivare lo snippet e quindi fare clic sul pulsante “Salva snippet”.
Questo codice abilita il supporto delle immagini in primo piano per i post e le pagine. Ora è possibile accedere all’editor di blocco del post o della pagina e vedere l’opzione dell’immagine in primo piano abilitata.
Tuttavia, quando si imposta un’immagine in primo piano, questa non viene visualizzata automaticamente nel tema WordPress. Per visualizzare le immagini in primo piano nel vostro tema, dovete modificare i vostri template e aggiungere questa riga di codice nel punto in cui volete visualizzare l’immagine in primo piano:
<?php the_post_thumbnail(); ?>
I file in cui aggiungere il codice di cui sopra variano a seconda del tema. Il codice va aggiunto all’interno del ciclo del post.
Correlato: Per capire meglio come funzionano i temi, consultate il foglio informativo sulla gerarchia dei temi di WordPress.
Configurare le dimensioni delle immagini in primo piano
Il codice sopra riportato è la funzione di base necessaria per aggiungere il supporto alle immagini in primo piano e visualizzare le immagini in primo piano nel tema. Per impostare le dimensioni delle immagini in primo piano caricate, è necessario aggiungere questa riga di codice al file functions.php o allo snippet WPCode.
set_post_thumbnail_size( 50, 50);
I parametri di set_post_thumbnail_size sono nell’ordine: larghezza, altezza.
Si possono anche impostare dimensioni aggiuntive per le immagini da usare con la funzione_post_thumbnail(). Ad esempio:
// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );
In questo esempio, abbiamo aggiunto una nuova immagine chiamata single-post-thumbnail con 590px di larghezza e 180px di altezza.
Per utilizzare questa dimensione dell’immagine nel nostro tema, dovremo comunque aggiungerla al file del tema appropriato.
Per saperne di più, consultate la nostra guida sull’aggiunta di immagini di dimensioni aggiuntive in WordPress per maggiori dettagli.
Se le immagini in primo piano sono state caricate in precedenza, ma vengono ancora visualizzate in altre dimensioni, è necessario rigenerare le miniature e le dimensioni delle immagini per i post più vecchi.
Di seguito è riportato un esempio della funzione immagine in primo piano con una dimensione specifica dell’immagine.
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
Questa è la versione ridotta della funzionalità completa. Ci sono molte altre cose che si possono fare con le immagini in primo piano.
Domande frequenti sulle immagini in primo piano in WordPress
Come principianti, potreste imbattervi in domande o problemi quando utilizzate le immagini in primo piano sul vostro blog. Ecco alcune delle domande più frequenti sulle immagini in evidenza.
1. Perché l’immagine in primo piano appare due volte nei miei post?
A volte i principianti aggiungono un’immagine in primo piano e poi aggiungono la stessa immagine nella parte del contenuto dell’editor del post.
Tutto ciò che dovete fare è rimuovere l’immagine dall’area del contenuto e utilizzare solo la meta-box dell’immagine in primo piano per aggiungere l’immagine in primo piano. Per saperne di più su questo argomento, consultate il nostro articolo su come risolvere il problema dell’immagine in primo piano che appare due volte in WordPress.
2. Qual è la differenza tra l’immagine di copertina e l’immagine in evidenza?
Le immagini di copertina sono utilizzate nell’area del contenuto dei post o delle pagine. Di solito vengono utilizzate per separare le diverse sezioni di una lunga pagina o di un post.
L’immagine in evidenza è l’immagine rappresentativa di un articolo. Appare prima o accanto al contenuto, ma non all’interno dell’articolo stesso.
Per saperne di più su questo argomento, consultate la nostra guida sulla differenza tra immagine di copertina e immagine in evidenza in WordPress.
3. Come visualizzare le immagini in evidenza accanto ai post recenti del blog?
L’editor di blocchi di WordPress è dotato di un blocco “Ultimi messaggi” che consente di visualizzare i messaggi recenti con le miniature dei messaggi.
È anche possibile visualizzare i post recenti con le miniature nei widget della barra laterale utilizzando il plugin Recent Posts Widget Extended. Per maggiori dettagli, consultate il nostro articolo su come visualizzare i post recenti in WordPress.
4. Come ricordare agli autori di aggiungere immagini in evidenza in WordPress?
Le immagini in primo piano vengono visualizzate in modo evidente sulla homepage, sulla pagina del blog e su altre pagine di archivio.
Se voi o un altro autore del vostro blog avete dimenticato di impostarne una e avete pubblicato il post, questo apparirà senza immagine in evidenza. L’aspetto sarà negativo e incoerente, il che non è positivo per l’esperienza dell’utente.
È possibile installare e attivare il plugin PublishPress Checklist, che mostrerà una notifica quando qualcuno tenta di pubblicare un post senza un’immagine in evidenza.
Per maggiori dettagli, consultate il nostro articolo su come richiedere le immagini in primo piano in WordPress.
5. Perché la mia immagine in evidenza non viene visualizzata in WordPress?
Ci sono diversi motivi per cui l’immagine in evidenza non viene visualizzata sul vostro sito WordPress. Ad esempio, è possibile che si stia cercando di caricare un file immagine troppo grande. Oppure, un plugin o un tema potrebbero limitare l’aspetto dell’immagine.
Per correggere questo problema, selezionate la nostra guida su come correggere l’immagine in evidenza in WordPress.
Ulteriori risorse per ottimizzare le immagini in evidenza
Potete anche leggere le nostre altre guide e tutorial su come sfruttare al meglio le immagini in evidenza sul vostro sito:
- Come modificare di massa le immagini in evidenza in WordPress
- Come aggiungere più immagini in evidenza / miniature dei post su WordPress
- Come impostare un’immagine in evidenza predefinita in WordPress (in modo semplice)
- Immagine di copertina vs. immagine in evidenza nell’editor a blocchi di WordPress (Guida per principianti)
- Come nascondere le immagini in evidenza sui singoli post in WordPress
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere immagini in evidenza o miniature dei post in WordPress. Potreste anche dare un’occhiata alla nostra guida per principianti alla SEO delle immagini e alle nostre scelte degli esperti sui migliori plugin per i social media per i siti web WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Moinuddin Waheed
Whenever I use a featured image and one more image at the top of the post, it becomes not so good looking at the front end of the website. the two images looks unnecessary.
And when we don’t use featured image and use only image for the post on top, it doesn’t look good on blog posts layout.
Is it possible to make sure that whenever we have such scenario, only the posts image is visible at the blog posts page and featured image appear on blog posts layout?
Moreover, how can we avoid duplication of images that is built with every image we insert inside the media ,taking unnecessary space?
WPBeginner Comments
This sounds like the featured image may be appearing twice. To fix this, check out: https://www.wpbeginner.com/beginners-guide/how-to-fix-featured-images-appearing-twice-in-wordpress-posts/
Also, to answer your second question and control the types of thumbnails generated, check out: https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/
Mrteesurez
For if anyone want to add default featured image to blog post so that newly posted posts will be assigned that default images as thumbnail pending the time to use the actual image intending for the post.
Hope you have a post on this ??
WPBeginner Support
For setting a default featured image, we would recommend taking a look at our guide below:
https://www.wpbeginner.com/plugins/how-to-set-a-default-featured-image-in-wordpress-using-a-plugin/
Admin
Mrteesurez
Featured images are very important for blog posts, it bring a sense of visual appealing to the site.
If one set WPcode to add featured image support but not specifying either footer or header and set to run through out entire site, will it not slowing or have any speed effect to the site.
WPBeginner Support
It should not affect your site’s speed you would need to edit your templates for the featured image to display as well.
Admin
Patricia
The thumbnail pictures are turning up bottom of the page with ‘Related Articles’ — just black boxes. What am i doing wrong or missing? We had them at one point but after the last Wordpress upgrade, the pictures turned into black boxes.
WPBeginner Support
You would want to check with the support for the tool that you are using for your related posts, either your theme or a plugin as it sounds like it is not grabbing your featured images correctly.
Admin
E
How can I change the size of my featured image? It always so large on my blog post. I’ve looked to see in Settings>Media to change it as suggested but that does not show up.
WPBeginner Support
For changing the size of your featured image, you would want to reach out to the support for your specific theme and they should be able to assist.
Admin
Josh
Quick question, is it possible to add featured image support to a theme without Wordpress generating extra thumbnail sizes?
WPBeginner Support
Yes, you would use the add_theme_support and the_post_thumbnail only from this article to do that. You may want to set a size for the featured images so they are all the same size.
Admin
Josh
Would that look something like
or does it need to be a numerical value or something else?
WPBeginner Support
It would be the same code as in our article above
Nwankwo ekene
My site is not showing featured image on Google search and when shared to WhatsApp
What should I do to fix this
WPBeginner Support
You would want to ensure you have the correct markup similar to our guide below for Facebook:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Admin
R Taylor
How can I set the “recent blogs” on the right of screen so they stay in order by date? They keep moving around everytime I open blog. Thanks
WPBeginner Support
You would want to ensure your theme or a plugin isn’t modifying the order. By default, the recent posts widget would display by date
Admin
Neshadkhan
Hi wpbegginers i am following you from last 2 year please tell me how to add our post title on thumbnail image like a lot of blogs are doing that
WPBeginner Support
Depending on what you’re looking at, some of those are added using image editors such as GIMP or Photoshop
Admin
Rizard
Thank you.. this works for me..
WPBeginner Support
Glad our guide was helpful
Admin
Sunil
I use supermag theme and my one post feture image is showing to other post ….how to solve it
WPBeginner Support
You would want to reach out to your theme’s support for how to fix display errors.
Admin
Nate
how can I make the the featured image disappear when they click the post? I just want the picture to be featured.
WPBeginner Support
That would be determined by your theme, if you reach out to your theme’s support they may have a recommended method to remove the featured image in the post itself.
Admin
Nick Sim
great explanation! But I’m having issues adding the mutliple post thumbnails into a custom post type. How do you solve this?
kar
Hi, my featured image overrides my main banner image. Everytime I set a featured image for a post, it overrides the main site’s banner image. How do I stop it from happening?
Maj
Hi all, actually am using Wordpress 4.9.1 to upload home page video from YouTube for our website, but after I uploaded the video and access the website from the laptop I noticed that the poster image that it supposed to be displayed only when access via Phone it’s appearing in the home page for 3 seconds and this causes the first 3 seconds of the uploaded video not to be seen then can watch the video.
Please I need your help and suggestion to solve this issue. Thank you so much
carlos ballin
i need 2 or 3 feature image, i install DFI plugin but does not work. Exist other proccess for todo that ?
Joao Cerca
Hi,
I have a problem with featured image. Everytime I upload a new picture for a profile, the picture does not turn into a thumbnail in the list of profiles. Is it a problem of the theme or the definition of the wordpress?
Here you can check my problem
Best Regards,
WPBeginner Support
Hi Joao Cerca,
We really can’t say what may be causing the issue. Are you using WordPress.com? In that case you may want to reach out to WordPress.com support. If you are on a self hosted WordPress.org website, then you can try our WordPress troubleshooting tips to figure out the issue.
Admin
Emily
MOST of the time when I share links to my posts on Facebook, the featured image appears as the thumbnail but sometimes it just doesn’t for no reason. I’m not doing anything fancy (or even differently) from week to week. What’s up?
Saransh Sagar
hey, it takes some times to load your post,page image or feature image and loading time may vary from different types of social media ! in linkedin it fetch very fast and it fb it takes some time !
Nsereko Eriab
hi, i want to put 5 post excerpts on my homepage but i want the most new one (the first post) to have a bigger thumbnail image than the other 4. help, thx
Bankole Emmanuel
pls what i need is how to insert my first post image as my featured image
Liz Johnson
Hey Thanks for posting this! I’d just left you a question about it. My theme has a featured image option. Plus I found a setting in my general settings for the thumbnail, but it still isn’t showing up when I post on Twitter. Not sure if I need to go to the CSS coding option?!?? Thanks
Amanda
Hello. I’ve been trying to find help with my blog, but I can’t seem to find the answers I’m looking for. I am using Wordpress’ theme Hemingway, and I can’t figure out how to get the picture that is at the top of my post to show up in my home page next to the post summary. I’ve tried setting a featured image, but it still doesn’t show up on the home page, and when I do that it puts the image in the header when I go to the post. When I was looking at the Hemingway sample on the WordPress site it showed pictures next to posts in the homepage. I don’t understand why I can’t do that on my blog.
Rul
i’m using zerif pro theme but now my portfolio featured image is not arranged correctly (2 rows x 4 columns) like how it supposed to be. any idea what causes this issue and how to fix it?
Kim
Hi. I have the featured image turned on my blog. It was working just fine until today. With our latest blog post it isn’t displaying correctly on our homepage when viewed from a cell phone. All of the post below it on the homepage show up correctly, but I can’t figure out where I went wrong with this one. It shows with a huge gap in between some of the words. Any suggestions on how to fix this?
Dennis
Hi,
Any suggestions for plugins to generate post-thumbnails // featured images for Facebook videos? Already tried ‘Featured Video Plus’ but that one is not working for Facebook-videos
Asen
I want my featured images to appear on my posts and for some reason they don’t appear when I click the particular category in my main menu.
Let me explain this better- if you visit my site and if you click on “Action Heroes” in the menu tab, the posts appear with the excerpt but there are no images displayed. I want the title of the post to appear with the excerpt, as well as the associated featured image before the reader clicks on “”Continue reading. The same is for the News and Facts section.
How can I change that and why the image don’t appear?
WPBeginner Support
Hi Asen,
Most likely your WordPress theme does not display featured images correctly. Try switching to a default WordPress theme like Twenty Seventeen, if it displays your featured images then you can contact your theme developer for support.
Admin
pawan kumar mandawariya
Dear wpbeginner team,
can you guide me how to display post images on homepage. I am unable to to this. At while, images are showing on the post/ articles, but not showing on the homepage. You can see this problem here
WPBeginner Support
Hi Pawan,
This could be a theme or plugin issue. This could also an issue with SSL. Please see our WordPress troubleshooting guide to figure out whats causing the issue.
Admin
hristiqn
Hello , I use WordPress witn Fashionistas theme intsalled, but I understand the featured image is not showing the full image uploaded. I would like to have the full image appear instead of the default theme sizing of the featured image. What settings I should do in the Admin panel ?
Thanks in advance.
And really I hope you can help me.
Tony Joy
Wordpress is automatically cropping my featured image. Can you help me out?
balaram tankala
thank you for this article….
mahesh chapgaonkar
thank you…