Vai al contenuto principale

Responsives come le immagini vengono gestiti da WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Mentre la crescente adozione di immagini reattive non può essere ignorata, può essere molto difficile utilizzare la funzione sotto i vincoli di un grande CMS come WordPress. Mentre è abbastanza possibile progettare da soli la funzione nel tuo tema, farlo è un'impresa difficile e richiede tempo.

Fortunatamente, con il lancio di WordPress 4.4, gli sviluppatori di temi e i plugin avranno l'opportunità di utilizzare immagini reattive nei loro prodotti. Dall'inizio di questa versione, il plug-in "Immagini RICG sensibili" è stato unito al kernel di WordPress, il che significa che il supporto di immagini reattive è ora una funzionalità interna predefinita di WordPress. Diamo un'occhiata a come funziona e come puoi usarlo per ottenere il meglio dal tuo sito WordPress.

reattivo-image-trac-wordpress

Come responsives immagini lavoro

Non appena si passa a WordPress 4.4, tutti i contenuti e le immagini avranno gli attributi "srcset" e " Dimensioni Che vengono filtrati per garantire l'esistenza di ogni dimensione di immagine disponibile, pur mantenendo la dimensione dell'immagine richiesta originale. È importante notare che i ridimensionamenti personalizzati verranno ignorati dall'attributo " srcset Se le proporzioni differiscono dall'immagine originale richiesta. Inoltre, chiamando un'immagine tramite la funzione wp-get-immagine allegata Restituirà anche un'immagine reattiva.

Il " Immagini responsive È una funzione di sfondo, il che significa che tutto accade automaticamente ogni volta che un utente invia un'immagine a WordPress attraverso l'interfaccia di download multimediale. Quando un'immagine appare su una pagina, avrà l'attributo " srcset "E" Dimensioni Come risultato di questo processo in background.

Ciò significa che la nuova funzione di immagine reattiva non avrà un'interfaccia utente visibile. Non ci sono opzioni da cambiare, moduli da compilare o caselle di controllo. Detto questo, gli sviluppatori di temi dovrebbero modificare i loro file " functions.php Perché le loro immagini abbiano una precisione con l'attributo " Dimensioni ". In effetti, quando parliamo di immagini reattive su WordPress, stiamo parlando specificamente degli attributi " srcset "E" Dimensioni Che si trovano sul tag dell'immagine.

Mentre WordPress fa un lavoro eccezionale inserendo tutte le dimensioni disponibili nell'attributo " srcset L'attributo "dimensioni" è un po 'più difficile da prevedere. Anzi, l'attributo Dimensioni È responsabile di dire al browser come l'immagine in base alle dimensioni disponibili della finestra. Poiché le informazioni saranno diverse a seconda dello stile del tema dell'utente, il meglio che possiamo fare è fornire un valore predefinito ragionevole come segue:

Inizia a promuovere il tuo blog

Scarica decine di loghi, banner, modelli di siti Web e molti altri strumenti di marketing per commercializzare il tuo blog WordPress. [Consigliato]

dimensioni = "(max-width: {{image-width}}) 100vw, {{image-width}}"

Questo attributo predefinito " Dimensioni Fa due cose. Innanzitutto, garantisce che un attributo valido " Dimensioni Esiste sull'immagine, che recentemente è diventata un requisito obbligatorio in base alle specifiche. In secondo luogo, garantisce che il browser non fornisca una fonte di immagini più grande della larghezza originale richiesta. In caso di manipolazione CSS la dimensione dell'immagine sarà diversa a seconda della larghezza delle finestre, d'altra parte il valore predefinito « Dimensioni Diventerà meno utile.

Poiché l'attributo predefinito " Dimensioni Aiuterà solo con immagini non corrotte dai CSS, saranno disponibili hook di filtro per consentire agli sviluppatori di temi di regolare l'attributo Dimensioni Di ogni immagine, garantendo che un attributo perfetto Dimensioni "Consegnato ad ogni punto di arresto.

È importante notare qui che, se possibile, il tema non dovrebbe fare affidamento sul valore predefinito dell'attributo " Dimensioni"Fornire informazioni accurate sul supporto per immagini reattive. Infatti, l'attributo predefinito " Dimensioni Non consente al browser di modificare l'origine dell'immagine quando la finestra è più piccola della dimensione originale dell'immagine richiesta. Inoltre, non sarà in grado di cambiare l'origine se l'immagine viene modificata con CSS in un punto di interruzione, quando l'immagine potrebbe essere più grande della dimensione originale richiesta.

Se sei uno sviluppatore di temi o hai accesso a una base di codice WordPress, filtra le immagini nel tuo tema per fornire precisione con l'attributo " Dimensioni È una delle cose più importanti che puoi fare dopo la nuova versione che sarà presto disponibile. Di seguito è riportato un esempio di hook nella funzione " wp_calculate_image_sizes Che puoi sviluppare per adattarlo al tuo tema.

Funzione adjust_image_sizes_attr ($ formati, dimensioni $) {$ dimensioni = (max-width: 709px) 85vw (max-width: 909px) 67vw (max-width: 1362px) 62vw, 840px '; return $ dimensioni; } add_filter ( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr' 10, 2);

In questo esempio, il gancio si applicherà a tutti i contenuti, incluse singole immagini e miniature. È possibile aggiungere una logica aggiuntiva per rendere diversi tipi di immagini con valori diversi.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

il codice sorgente-wp-image-reattiva

Sono state aggiunte nuove funzioni per l'attributo " srcset "E" Dimensioni Può essere aggiunto a un'immagine che è stata aggiunta a WordPress tramite Media Manager, oltre alle immagini aggiunte per visualizzare il contenuto. La funzione wp_get_attachment_image_sizes Restituirà un attributo predefinito " Dimensioni Che può essere modificato da un filtro del tema nel file " functions.php ". La funzione wp_get_attachment_image_srcset restituirà un attributo srcset Che conterrà tutte le dimensioni disponibili dell'immagine richiesta. Documentazione ed esempi di utilizzo di queste nuove funzionalità sono disponibili directory di riferimento degli sviluppatori.

Configurazione delle immagini reattive per il tuo tema

Con le nuove funzionalità arrivano diverse nuove parentesi che possono essere utilizzate per fornire un nuovo livello di supporto per le immagini reattive, che si adatta meglio al tuo tema. Il gancio max_srcset_image_width Consentirà allo sviluppatore del tema di filtrare la larghezza massima dell'immagine da includere nell'attributo srcset ". Il gancio wp_calculate_image_srcset »Filtra gli attributi« srcset »Immagini, mentre il gancio (filtro)« wp_calculate_image_sizes Consentirà allo sviluppatore del tema di personalizzare l'attributo Dimensioni Per abbinare meglio i punti di interruzione dell'immagine nel loro tema.

Se stai cercando un esempio su come filtrare meglio l'attributo " Dimensioni Di un'immagine, il nuovo tema di ventisei anni sarà un esempio perfetto. Nel file del tema Functions.php, le ultime due funzioni filtrano l'attributo " Dimensioni Per rispondere a diversi punti di interruzione dell'immagine all'interno del tema.

immagine dei filtri responsive WordPress tutorial #

L'aggiornamento a WordPress 4.4 significa che gli utenti trarranno immediatamente vantaggio dalla compatibilità con le immagini reattive, il che aiuterà a visualizzare immagini chiare e nitide in base a ciascuna dimensione delle finestre e alla densità dei pixel. Ciò comporterà anche un aumento delle prestazioni, poiché le pagine non dovranno più caricare immagini grandi e pesanti per molto tempo. Sebbene si tratti di un processo automatico per gli utenti, gli sviluppatori di temi dovranno adattare le dimensioni delle loro immagini ai propri temi.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Questo è tutto per questo tutorial, spero che ti aiuterà a capire meglio l'importanza e il concetto di immagini reattive su WordPress. Sentiti libero di condividere questo tutorial con i tuoi amici sui tuoi social network preferiti.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
17 azioni
quota12
Tweet1
Enregistrer4