Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Inserire l’immagine di anteprima di un articolo in homepage in WordPress

Inserire l'immagine di anteprima di un post in homepage in WordPress


Può capitare di voler inserire l’immagine di anteprima (thumbnail) dell’articolo direttamente in homepage… infatti alcuni temi, specialmente quelli gratuiti, non offrono questa soluzione (ecco anche il motivo per cui consiglio di acquistare i temi professionali). Ma non disperarti, in questo articolo ti guiderò alla modifica del tema per inserire le immagini di anteprima in homepage, il tutto in pochi minuti (si spera ;)).

Questo è il risultato finale che ho ottenuto:

risultato finale

Parola d’ordine: backup

Per prima cosa, scarica via ftp l’intera cartella del tuo tema che trovi in wp-content/themes/nome-tema/ , giusto per avere un po’ più di sicurezza e tranquillità nel caso di errori.

Prima di partire è bene che tu capisca cos’è il tema child e perchè dovresti usarlo.

Il tuo tema supporta le thumbnails?

Controlla se nel file functions.php del tema che hai scaricato è presente il seguente codice:

add_theme_support( 'post-thumbnails' );

Se è presente, non devi fare niente.

Se invece non è presente, allora devi inserire prima dell’ultimo tag ?> nel file functions.php del tema che vuoi modificare (child o originale)  il seguente codice:

add_theme_support( 'post-thumbnails' );

Ora il tuo tema supporta le thumbnails :)

Inserisci le thumbnails in homepage

Apri il file che genera l’homepage, solitamente è index.php. Come fare a capire se è il file corretto? Leggi l’articolo come e dove modificare WordPress.

Cerca il punto in cui è presente il codice the_content oppure the_excerpt. Prima di tale codice, inserisci questo:

<!-- Codice per mostrare l'immagine di anteprima in homepage by Roberto Iacono di robertoiacono.it -->
<div class="postThumb">
	<a href="<?php the_permalink(); ?>">
		<?php
		if ( has_post_thumbnail() ) {
			the_post_thumbnail('thumbnail');
		}
		else {
			echo '<img src="Digita l URL della immagine di default" />';
		}
		?>
	</a>
</div>

In pratica, se l’articolo ha un’immagine in evidenza, mostra la miniatura (thumbnail) dell’immagine in evidenza associata al post stesso, all’interno di un contenitore div (con classe class=”postThumb”), il quale permetterà una gestione semplificata dello stile tramite codice CSS. Altrimenti, mostra un’immagine di default, che dovrai indicare inserendo l’URL dell’immagine alla riga 9.

Ora dovresti veder comparire qualcosa in homepage! Se l’aspetto è orribile, non ti preoccupare… presto rimedierai :)

Le miniature vengono mostrate in homepage, ma è possibile che vengano mostrate anche nella pagina categorie, tag, search, a seconda di come è strutturato il codice. Per mostrare le immagini solamente in homepage, dovrai inserire questa condizione:

<?php if(is_home()) : ?>
    CODICE CHE TI HO FORNITO SOPRA
<?php endif; ?>

Imposta le dimensioni delle miniature

Prima di tutto, devi decidere le dimensioni delle thumbnail. Molti utilizzano le classiche 150×150 oppure 100×100, probabilmente sono le migliori per diffondere i contenuti sui social network (che sono ottimizzati per creare le miniature quadrate), altrimenti puoi osare un po’ di più con miniature rettangolari.

Per impostare queste dimensioni, vai su Impostazioni > Media > Dimensione Miniatura > :

dimensioni miniatura

Digita le dimensioni e salva.

Se hai già caricato delle immagini, dovrai rigenerare tutte le miniature a mano… Scherzo! 😛 Mi sarebbe piaciuto vedere la tua espressione suicida :) Utilizza il plugin Regenerate Thumbnails per questo scopo. Installalo e premi il pulsante Regenerate All Thumbnails nella pagina delle impostazioni del plugin, niente di più semplice.

Un po’ di stile

È ora di passare allo stile delle miniature. Aggiungi il seguente codice nell’ultima riga del file style.css:

/* Stile per la miniatura in homepage by Roberto Iacono di robertoiacono.it */
.postThumb{
	float:left;
	margin:15px 10px 15px 0;
	display:block;
}
.postThumb img{
	border:none;
	background:#F0F0F0;
	padding:1px;
	border:1px solid #ccc;
}

Questo codice aggiunge un bordo sottile ma elegante ed un piccolo un margine attorno all’immagine. Lo stile float:left, serve per poter contornare l’immagine con il testo, quindi otterrai il seguente risultato: immagine a sinistra, testo a destra.

Come impostare l’immagine da mostrare in homepage?

Dopo che hai inserito tutto il codice, non ti resta altro da fare che impostare quale immagine mostrare in homepage per ogni articolo. Per farlo, WordPress mette a disposizione il box Immagine in evidenza durante la modifica/creazione dell’articolo:

Immagine in evidenza

Se non vedi questo box, vai in alto a destra, premi su Impostazioni schermo e seleziona la casella Immagine in evidenza.

In questo box, premi il link Imposta l’immagine in evidenza e seleziona l’immagine che vuoi che venga mostrata in homepage… niente di più semplice.

Ricordati che dovrai fare questo procedimento a mano per tutti i nuovi post! Per i vecchi articoli, puoi utilizzare il plugin Auto Featured Image che permette di assegnare in automatico tutte le immagini in evidenza dei vecchi articoli, risparmiandoti un sacco di lavoro.

Dì la tua

Hai qualche suggerimento da dare per lo stile della miniatura? Scrivilo nei commenti qui sotto… e goditi le tue nuove immagini di anteprima!


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
30 Commenti
  • Matteo Cazzoli

    Ciao roberto,
    ho letto molti dei tuoi articoli e mi sono stati molto utili, ma è un paio di giorni che stò cercando di mettere le thumbnail nella home degli articoli e in un altra pagina…
    ho seguito alcune guide e provato un bel po di plugin ma senza risultati.

    il sito lo sto creando in locale, per poi “sovrascriverlo” al sito veloclubmecenate.it che ho fatto qualche anno fa ma come potrai vedere attualmente è tutto forche bello.

    se hai tempo di darmi una mano mi puoi contattare per mail, fb o g+ come preferisci e se hai bisogno di vedere delle cose di persone ti posso fornire id e password di teamviewer per il collegamento remoto

    grazie per l’auito e complimenti per il blog

    • Roberto Iacono

      Ti ringrazio Matteo!
      Non ho capito che problemi hai riscontrato seguendo la mia guida… puoi essere più preciso?

      • Matteo Cazzoli

        voglio premettere che di programmazione web non so molto… ho inserito il codice necessario ad attivare le THUMBNAILS, poi ho cercato di inserire in piu parti il codice per visualizzarle ma come prima cosa me lo posiziona o sopra o sotto l’articolo e non dove vorrei e in secondo luogo mi viene fuori solo il quadratino come se non trovasse l’immagine da visualizzarle.

        il secondo problema è che non devo farle uscire solo nella “home” degli articoli ma in alcune pagine che contegono 2 o piu categorie come ad esempio la pagina multimedia che contiene gli articoli di categoria “foto” e “filmati” o quella news, con le “news”, le “programmazioni”, ecc-

        • Roberto Iacono

          Allora,

          1. Per la posizione, devi modificare il codice CSS, ovvero devi modificare il codice che trovi nell’articolo: .postThumb {CODICE CSS} …
          Può essere che il titolo sia largo tutta la colonna, in questo caso il box che contiene l’immagine va o sopra o sotto, a seconda di dove hai inserito il codice.
          Modifica la larghezza del contenitore del titolo.

          2. Se non trova l’immagine, è perchè l’indirizzo dell’immagine non è corretto. Controlla qual è l’indirizzo e cerca di capire come mai esce quello.

          3. Così com’è, viene l’immagine viene mostrata ovunque.

          • Matteo Cazzoli

            grazie per l’aiuto…
            qualche progresso l’ho fatto, aggiungendo un po di css per qualche effetto(da rifinire) e per le dimensioni dell’immagine…
            l’immagine ora si vede, ma ho ancora due problemi…
            il primo è ancora la posizione…
            ti allego uno Screenshot: docs.google.com/file/d/0B1NCR_Q1yRADUl9FTDM5UUoxTmM/edit

            io lo verrei di fianco al titolo

            il secondo è che non si vede ancora nelle categorie e nelle pagine in cui ho messo 2+ categorie…

            il codice per attivare visualizzarle l’ho messo nell’index.php… in quali altri file dovrei metterlo per visualizzarlo anche nelle altre pagine

          • Roberto Iacono

            Per inserirlo a fianco del titolo, devi prima di tutto aggiungere il codice subito prima del codice che mostra il titolo, cerca qualcosa come title(

            Per mostrarlo nelle categorie, devi capire quale file genera le categorie, magari hai un category.php … altrimenti leggi http://www.robertoiacono.it/come-dove-modificare-wordpress/

          • Matteo Cazzoli

            ti rispondo qui dato che piu giu non riesco…

            grazie ai tuoi consigli ho quasi terminato…
            ora l’immagine si vede in tutti i posti che volevo…

            il problema rimane in parte la posizione della foto.
            l’ho messa nel “box” ma non riesco a mettere il titolo e la categoria di fianco alla foto…

            ti allego il nuovo screenshot:
            docs.google.com/file/d/0B1NCR_Q1yRADcUhDMkUtX2dGWXM/edit

            il file content.php dove ho attuato le modifiche fino ad ora
            docs.google.com/file/d/0B1NCR_Q1yRADT2xTeTVOQkVQdVk/edit

            e il file style.php dove in fondo c’è una parte del codice da te proposto per gli effetti:
            docs.google.com/file/d/0B1NCR_Q1yRADRlNzeFNUSDhwSWs/edit

            se hai un attimo di tempo puo vedere se riesci a risolvere? come ti ho detto le mie conoscenze si fermano alle basi e questo è molto al di sopra delle mie possibilità

          • Roberto Iacono

            Tramite FireBug, prova ad aggiungere float:left; al titolo e alla descrizione, guarda cosa accade.
            Altrimenti puoi inserire il titolo e la descrizione in un contenitore (div) e poi “dare il float” al contenitore.

          • saimon

            ciao roberto grazie mille per i post sempre utilissimi…
            riesco a fare tutto, solo che chiaramente nei post mi escono le icone
            come se non trovasse l’ immagine…però perchè non posso inserire tutti gli url….
            ho 400 post! sto sbagliando qualcosa forse??
            grazie mille!

          • Roberto Iacono

            Hai impostato le immagini in evidenza per gli articoli?

  • Alessio Morici

    Ciao, Grazie mille per il tutorial, ma volevo porti una domanda, è possibile inserire le anteprime di una sola categoria o di un solo articolo in homepage ?
    Grazie mille Alessio

    • Roberto Iacono

      Ciao Alessio,
      non ho capito bene… la categoria non ha l’anteprima, mentre puoi mostrare l’anteprima di un solo articolo e di tutti gli altri no.

  • Matteo Cazzoli

    Roberto grazie per l’aiuto ma questa volta la vedo dura… ho provato un sacco di combinazioni (ho ottenuto anche effetti pittoreschi) ma non sono mai riuscito a far venir fuori qualcosa che almeno si avvicinasse a quello che voglio.

    ho provato anche a seguire alcune “guide” su come usare il comando float ma non si vuole schiodare da quella posizione :(

    • Matteo Cazzoli

      alla fine ci sono riuscito… praticamente c’era un tag che impediva al testo di andare nella posizione in cui volevo io…
      poi seguendo i tuoi consigli è stato relativamente veloce aggiustare il tutto…

      grazie ancora 😀

  • Wordpressor principante

    Ciao Roberto,guru di wordpress,ma se io volessi creare tante anteprime nella home stile giornale “newspaper”,per categoria?In un “box ” metti tipo 4 anteprime,in un altro altre 4 con una categoria diversa,in un elegant theme è possibile poi fare una cosa del genere?

    • Roberto Iacono

      Ciao WordPressor,
      ti ringrazio ma non sono un guru :)

      Il codice è lo stesso, devi “solamente” modificare le query che scelgono i post da visualizzare. I temi Elegant Themes solitamente offrono già questa impostazione (guarda l’anteprima del tema per capire se è già predisposto)

  • Wordpressor principante

    [Risolto] :)

  • Gianluca

    Ciao Roberto e complimenti per il sito. Io avrei un problema.
    Premetto che di programmazione non ne capisco niente. Io ho un sito dove vorrei che nella home si visualizzasse una thumbnail dell’immagine di una categoria, ma nella categoria si potesse vedere l’immagine intera. Ho provato in tutti i modi, ma sia nella home sia nella categoria le dimensioni vanno di pari passo. Quindi immagine grande nella categoria, immagine grande nella home.
    Visto che di programmazione non me ne intendo, ci sarebbe un plugin magari?

    • Roberto Iacono

      Plugin? Che io sappia no, ma non è detto che non esista…
      Io modificherei il tema…

  • christian

    Ciao Roberto e complimenti,
    ho un piccolo problema, ho inserito il codice dello stily.css nell’ultima riga,
    ma non succede nulla, le miniature rimangono sopra l’articolo

    • Roberto Iacono

      Dipende anche dal tema, se puoi, controlla con firebug e leggi http://www.robertoiacono.it/come-dove-modificare-wordpress/

  • Infotutorial

    Buongiorno Roberto,
    ho un piccolo sito che ripubblica video di youtube. E’ possibile inserire l’anteprima del video direttamente nelle thumbnail?
    Mi spiego meglio. Ora pubblico il video e aggiungo un’immagine (screenshot) del video come immagine in evidenza. Il risultato e’ buono in home page ma bruttissimo nella pagina del video dove compare sia lo screenshot che la preview del video.
    E’ quindi possibile far comparire direttamente il video (o la sua preview) al posto dell’immagine in evidenza?
    Grazie mille! :)
    Ps. spero di non essere andato troppo OT nel qual caso mi scuso.

    • Roberto Iacono

      Sì e sì :)
      Il problema è che devi mettere mano al codice.
      Io ti consiglio di lasciare tutto così com’è, ed eliminare l’immagine in evidenza che trovi all’apertura dell’articolo… è la soluzione più semplice.

  • Infotutorial

    Grazie mille per la veloce risposta! :)

    Per me andrebbe benissimo togliere l’immagine in evidenza all’apertura dell’articolo…ma non so come si faccia… :(

    • Roberto Iacono

      Leggi http://www.robertoiacono.it/come-dove-modificare-wordpress/ , probabilmente si trova in single.php

  • Infotutorial

    Ok grazie mille :)

  • Gianni

    Leggo sempre il tuo blog (grazie al quale sto facendo i miei primi timidissimi passi con WordPress) ed a proposito delle immagini in evidenza ho un problema.
    Utilizzo un tema a pagamento che mi inserisce le immagini in evidenza sopra al titolo: prima la foto e subito dopo attaccato il titolo. carino come effetto grafico, non c’è che dire.
    Ma c’è un problema: quando carico l’immagine in evidenza, la larghezza dell’immagine è sempre uguale per tutti i post (praticamente è come se si adattasse automaticamente alla larghezza della colonna centrale dell’articolo); e questo mi va bene. L’altezza delle immagini tuttavia è diversa. Così in ogni post mi appaiono immagini della stessa larghezza ma di altezza differente; e sembra molto male!
    Ho provato a caricare immagini delle stesse dimensioni, ma nulla!
    Come posso risolvere?
    Grazie in anticipo.
    GIANNI

    • Roberto Iacono

      Ciao Gianni,
      potresti impostare l’altezza e larghezza (height e width) nel codice HTML che mostra l’immagine, in questo modo viene ridimensionata correttamente.
      In alternativa, controlla in Impostazioni > Media che dimensioni hai impostato.

  • antonio

    Ciao Roberto complimenti innanzitutto per il sito…
    volevo parlarti di un problema che nessuno è riuscito a risolvermi ma che io stesso tempo fa su un altro sito ero riuscito a risolvere ma purtroppo non ricordo come feci…

    In pratica ho creato una pagina dove all’nnterno vi è un articolo ed a fianco un’immagine in evidenza che non voglio sia cliccabile purtroppo però la stessa è cliccabile e controlando il codice con firebug mi restituisce questo:

    dovrei in pratica rimuovere il tag a title ma non so dove sia perchè nel template della pagina non vi è traccia di quel tag…

    Spero tu riesca ad aiutarmi le ho provate tutte…

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614