Le immagini in evidenza sono spesso la prima cosa che le persone notano su un blog. Catturano l'attenzione, attirano i lettori e definiscono il tono del tuo post.
Ma in alcuni temi di WordPress, fare clic sull'immagine in evidenza non porta i visitatori da nessuna parte. Invece di aprire il tuo post, rimane lì.
Potrebbe non sembrare un grosso problema, ma può confondere i visitatori e renderli meno propensi a continuare a leggere. Questo è un problema piccolo ma serio.
Fortunatamente, c'è una soluzione semplice. Ti mostrerò come rendere cliccabili le immagini in evidenza in WordPress in modo che i tuoi visitatori ottengano l'esperienza fluida che si aspettano.
Perché Collegare le Immagini in Evidenza ai Post in WordPress?
La ragione è semplice. I visitatori si aspettano che le immagini funzionino come collegamenti. Quando vedono un'immagine in evidenza, vogliono naturalmente fare clic su di essa per aprire il post completo.
Le immagini in evidenza sono solitamente grandi, colorate e occupano più spazio, quindi i visitatori tendono a notarle per primi. Rendono anche più facile per le persone toccare i tuoi post quando usano un telefono o un tablet.
Ma se le tue immagini in evidenza non sono cliccabili, può confondere i visitatori. 😕
Potrebbero provare a toccare l'immagine, aspettandosi che apra il post, solo per rendersi conto che non succede nulla. Quella piccola frustrazione può far sì che alcuni utenti lascino il tuo sito più velocemente, il che potrebbe danneggiare il tuo coinvolgimento.
Rende anche il tuo sito meno accessibile. Immagini più grandi sono più facili da cliccare o toccare per tutti, specialmente per le persone con difficoltà motorie o per chi utilizza schermi più piccoli.
Mentre molti temi WordPress moderni collegano l'immagine in evidenza al post, alcuni ancora non lo fanno. Se il tuo tema è uno di questi, ti mostrerò esattamente come risolvere il problema.
Nella sezione seguente, ti insegnerò come collegare automaticamente le immagini in evidenza ai post in WordPress. Ed ecco tutto ciò che tratterò in questa guida:
- Collega automaticamente le immagini in evidenza ai post in WordPress
- Suggerimento bonus: Ottimizza le tue immagini in evidenza per la velocità
- Domande frequenti: Collega automaticamente le immagini in evidenza ai post di WordPress
- Altre guide all'uso delle immagini in WordPress
Iniziamo.
Collega automaticamente le immagini in evidenza ai post in WordPress
Questo metodo richiede l'aggiunta di codice ai tuoi file WordPress. Se non l'hai mai fatto prima, consulta la nostra guida per principianti su come incollare snippet dal web in WordPress.
Sebbene tu *possa* aggiungere il codice al file functions.php del tuo tema, ti consiglio di utilizzare invece un plugin per snippet di codice. È molto più sicuro, più facile da gestire e le tue modifiche non andranno perse se aggiorni o cambi tema.
La nostra prima scelta è WPCode, il miglior plugin per snippet di codice per WordPress. Ti consente di aggiungere e gestire codice personalizzato senza toccare i file del tuo tema, quindi non rischi di compromettere il tuo sito web.
Inoltre, è considerato affidabile da molti dei nostri brand partner per la sua affidabilità e facilità d'uso. Puoi saperne di più nella nostra recensione completa di WPCode.
Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Se hai bisogno di aiuto, segui il nostro tutorial su come installare un plugin WordPress per istruzioni dettagliate.
💡 Nota: Per questo tutorial, puoi utilizzare la versione gratuita di WPCode. Se hai bisogno di funzionalità avanzate come la pianificazione del codice, la logica condizionale e una cronologia completa delle revisioni, potresti voler esplorare la versione WPCode Pro.
Una volta attivato il plugin, puoi navigare su Snippet di codice » Aggiungi nuovo nella tua area di amministrazione di WordPress.
Successivamente, vedrai la pagina ‘Aggiungi snippet’.
Puoi passare il mouse sull'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fare clic sul pulsante ‘+ Aggiungi snippet personalizzato’.
Nella schermata successiva, selezionerai il tipo di codice per il tuo snippet.
Qui, dovrai fare clic sulla casella ‘Snippet PHP’.
Questo ti porterà all'editor di WPCode.
La prima cosa da fare qui è dare un nome al tuo snippet di codice. Questo è solo per tuo riferimento, quindi può essere qualsiasi cosa che ti aiuti a capire rapidamente a cosa serve lo snippet.
Successivamente, incolla uno dei seguenti due snippet di codice nella casella ‘Anteprima codice’. Devi usarne solo uno.
Il primo è un'opzione semplice che rende l'immagine in evidenza cliccabile ovunque, incluse le pagine di archivio, la homepage e le pagine dei singoli post:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Il secondo metodo funziona in modo leggermente diverso. Assicura che l'immagine in evidenza non sia cliccabile quando un visitatore si trova già su quella specifica pagina del post, il che è meglio per l'esperienza utente.
Questo è utile se desideri collegare le immagini in evidenza solo nelle visualizzazioni non singole, come la homepage, l'indice del blog o le pagine di categoria sul tuo blog WordPress:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
if (! is_singular()) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
} else {
return $html;
}
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Raccomando il secondo snippet per la migliore esperienza utente, ma entrambi andranno bene! 👍
Una volta aggiunto lo snippet, ecco come potrebbe apparire nell'editor di WPCode:
Successivamente, scorriamo la pagina fino alla sezione 'Inserimento'.
Puoi lasciarlo sul metodo 'Inserimento automatico', in modo che inserisca ed esegua automaticamente lo snippet di codice nel posto giusto.
Infine, sposta l'interruttore da 'Inattivo' ad 'Attivo'.
Quindi, procedi e fai clic sul pulsante 'Salva Snippet'.
Fatto. Ora le tue immagini in evidenza saranno automaticamente collegate ai tuoi post.
Suggerimento bonus: Ottimizza le tue immagini in evidenza per la velocità
Ora che le tue immagini in evidenza sono cliccabili, è una buona idea assicurarsi che si carichino velocemente. Immagini grandi e non ottimizzate possono rallentare il tuo sito, danneggiando sia l'esperienza utente che il tuo posizionamento SEO.
Prima di caricare un'immagine in evidenza su WordPress, ti consiglio di ridimensionare l'immagine per adattarla alla larghezza del contenuto del tuo tema e comprimerla per ridurne le dimensioni del file. Puoi farlo facilmente con uno strumento di editing di immagini o un plugin di compressione immagini.
Ci sono anche altre tecniche utili.
Ad esempio, puoi abilitare il caricamento pigro, utilizzare formati immagine di nuova generazione (come WebP) e abilitare un CDN per una consegna più rapida in diverse località.
Per saperne di più, consulta la nostra guida completa su come ottimizzare le immagini per le prestazioni web.
Domande frequenti: Collega automaticamente le immagini in evidenza ai post di WordPress
Ora, chiariamo alcune preoccupazioni comuni sul collegamento delle immagini in evidenza in WordPress.
Perché le mie immagini in evidenza non sono cliccabili per impostazione predefinita?
Se le tue immagini in evidenza siano cliccabili o meno dipende interamente dal tuo tema WordPress. Alcuni temi moderni lo includono per impostazione predefinita, mentre altri lo omettono.
È sicuro aggiungere questo codice al file functions.php del mio tema?
Lo capisco: modificare il file del tema può sembrare rischioso. E onestamente, lo è un po'. Un piccolo errore di battitura nel file functions.php potrebbe bloccarti l'accesso al tuo sito web o causare la ' schermata bianca della morte'.
Ecco perché consiglio di utilizzare un plugin come WPCode. È un modo molto più sicuro e adatto ai principianti per aggiungere codice al tuo sito.
L'aggiunta di questo snippet di codice rallenterà il mio sito web?
Buone notizie: no, non lo farà. Il codice utilizza una funzionalità standard di WordPress che lo rende estremamente leggero ed efficiente. Non noterai alcuna differenza in termini di velocità o prestazioni.
Altre guide all'uso delle immagini in WordPress
Spero che questo articolo ti abbia aiutato a imparare come collegare automaticamente le immagini in evidenza ai post in WordPress. Se hai trovato utile questa guida, abbiamo altri tutorial che possono aiutarti a migliorare il modo in cui utilizzi le immagini sul tuo sito WordPress:
- Immagine di copertina vs Immagine in evidenza nell'editor a blocchi di WordPress
- Come impostare un'immagine in evidenza predefinita in WordPress
- Come aggiungere immagini in evidenza o miniature dei post in WordPress
- Come risolvere il problema dell'immagine in evidenza non visualizzata in WordPress
- Come aggiungere didascalie alle immagini in primo piano in WordPress
- WebP vs PNG vs JPEG: Il miglior formato immagine per WordPress
- Come scegliere il miglior software di web design
- Guida per principianti alle dimensioni delle immagini di WordPress
- Guida per principianti alla SEO delle immagini
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Fredrick John
Ha funzionato alla grande, grazie.
Supporto WPBeginner
Prego!
Amministratore
Nelson Nchopereu
Come posso impostare la mia immagine in evidenza in modo che quando il link del post viene condiviso su WhatsApp o Facebook venga accompagnato dall'immagine in evidenza?
Grazie
Supporto WPBeginner
Per questo, lo trattiamo nella nostra guida qui sotto che include le informazioni meta social:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Amministratore
Anas
Ottimo signore, funziona...
Supporto WPBeginner
Thank you, glad our content was helpful
Amministratore
Rohit Sharma
Come progetta wpbeginner le sue immagini in primo piano e le miniature di YouTube?
Quali strumenti / app / software utilizzate?
Sembrano piuttosto fantastici..
Non sono riuscito a trovarlo nel tuo post sul blueprint del sito web..quindi ho pensato di chiedere qui..
Attendo la tua risposta..!
Supporto WPBeginner
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
Amministratore
özkan
Salve,
Sono così geloso di tutte queste persone che dicono che funziona.
Non funziona per il mio sito. Qualcuno può aiutarmi a riguardo?
Grazie.
Supporto WPBeginner
Potresti voler contattare il supporto del tuo tema per vedere se c'è un'impostazione specifica del tema che potrebbe sovrascrivere questo.
Amministratore
Faizan
Ha funzionato! Grazie
Carlos Alberto Romay
Ciao! Articolo fantastico, ho bisogno di fare il contrario; scoprire COME EVITARE che qualsiasi link da immagine, titolo o testo porti a un URL, come posso farlo? Voglio dire, visiti il mio sito web, vedi il blog ma NON PUOI cliccare su nessuna immagine, testo o titolo, è possibile? grazie
Jennifer
Ciao, grazie mille.
L'ho usato sul mio sito web.
Come aggiungere un link ad alcune miniature di dimensioni specifiche?
pete
funziona per me grazie!!
Stuart Campbell
Come posso usare questo metodo per far sì che l'immagine in evidenza rimandi a un altro URL? Cosa mi manca qui? Grazie
Sandeep
Sul mio blog le immagini in evidenza non sono cliccabili, il che rende un po' difficile per l'utente navigare nei blog.
Penso che il tema che sto usando non lo supporti.
Ma il codice che hai menzionato sopra ci proverò.
Ci proverò, se funzionerà, sarà fantastico.
Susan Howarth
Thank you so much for this!! I was worried this issue would take a lot of time and energy to figure out. After a quick copy and paste of your code, and it worked perfectly!
Deepak
ha funzionato, vorrei sapere come chiudere l'istruzione php? quando uso questo alla fine } il mio sito dà errore 500
Ivan
Ha funzionato bene! Fantastico! Grazie
modo seyoum
sto cercando il modo migliore per aggiungere link a un'immagine in evidenza. ad esempio, se clicchi sul link qui sotto, vedrai l'immagine dell'intestazione e poi due link nella regione del contenuto. preferirei che quei due link apparissero nell'intestazione in un modo che non comprometta alcun design reattivo. ho alcune idee, ma vorrei sentire una prospettiva diversa...
jeet sandhu
Ciao, ho una domanda diversa. Ho provato a visualizzare post specifici in pagine specifiche usando il plugin 'post in page'. Ma le immagini in evidenza che ho impostato per i post non vengono visualizzate sulla pagina. Voglio dire, viene visualizzato solo il titolo del post, ma voglio che vengano visualizzate anche le immagini in evidenza di tutti i post! Puoi suggerirmi un modo o un plugin che possa aiutarmi a raggiungere questo obiettivo. Ho cercato in tutto il web; nessuno ha la risposta. Ti sarei grato se potessi aiutarmi.
malik aadil
Sono un nuovo blogger, questo articolo mi ha aiutato molto
Stavo usando link nelle immagini ma il problema era che le immagini si aprivano ma non portavano all'articolo collegato
Supporto WPBeginner
Ciao Malik,
We are glad you found this article helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Amministratore
Sulman Qamar
hey dear ,
here isn’t concerning solely featured pictures however additionally concerning committal to writing . …
in some model that’s operating.. most of your data is nice on behalf of me and my members ..
we follow principally .:)
in this richest article I actually have found totally different sort of data ..
Hope you best for your blogging future
~salman qamar
Dale Reardon
Ciao,
Grazie mille per questo codice utile.
C'è un modo (posso disturbarti per il codice della funzione) per aggiungere anche un tag ALT al link dell'immagine con il titolo del post collegato come testo alternativo?
Ho problemi di vista e al momento il link dice solo il nome del file dell'immagine, il che non è molto utile la maggior parte delle volte.
Grazie,
Dale.
Ankit Agarwal
Grazie per questo tutorial. Ho provato questo sul mio blog ma ho capito che l'immagine mostrata nella miniatura non è la mia immagine in evidenza ma la prima immagine che sto usando nel post. Probabilmente perché sto usando il plugin MotoPress page builder. e
Sembra esserci un conflitto tra questo codice e il plugin Motopress.
Dale Reardon - La mia disabilità conta
Ciao,
Ha funzionato fantasticamente.
Solo un'ulteriore domanda: il mio sito web riguarda questioni di disabilità:
quindi voglio che le cose siano accessibili e sono cieco anch'io, quindi apprezzo tutti i siti che fanno la loro parte.
C'è un modo per assegnare un testo ALT a questo link immagine composto dal titolo della pagina a cui sta collegando? Al momento il mio screen reader legge solo il nome del file dell'immagine, il che a volte non è molto utile.
Il tuo aiuto è molto apprezzato.
Dale.