WordPress: come inserire le immagini in evidenza nel Tema Twenty Eleven in 3 modi differenti

Pur non essendo un programmatore mi piace sperimentare in locale le varie potenzialità che offre WordPress. Provando Il Tema Twenty Eleven (il predefinito di WordPress) mi sono accorto che è si un tema semplice, leggero, senza molti fronzoli ma con qualche piccola personalizzazione può dare soddisfazioni anche dal punto di vista grafico.

Inoltre considera che è responsive, ovvero già compatibile con il mobile senza dover aggiungere plugin specifici.

 

Se usi le immagini, ma non sfrutti l’opzione immagini in evidenza, stai trascurando un particolare grafico che, a mio avviso, migliora sensibilmente l’aspetto di un blog oltre al fatto di alleggerire la pagina principale dove sono riassunti gli articoli.

Per utilizzare la funzione immagine in evidenza con questo tema hai tre possibilità:

  • attivando il template vetrina (show case)
  • inserendola in modo che sostituisca la testata
  • metterla come miniatura

Per sfruttare il template vetrina devi impostare come home page del blog una pagina vuota selezionando quel template.

Impostare come articoli in evidenza quelli che vorrai far apparire con questo “effetto”. Quindi  per ogni articolo interessato impostare l’immagine in evidenza.

L’immagine in evidenza che sceglierai potrà essere mostrata in due modi differenti, a seconda delle dimensioni scelte.

L’ideale è usare un immagine che abbia le identiche dimensione della testata, ovvero 1000 x 288 px.

In questo modo in home page l’articolo verrà mostrato con l’anteprima dell’immagine a tutta pagina e il titolo dell’articolo in sovraimpressione. Cliccando sulla sull’immagine, o sul titolo, vedrai l’articolo interamente e l’immagine (impostata come in evidenza) andrà a sostituire quella della testata del sito con un effetto molto gradevole.

Wordpress: immagine in evidenza col template vetrina

Se invece usi un immagine con dimensioni inferiori a quelle sopra citate, in home page avrai l’articolo con il riassunto del testo a sinistra e a destra l’immagine scelta. Aprendo l’articolo per intero non vedrai però nessun cambiamento nella testata del sito, ovvero ci sarà l’immagine scelta come header del tuo tema.

Wordpress: immagine in evidenza col template vetrina opzione 2

Altra caratteristica interessante di questo template è che tutti gli articoli che avrai impostato con l’immagine in evidenza e l’articolo in evidenza, appariranno con le immagini sotto forma di slide.

Il secondo modo è simile

In questo caso non usando il template vetrina non devi cambiare le impostazione della Home Page.

Scrivi gli articoli come fai normalmente e al momento di scegliere l’immagine in evidenza devi prenderne una che sia esattamente 1000 x 288 px. Se è più piccola non apparirà, se più grande l’effetto potrebbe essere sgradevole.

Una volta inserita l’immagine e pubblicato l’articolo Non avrai nessuna miniatura nella pagina in cui viene mostrato l’elenco degli articoli ma andando a leggere l’articolo per intero l’immagine scelta, anche in questo, caso, andrà a sostituire l’immagine di testata.

Wordpress: immagine in evidenza senza il template vetrina

Terzo: la miniatura nell’anteprima articolo

Fino alla versione 1.3 il tema pur supportando le miniature non le mostrava se non dopo aver aggiunto alcune righe di codice nei file del tema. Dalla versione di WordPress 3.4 il tema è stato aggiornato alla 1.4 e il codice necessario è stato integrato.  Vedi questo articolo per mostrare le miniature nel tema Twenty Eleven aggiungendo il codice e modificare il Twenty Twelve.

Ecco invece come puoi personalizzarne l’aspetto con poche righe di css.

Per ottenere questo risultato devi intervenire sul file stile.css e aggiungere lo stile che vuoi dargli, per esempio:

.attachment-thumbnail{float:left;
margin:7px 10px 0 0;
border:1px solid #a6a6a6;
background:#f0f0f0;
padding:3px;}

 

Wordpress: immagine in evidenza personalizzando il css

volendo puoi anche usare un’immagine come sfondo della miniatura. Basta sostituire la voce background con il seguente codice e ovviamente inserire l’immagine nella cartella images del tema. 🙂

 

background-image:url(images/nomeimmagine.jpg);

ed ecco il risultato.

Wordpress: immagine in evidenza cambiando sfondo

In conclusione

Come hai visto questi sono tre semplici modi per sfruttare le immagini in evidenza col tema Twenty Eleven e rendere più invitanti i tuoi contenuti. Un tema semplice, leggero, scritto con i nuovi linguaggi (html5 e css3) che permette buone personalizzazioni e soprattutto è già predisposto per il mobile.

Che ne pensi? Tu usi le immagini in evidenza?

4 commenti in “WordPress: come inserire le immagini in evidenza nel Tema Twenty Eleven in 3 modi differenti

Avatar image
Nevosky 22:14

Ciao potresti spiegarmi meglio la miniatura nell’anteprima articolo??

Io vorrei che nell’anteprima dell’articolo comparisse l’immagine in evidenza, e poi quando si clicca su read more, scomparisse 😀

Non riesco a farlo però

Avatar image
Marco 10:32

Ciao,

In pratica vuoi che la miniatura non appaia nell’articolo singolo?
mi sono accorto ora che il tema twenty eleven è stato cambiato e le miniature non appaiono se non si aggiunge il codice… 🙁

Quindi tu che tema usi?

Avatar image
Francesca 11:23

ciao, ho appena aperto un blog wordpress con questo tema…
piccolo problemino…
il mio blog ha 7 pagine (compresa la Home), vorrei che l’immagine testata fosse diversa per ogni pagina, in modo tale da riprendere le diverse categorie di argomento trattate.
avevo fatto una prova ed era andata a buon fine semplicemente andando su Pagine>imposta immagine in evidenza>aggiorna.

Poi siccome l’immagine di prova che avevo messo aveva una risoluzione troppo bassa, l’ho rimossa. Adesso, seguendo lo stesso procedimento mi mostra l’immagine nel momento in qui vado a modificarla, ma quando gli chiedo di farmi un’anteprima della pagina con la nuova immagine, ho sempre e solo quella della testata principale…
non so se sono riuscita a spiegarmi…

puoi aiutarmi ?
grazie

Avatar image
Marco 18:15

Ciao Francesca,
ti sei spiegata bene.
L’unico motivo (che io conosca) per cui succede questo è se l’immagine in evidenza che hai scelto non è esattamente 1000×288 px.

L’ho fatto più e più volte e ha sempre funzionato.
Controlla che il tema sia aggiornato e le immagini 1000x288px

Se non funziona prova a disattivare e riattivare i plugin uno per volta.

Un saluto

Marco 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *