Importanza delle immagini responsive in WordPress Core

La popolarità delle immagini responsive è in aumento ed è qualcosa che nessuno può ignorare. Tuttavia, l'utilizzo della stessa funzionalità in CMS popolari come WordPress può essere un'esperienza impegnativa. L'attività può richiedere molto tempo anche se è possibile per gli utenti scrivere funzionalità all'interno del tema stesso. Ma le cose sono cambiate radicalmente da quando è stato introdotto WordPress 4.4, rendendo molto più facile per sviluppatori e amministratori incorporare la funzionalità di immagine reattiva nei loro temi.

Il clou principale include la disponibilità del plug-in Responsive Images all'interno del core di WordPress. Ciò significa che gli utenti possono ora godere della presenza del supporto per immagini reattive che viene fornito come funzionalità predefinita all'interno di WordPress. Diamo un'occhiata da vicino a come funziona effettivamente questa funzionalità e come può essere utilizzata con attenzione in modo da sfruttare il potenziale del sito WordPress.

Funzionamento della funzione

Tutti i contenuti e le immagini saranno costituiti da srcset e dimensioni attributi, una volta che si aggiorna a WordPress 4.4. Questo principalmente per garantire la disponibilità di ogni dimensione dell'immagine in modo da mantenere l'effettiva dimensione dell'immagine richiesta. Durante i casi in cui le proporzioni variano rispetto all'immagine richiesta originale, i ritagli personalizzati verranno esclusi dall'attributo srcset . Allo stesso tempo, un'immagine reattiva verrebbe restituita quando un'immagine viene chiamata tramite la funzione wp-get-attachment-image.

Le immagini responsive fungono da funzionalità di sfondo in WordPress 4.4 a causa della sua funzionalità automatica che si verifica ogni volta che un'immagine viene caricata in WordPress tramite un caricatore multimediale. In automatico di risultati processo in background in srcset e dimensioni attributi visualizzati ogni volta che l'immagine appare in una pagina. Ciò significa che non ci sono interfacce visibili nella nuova funzione di immagini reattive. Nessuna delle opzioni come la presenza di moduli per la compilazione o caselle per la verifica e le opzioni per la commutazione è disponibile a causa della mancanza di interfacce visibili.

Gli sviluppatori di temi dovranno garantire che gli attributi di dimensioni accurati siano resi disponibili nelle immagini mediante la modifica del file functions.php del tema. E 'importante prendere in considerazione, perché gli attributi presenti nel tag di immagine srcset e le dimensioni è quello che in realtà rappresenta le immagini sensibili in WordPress. Il più difficile da prevedere è l'attributo delle dimensioni, anche se WordPress funziona bene quando si tratta di includere tutte le dimensioni disponibili all'interno dell'attributo srcset . È compito dell'attributo dimensioni spiegare al browser la larghezza dell'immagine in ogni finestra disponibile. Tuttavia i risultati possono variare a seconda dello stile disponibile con il tema dell'utente, fornendo l'impostazione predefinita ragionevole e cioè 'sizes=" (larghezza massima: {{image-width}}) 100 vw, {{image-width}}"

Con l'attributo dimensioni, gli utenti possono realizzare in particolare due cose. In primo luogo, garantisce la disponibilità di un attributo di taglie valido nell'immagine che è ormai diventato un prerequisito per quanto riguarda le specifiche. In secondo luogo, impedisce al browser di fornire un'origine dell'immagine maggiore rispetto alla larghezza originale richiesta. Tuttavia, il vantaggio dell'attributo delle dimensioni predefinite diminuisce ogni volta che un CSS manipola la dimensione dell'immagine con larghezze di visualizzazione completamente diverse.

Gli sviluppatori di temi possono regolare l'attributo delle dimensioni corrispondente a ciascuna immagine con l'aiuto di ganci di filtro per garantire la consegna dell'attributo delle dimensioni perfette durante ogni punto di interruzione. Pertanto è auspicabile garantire che il tema non si basi sull'attributo delle dimensioni predefinite quando si tratta di offrire un supporto accurato per le immagini reattive. Il motivo principale è il fatto che i browser non sono autorizzati a modificare o cambiare l'origine dell'immagine tramite l'attributo delle dimensioni predefinite durante i casi in cui la dimensione della finestra è inferiore rispetto alla dimensione dell'immagine richiesta originale. Tuttavia, se l'immagine è già stata modificata con CSS in un punto di interruzione, anche la fonte non può essere modificata.

Se sei un individuo che ha accesso a una base di codice WordPress o se sei uno sviluppatore di temi, è più necessario filtrare le immagini nei temi in modo da fornire attributi di dimensioni accurati. Questa dovrebbe essere la cosa più importante da fare dopo il rilascio della nuova versione.

Configurazione di immagini responsive per il tuo tema

Sono stati introdotti numerosi nuovi hook insieme alle nuove funzioni che possono essere utilizzate per fornire un livello di supporto delle immagini reattivo su misura per adattarsi al tuo tema. La larghezza massima dell'immagine che deve essere inclusa nell'attributo srcset può essere filtrata dallo sviluppatore del tema tramite l'hook max_srcset_image_width. Gli attributi srcset dell'immagine possono essere filtrati agganciando a wp_calculate_image_srcset mentre l'attributo dimensioni può essere personalizzato da uno sviluppatore tema in modo da adattarsi ai punti di interruzione immagine a loro tema mediante wp_calculate_image_sizes filtraggio.

Le immagini dei contenuti possono essere filtrate con wp_calculate_image_sizes mentre le miniature dei post/immagini in primo piano possono essere filtrate con la funzione wp_get_attachment_image_attributes. La necessità di due diverse funzioni è necessaria poiché il tema cambia per il modo in cui le immagini in primo piano vengono visualizzate in diversi punti di interruzione ed è completamente diverso rispetto al modo in cui le immagini di contenuto vengono visualizzate nelle stesse circostanze. Pertanto, WordPress 4.4 offre agli sviluppatori di temi maggiori opportunità di filtrare le immagini in vari modi e quindi di essere il più specifici possibile.

Tutto ciò mette in evidenza i vantaggi immediati che gli utenti e gli sviluppatori di temi saranno in grado di ottenere con il supporto delle immagini reattive tramite l'aggiornamento 4.4 di WordPress. Consente inoltre agli sviluppatori di temi di includere immagini chiare e nitide indipendentemente dalle dimensioni del viewport e dalla densità dei pixel, migliorando così le prestazioni del sito Web, poiché le pagine Web possono evitare il tempo aggiuntivo richiesto per il caricamento di immagini più grandi. Anche se è una procedura automatica per gli utenti, gli sviluppatori del tema sono responsabili della regolazione dell'attributo delle dimensioni dell'immagine trascorrendo del tempo nel file functions.php all'interno del tema. Inoltre, è necessario tenere presente che la creazione e l'unione del plug-in Responsive Images è più un lavoro di squadra.