Sebbene la crescente adozione di immagini reattive non possa essere ignorata, può essere molto difficile utilizzare la funzionalità sotto i vincoli di un grande CMS come WordPress. Sebbene sia del tutto possibile progettare tu stesso la funzione nel tuo tema, farlo è un'impresa difficile e che richiede tempo.

Fortunatamente, con il lancio di WordPress 4.4, gli sviluppatori di temi e plugin avranno l'opportunità di utilizzare immagini reattive nei loro prodotti. Dall'inizio di questa versione, il plug-in "Responsive Images RICG" è stato unito al core di WordPress, il che significa che il supporto delle immagini reattive è ora una funzionalità predefinita interna 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 esegui l'aggiornamento a WordPress 4.4, il tuo intero contenuto e le immagini avranno gli attributi “srcset” e “ Dimensioni Che vengono filtrati per garantire che esista ogni dimensione dell'immagine disponibile, pur mantenendo la dimensione dell'immagine richiesta originale. È importante notare che i ridimensionamenti personalizzati verranno ignorati dal " srcset »Se le proporzioni differiscono dall'immagine originale richiesta. Inoltre, richiamando un'immagine tramite la funzione " wp-get-immagine allegata Restituirà anche un'immagine reattiva.

Il " Immagini responsive È una funzionalità in background, il che significa che tutto accade automaticamente ogni volta che un utente carica un'immagine su WordPress tramite l'interfaccia di caricamento 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 funzionalità delle immagini reattive non avrà un'interfaccia utente visibile. Non ci sono opzioni per cambiare, forme da compilare o caselle di spunta. Detto questo, gli sviluppatori di temi dovrebbero modificare il loro " functions.php Perché le loro immagini abbiano una precisione con l'attributo " Dimensioni ". Infatti, quando parliamo di immagini responsive in 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" size "è un po 'più difficile da prevedere. In effetti, l'attributo " Dimensioni È responsabile di comunicare 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:

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

Questo attributo predefinito " Dimensioni Fa due cose. Innanzitutto, si assicura che un attributo valido " Dimensioni Esiste nell'immagine, che recentemente è diventata un requisito obbligatorio secondo le specifiche. In secondo luogo, garantisce che il browser non fornisca un'origine dell'immagine più grande della larghezza richiesta originale. 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 le immagini che non vengono alterate dai CSS, saranno disponibili parentesi di filtro per consentire agli sviluppatori di temi di impostare" l'attributo " Dimensioni "Di ogni immagine, assicurando che un perfetto" Dimensioni Viene consegnato ad ogni punto di sosta.

È importante notare che, se possibile, il tuo tema non dovrebbe basarsi sul valore predefinito dell'attributo " Dimensioni"Per fornire informazioni accurate sul supporto delle immagini reattive". In effetti, 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 modificare 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 che la nuova versione sarà presto disponibile. Quello che segue è un esempio di hook nella sezione " wp_calculate_image_sizes Che puoi sviluppare per adattarlo al tuo tema.

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

In questo esempio, il segno di spunta verrà applicato a tutti i contenuti, comprese le immagini in primo piano e le miniature. È possibile aggiungere ulteriore logica per garantire che diversi tipi di immagini abbiano valori diversi.

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 il gestore multimediale, oltre alle immagini aggiunte per visualizzare il file contenuto. 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. È possibile trovare documentazione ed esempi su come utilizzare queste nuove funzioni 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 nel" 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" Dimensioni Per abbinare meglio i punti di interruzione dell'immagine nel loro tema.

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

filtri immagine reattivi Tutorial WordPress#

L'aggiornamento a WordPress 4.4 significa che gli utenti trarranno immediatamente vantaggio dalla compatibilità delle immagini reattive, che promuoverà la visualizzazione di immagini nitide e nitide con ogni dimensione della finestra e densità di pixel. Ciò si tradurrà anche in un aumento delle prestazioni, poiché le pagine non dovranno più caricare immagini grandi e pesanti per molto tempo. Sebbene questo sia un processo automatico per gli utenti, gli sviluppatori di temi dovranno regolare le dimensioni delle loro immagini per i loro temi.

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.