Come modellare le immagini sul tuo sito Web WordPress con CSS

Sono sicuro che hai già un'idea di quanto siano importanti le immagini per il successo del tuo sito web.

Ma quando si tratta di aumentare il coinvolgimento (e, in definitiva, i tuoi profitti), non si tratta solo di includere immagini nel tuo sito, ma di quali immagini includi e come le presenti.

In questo post voglio affrontare un pezzo importante di quel puzzle: la presentazione.

WordPress viene fornito preconfezionato con semplici mezzi per lo styling delle immagini con CSS. Hai il potere di creare effetti diversi per le varie classi CSS che WordPress assegna automaticamente alle immagini sul tuo sito. (Se sembra che io abbia iniziato a parlare in una lingua straniera, non preoccuparti, ti spiegherò tutto in dettaglio più avanti nell'articolo.)

Inizierò ad approfondire i motivi per cui le immagini sono così importanti per il tuo sito, quindi passerò a coprire le classi CSS predefinite che WordPress applica alle immagini e infine dimostrerò come puoi utilizzare i CSS per applicare stili personalizzati alle tue immagini .

• Perché le immagini sono così importanti per i siti web
• Un corso crash CSS di WordPress
• Come aggiungere CSS personalizzati a WordPress
• Le classi di immagini CSS predefinite di WordPress
• Stile semplice delle immagini con WordPress
• Altri esempi di cosa puoi fare con i CSS di immagini in WordPress
• Che dire degli stili esistenti?
• Il cielo è il limite

Perché le immagini sono così importanti per i siti web

Quale modo migliore per spiegare quanto siano utili le immagini per i blog se non dimostrarlo con un'immagine?

Le cose diventano ancora più interessanti quando si scende alla biologia di come elaboriamo le informazioni. Si consideri ad esempio che il 90% delle informazioni trasmesse al cervello è visivo e il 40% delle persone risponde meglio alle informazioni visive che al testo normale (fonte: Zabisco).

Ma siamo onesti: non ho bisogno di lanciarti statistiche per farti capire. Sai dalle tue abitudini che i siti Web e i blog visivamente accattivanti hanno molte più probabilità di attirare la tua attenzione rispetto a una massa di testo. Le immagini aggiungono colore, fascino e intrighi. Sparano una serie di reazioni nel nostro cervello prima ancora che avessimo la possibilità di iniziare a leggere.

In parole povere, se non includi immagini interessanti e pertinenti nei post del tuo blog, non sei affatto vicino a ottenere il massimo dai tuoi contenuti. Fare il possibile quando si tratta di includere immagini nei post del tuo blog e presentarle bene può fare la differenza in termini di coinvolgimento, traffico e vendite.

Un corso crash CSS di WordPress

Gli sviluppatori principali di WordPress sono fin troppo consapevoli dell'importanza delle immagini per i siti Web, motivo per cui offrono agli sviluppatori di temi (e ai tweaker di temi) una grande potenza e flessibilità nel determinare come vengono presentate le immagini.

Tale potenza e flessibilità sono offerte sotto forma di un certo numero di classi CSS. Ma prima di andare oltre, prendiamoci un momento per darti un'idea di cosa sono i CSS e come puoi usarli.

CSS sta per Cascading Style Sheets: un linguaggio di markup utilizzato per determinare l'aspetto delle pagine web. CSS è combinato con HTML (Hyper Text Markup Language), che è il linguaggio di markup utilizzato per definire la struttura semantica di un sito web. Se questo non ha molto senso per te, non preoccuparti: sono più informazioni supplementari del necessario.

CSS è un linguaggio semplice, una volta capito. In termini di possibilità di alterare l'aspetto e il posizionamento delle immagini, sarai in grado di raccogliere e lavorare con il codice che includo in questo articolo con relativa facilità.

Ecco un esempio di uno snippet di codice CSS relativo all'aspetto di un particolare tipo di immagine in WordPress:

 .alignright {
	bordo: 1px solido # c5c5c5;
	galleggiante: a destra;
	margine: 0 0 10px 10px;
	imbottitura: 3px;
}

Il testo .alignright è una classe CSS (identificabile come classe dal punto che precede il suo nome). In questo caso, .alignright è una classe che WordPress assegna a qualsiasi immagine selezionata all'interno del backend di WordPress per essere allineata a destra del contenuto:

Varie dichiarazioni (come border e padding ) possono essere applicate a una classe CSS, che vengono infine applicate a qualsiasi elemento HTML a cui è stata assegnata la classe in questione.

Nell'esempio sopra, qualsiasi immagine in WordPress che è stata allineata a destra (tramite l'editor di testo) avrà la classe .alignright assegnata, e quindi erediterà lo stile applicato a quella classe. L'immagine "fluttuerà" a destra, avrà un piccolo margine per evitare che il testo vi entri dentro, un bordo grigio attorno ad essa e un piccolo riempimento per separare il bordo dal bordo dell'immagine.

Tutto questo avrà molto più senso con una rappresentazione visiva:

Ci sono molte altre dichiarazioni che possono essere aggiunte a una classe CSS; ci divertiremo un po' con loro a breve.

Come aggiungere CSS personalizzati a WordPress

I temi WordPress vengono forniti con i propri "fogli di stile" CSS, che sono file pieni di markup CSS come nell'esempio sopra. Sebbene ci siano molti modi per aggiungere il tuo CSS personalizzato al tuo sito web, la modifica del foglio di stile CSS di un tema esistente non è la strada da percorrere. Il tuo duro lavoro potrebbe essere sovrascritto al prossimo aggiornamento del tema.

Il metodo più pulito e a prova di futuro è creare il tuo semplice "tema figlio" di WordPress con il proprio foglio di stile CSS. Il foglio di stile CSS all'interno della directory del tema figlio sovrascriverà qualsiasi stile corrispondente all'interno del foglio di stile del tema "genitore".

La creazione di un tema figlio può sembrare un esercizio alquanto scoraggiante, ma è abbastanza facile se hai familiarità con FTP. Se vuoi percorrere questa strada, dai un'occhiata al tutorial sul codice di WordPress.

Se stai cercando qualcosa di più semplice, ho due suggerimenti per i plugin:

1. Il modulo CSS personalizzato all'interno di Jetpack: ideale se utilizzi già Jetpack sul tuo sito.
2. CSS personalizzato semplice: se non usi già Jetpack (e non hai bisogno delle sue varie funzionalità), questa è un'opzione più leggera.

Qualunque opzione tu scelga, aggiungere CSS personalizzati a WordPress sarà semplice come modificare il file CSS personalizzato che è stato generato (da te o da uno dei plugin).

Le classi di immagini CSS predefinite di WordPress

Con tutto questo fuori mano, passiamo alle cose succose: le classi CSS di immagini predefinite di WordPress.

Esistono quattro classi predefinite che puoi utilizzare per modificare l'aspetto delle immagini in WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Sono sicuro che puoi capire a quali tipi di immagini sono assegnate queste classi.

A ogni singola immagine che aggiungi al tuo sito Web tramite l'editor di testo TinyMCE nelle schermate dei post/delle pagine verrà assegnata una di queste classi, il che significa che hai il potere di modellare tutte queste immagini come meglio credi.

Per dare uno stile a un particolare tipo di immagine, tutto ciò che devi fare è seguire il formato che hai già visto nell'esempio sopra:

 .nome della classe {
	costo dell'immobile;
	costo dell'immobile;
	costo dell'immobile;
}

Importante: quando un'immagine ha una didascalia, WordPress assegna una delle classi precedenti a un div che circonda l'immagine, anziché all'immagine stessa. Affrontare questo particolare problema esula dallo scopo di questo post, ma è qualcosa da tenere a mente mentre si sperimenta. Ti consiglio di testare gli effetti scelti con immagini con didascalie per vedere come appaiono le cose.

Detto questo, passiamo alla parte divertente: lo styling delle tue immagini!

Stile semplice delle immagini con WordPress

Quando si tratta di aggiungere semplici effetti stilistici alle tue immagini in WordPress, ci sono cinque proprietà CSS comuni:

1. background
2. border
3. float
4. margin
5. padding

Per ottenere una comprensione completa di come queste proprietà influenzino l'aspetto di un'immagine (o più precisamente, l'aspetto del 'frame' in cui è collocata l'immagine), dobbiamo considerare il 'box model' CSS:

Quando si tratta di dare uno stile alle immagini, l'immagine stessa è il "contenuto". Quell'immagine è quindi circondata da padding, bordi e margini; tutto ciò che puoi definire. Le immagini possono anche essere "fluttuate", che ai fini di questo tutorial significa semplicemente allineate. Le tue opzioni "flottanti" sono sinistra, destra e nessuna. (Centrare un'immagine è un po' più complicato; ne parleremo a breve.)

Consideriamo un semplice esempio per dimostrare come queste proprietà possono essere utilizzate. Innanzitutto, ecco un'immagine con la classe .alignright assegnata, senza alcun markup CSS:

Ora aggiungiamo un semplice markup CSS:

 .alignright {
	sfondo: grigio;
	bordo: 3px nero pieno;
	galleggiante: a destra;
	margine: 10px;
	imbottitura: 3px;
}

Ecco l'effetto finale:

Probabilmente puoi decifrare cosa abbiamo fatto qui. L'immagine è stata ora "fluttuata" (cioè allineata) a destra, in modo che il testo si avvolga attorno ad essa. Abbiamo aggiunto un po' di imbottitura, a cui è stato dato uno sfondo grigio. Abbiamo applicato uno spesso bordo nero che appare attorno all'imbottitura. Infine, un margine di 10px crea spazio tra l'immagine e il testo.

C'è molto che puoi fare solo con i cinque selettori sopra. Se vuoi esplorarli ulteriormente, ecco una risorsa completa per ciascuno di essi:

• background
• border
• float
• margin
• padding

Ho promesso una soluzione anche per centrare le immagini. Per ragioni che esulano dallo scopo di questo tutorial, i CSS non ti consentono semplicemente di usare float: center; (cioè il valore non esiste). Invece, devi definire l'immagine come un elemento di blocco , applica margin: 0 auto; e definire una larghezza per l'immagine. Puoi leggere di più su questa tecnica qui. (Di seguito fornirò anche un esempio del markup utilizzato per creare un'immagine centrata.)

Altri esempi di cosa puoi fare con i CSS di immagini in WordPress

Ora che hai una migliore comprensione delle proprietà CSS più comuni che puoi utilizzare, ecco alcuni esempi per darti ispirazione.

Iniziamo con un po' di padding e uno sfondo grigio per dare una cornice alle nostre immagini:

 .allineare a sinistra {
	sfondo: #dbdbdb;
	galleggiante: sinistra;
	margine: 0 10px 5px 0;
	imbottitura: 5px;
}

Quel markup risulta in questo:

Esploriamo cosa è successo qui:

• Ho usato un colore esadecimale HTML per lo sfondo. Questi codici colore ti offrono una flessibilità praticamente illimitata nella scelta dei colori per il tuo sito web.
• Poiché l'immagine che ho utilizzato è un PNG trasparente, il colore di background ha riempito tutto lo spazio disponibile non utilizzato all'interno del file immagine.
• Ho usato quattro valori all'interno della proprietà margin per impostare margini diversi per ciascun lato dell'immagine.

Proviamo qualcos'altro. Invece di dare alle nostre immagini un colore di sfondo, impostiamole in un semplice bordo per delinearle dal contenuto. Ecco il markup:

 .alignright {
	bordo: 1px solido #000099;
	galleggiante: a destra;
	margine: 0 0 10px 10px;
	imbottitura: 3px;
}

Come puoi vedere, abbiamo giocato con i valori delle proprietà del margin per tenere conto dell'allineamento dell'immagine, ridotto il riempimento e aggiunto un bordo solido di 1px. Ecco il risultato finale:

Infine, creiamo un'immagine centrata e diamogli uno spesso bordo grigio. Ecco il markup:

 .allinea al centro {
	bordo: 5px solido #dbdbdb;
	blocco di visualizzazione;
	margine: 0 automatico;
	larghezza: 300px;
}

E il risultato finale:

Come puoi vedere, è possibile modificare completamente il posizionamento e l'aspetto di un'immagine in WordPress utilizzando solo i CSS.

In realtà qui abbiamo solo scalfito la superficie; c'è molto di più che puoi fare. (Se sei interessato a scoprire di più, ho fornito alcune risorse utili per ulteriori approfondimenti di seguito.)

Che dire degli stili esistenti?

Se stai utilizzando un tema WordPress di qualsiasi qualità reale, lo sviluppatore avrà già aggiunto stili a ciascuna delle classi di immagini predefinite di WordPress. Per lo meno avrà allineato ogni classe di immagine in modo appropriato.

Oltre a ciò, le sue scelte saranno state del tutto soggettive e ora hai il potere di ignorare i loro effetti di styling. Qualsiasi markup CSS che inserisci, sul foglio di stile del tuo tema figlio o tramite un plug-in, avrà la precedenza sul CSS predefinito del tema. Hai il controllo.

Il cielo è il limite

Leggendo questo articolo, spero anche che tu sia ispirato a sperimentare i tuoi stili CSS personalizzati. Non volevo approfondire i selettori più avanzati in questo tutorial, ma c'è molto di più che puoi fare con i CSS di quanto ho trattato qui.

Se desideri esplorare effetti più avanzati (come ombre, arrotondamento e rotazione), c'è un numero enorme di risorse online gratuite che possono insegnarti di più sui CSS. I miei consigli personali sono:

• Mozilla Developer Network: amato dalla comunità degli sviluppatori web.
• Scuole W3: odiate da molti sviluppatori web "seri", ma non si può confutare la sua profondità e ampiezza di informazioni. Tieni presente che potrebbe non essere sempre corretto e/o aggiornato al 100%.
• Codice WordPress: scopri di più su come WordPress e CSS si uniscono.

Se hai domande, non esitare a sparare nella sezione commenti qui sotto!

Credito fotografico: Simon Pow, PicJumbo.

• CSS
• immagini