Come rendere responsive le immagini WordPress
WordPress è una piattaforma davvero potente. Creare un tema reattivo e integrarlo è piuttosto facile una volta che si conoscono le basi del tema. Le immagini reattive, d'altra parte, non sono qualcosa con cui WordPress si occupa immediatamente. È possibile seguire il percorso della generazione manuale di ciascuna dimensione dell'immagine, quindi nell'editor HTML è possibile digitare manualmente il tag immagine, gli attributi srcset e ogni immagine. Ciò non richiederà solo tempo, ma potrebbe essere un problema per qualsiasi utente amministratore che non abbia una conoscenza HTML.
Per fortuna c'è un modo per rendere WordPress fare tutto il lavoro pesante. Può generare tutte le dimensioni dell'immagine da un singolo caricamento di immagine, quindi, tramite un plugin, implementare il tag immagine e gli attributi srcset ovunque l'autore scelga di inserire un'immagine.
Passaggio 1: modifica functions.php per generare più dimensioni di immagine
Ogni volta che carichi un'immagine, WordPress la salva alla sua dimensione nativa. Genera automaticamente anche 3 copie ridimensionate in questi formati standard (l'altezza o la larghezza possono variare in base al rapporto di immagine):
- Miniatura (150 × 150)
- Medio (300 × 300)
- Grande (1024 × 1024)
Questa è una funzionalità davvero potente in quanto può essere personalizzata per rendere qualsiasi dimensione dell'immagine. Ciò significa che non è necessario creare più copie di un'immagine in diverse dimensioni. Devi solo caricare una singola immagine e WordPress crea le copie ridimensionate.
Questo viene fatto modificando il file functions.php. Per aggiungere nuove dimensioni di immagine, è necessario aggiungere chiamate alla funzione add_image_size . Ecco un esempio che aggiunge quattro nuove dimensioni di immagine:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Ogni chiamata alla funzione include un nome (quindi WordPress può identificare la dimensione) e una larghezza. Le nuove dimensioni saranno 300, 600, 1200 e 2400 pixel di larghezza. È possibile con la funzione add_image_size che WordPress imposti anche l'altezza o ritaglia l'immagine, ma l'esempio sopra conserverà le proporzioni originali dell'immagine. (È possibile trovare ulteriori informazioni sulla funzione add_image_size in Codice WordPress .)
L'esempio sopra mostra solo quattro nuove dimensioni di immagine che vengono aggiunte, ma potresti voler aggiungere più o meno ... questo sarà basato sulla tua progettazione del tema. Ora ogni volta che un'immagine viene caricata su WordPress, genererà le nuove dimensioni dell'immagine. Il prossimo passo è includerli nell'HTML.
Passaggio 2: installa il plug-in di immagini reattive RICG
Affinché WordPress produca tutte le dimensioni dell'immagine, è necessario installare un nuovo plug-in: il Immagini Responsive RICG collegare. Una volta installato e attivato, tutte le dimensioni delle immagini verranno incluse nel tag immagine tramite l'attributo srcset.
In genere quando un'immagine viene aggiunta a una pagina in WordPress, l'output HTML appare come segue:
C'è una singola immagine nell'attributo src.
Una volta installato il plugin, l'HTML sarà simile a questo:
Tutte le nuove dimensioni dell'immagine sono state aggiunte tramite l'attributo srcset .
Il plugin include anche Picturefill.js , un polyfill di immagini reattive che aggiunge il supporto sia per l'elemento picture che per i nuovi attributi responsive per l'elemento img. Questo, insieme agli attributi srcset ora inclusi nel tag immagine, è ciò che rende le tue immagini reattive.
Le tue immagini sono ora reattive
Ora le immagini sul tuo sito web saranno reattive: il browser sceglierà l'immagine più appropriata da scaricare.
Gli utenti su dispositivi con schermi più piccoli otterranno le immagini più piccole. Il tuo sito web si caricherà più velocemente poiché queste immagini verranno scaricate più rapidamente, avranno bisogno di meno larghezza di banda degli utenti. Gli utenti su dispositivi con schermi più grandi otterranno le immagini più grandi. Non appariranno pixelati o di qualità inferiore.
C'è solo un potenziale problema con questo metodo: funzionerà solo con le immagini caricate su WordPress dopo che è stato installato il plug-in RICC Responsive Images. Se si tratta di un sito web nuovo di zecca su cui stai lavorando, questo potrebbe non essere un problema, tuttavia se si tratta di un sito esistente con contenuti esistenti, le nuove dimensioni dell'immagine che hai aggiunto in functions.php non saranno state generate. Per fortuna, non è necessario aggiungere nuovamente tutte le immagini: è disponibile un plug-in che può essere d'aiuto.
Passaggio 3: Installa il plug-in per ricreare le dimensioni dell'immagine (facoltativo)
Il Rigenera miniature il plugin passerà attraverso tutti gli allegati dell'immagine esistenti e rigenererà le nuove dimensioni dell'immagine in base a quelle nuove create in functions.php - è un vero risparmio di tempo e richiede solo il clic di un singolo pulsante.
Una volta installato, vai su Strumenti -> Regen. Miniature quindi fare clic sul pulsante "Rigenera tutte le anteprime". Apparirà una barra di stato e vedrai le informazioni sul numero di immagini ridimensionate.
Ora, tutte le immagini esistenti nel tuo sito web verranno emesse correttamente usando il tag immagine tramite l'attributo srcset .
Usi dell'immagine in vetrina immagine del dispositivo e immagine del dispositivo mobile via Shutterstock.