Share
Con tutti gli schermi ad alta risoluzione disponibili oggi, è logico che il tema WordPress includa il supporto per la visualizzazione di immagini di qualità superiore. Ciò significa aggiungere funzionalità per creare queste immagini in cima a un modo per caricare quello giusto in base alla risoluzione dello schermo dell'utente finale.
Ci sono molti plugin disponibili per gli utenti regolari di WordPress che aggiungeranno il supporto per la retina al loro sito. Facendo una ricerca nella directory dei plugin di WordPress, questi vengono visualizzati come i primi cinque:
Ogni plug-in si avvicina in modo diverso all'aggiunta del supporto retinico, sebbene utilizzino quasi tutti gli stessi due componenti: uno script di rilevamento e una funzione di creazione di immagini retina-ready. Per gli sviluppatori che desiderano aggiungere questa funzione direttamente ai propri temi, la prima cosa che devi fare è includere il file JS giusto per rilevare la risoluzione dello schermo dell'utente.
Ha senso solo visualizzare un'immagine di qualità superiore Se l'utente finale utilizza un display retina. Per i nostri scopi, il modo migliore è con JavaScript. Mi piace usare uno script chiamato retina.js di Imulus. Pesa solo 4kb e aggiunge tutte le funzionalità di front-end necessarie per rilevare un display retina e caricare l'immagine giusta.
Copia su retina.js file nel tuo tema / js cartella. Deve essere nel posto giusto per accodarlo.
Aggiungi il seguente al tema functions.php file:
Accentsconagua
add_action ('wp_enqueue_scripts', 'retina_support_enqueue_scripts'); / ** * Enqueueing retina.js * * Questa funzione è collegata al hook di azione "wp_enqueue_scripts". * / function retina_support_enqueue_scripts () wp_enqueue_script ('retina_js', get_template_directory_uri (). '/js/retina.js', ",", true); Questo è davvero tutto ciò che serve per il lato di rilevamento delle cose. Poi vengono le funzioni per creare immagini di qualità superiore.
È necessario assicurarsi che ogni volta che viene caricata un'immagine, venga creata e archiviata una versione di qualità superiore @ 2x aggiunto al nome del file. Lo script di rilevamento cercherà tale suffisso per caricare la versione retina della immagine, se necessario.
Per essere sicuri che un'immagine ritina venga creata automaticamente ogni volta che un'immagine viene caricata, devi agganciare il filtro WordPress appropriato. Quello corretto è wp_generate_attachment_metadata.
Questo è nel tuo tema functions.php file:
add_filter ('wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2); / ** * Retina images * * Questa funzione è collegata al hook del filtro 'wp_generate_attachment_metadata'. * / function retina_support_attachment_meta ($ metadata, $ attachment_id) foreach ($ metadata come $ chiave => $ valore) if (is_array ($ value)) foreach ($ valore as $ image => $ attr) if (is_array ($ attr)) retina_support_create_images (get_attached_file ($ attachment_id), $ attr ['width'], $ attr ['height'], true); restituisce $ metadata; La funzione precedente controlla se il file caricato è un'immagine. Se lo è, quindi lo elabora utilizzando il retina_support_create_images () funzione.
Con tutto ciò che serve per verificare se un'immagine è stata caricata, la prossima cosa di cui hai bisogno è una funzione per elaborare e creare una versione di qualità superiore pronta per la retina.
Questo deve anche andare nel tuo tema functions.php file:
/ ** * Crea immagini retina-ready * * Riferito tramite retina_support_attachment_meta (). * / function retina_support_create_images ($ file, $ width, $ height, $ crop = false) if ($ width || $ height) $ resized_file = wp_get_image_editor ($ file); if (! is_wp_error ($ resized_file)) $ filename = $ resized_file-> generate_filename ($ width. 'x'. $ height. '@ 2x'); $ resized_file-> ridimensiona ($ width * 2, $ height * 2, $ crop); $ resized_file-> save ($ nomefile); $ info = $ resized_file-> get_size (); return array ('file' => wp_basename ($ filename), 'width' => $ info ['width'], 'height' => $ info ['height'],); return false; Ora verrà creata una nuova immagine retina con il doppio della dimensione dell'originale. Più @ 2x verrà aggiunto al nome del file in modo che lo script di rilevamento possa funzionare correttamente sulla magia del front-end.
Questo è praticamente tutto ciò che serve, anche se l'aggiunta di una funzione extra è una buona idea per aiutare a pulire le cose ogni volta che un'immagine viene cancellata.
Se un utente cancella un'immagine dalla libreria multimediale, potresti anche distruggere tutte le immagini extra retina già create.
Inserisci questo blocco di codice finale nel tema functions.php file:
add_filter ('delete_attachment', 'delete_retina_support_images'); / ** * Elimina immagini retina-ready * * Questa funzione è collegata al hook del filtro 'delete_attachment'. * / function delete_retina_support_images ($ attachment_id) $ meta = wp_get_attachment_metadata ($ attachment_id); $ upload_dir = wp_upload_dir (); $ percorso = percorsoinfo ($ meta ['file']); foreach ($ meta come $ chiave => $ valore) if ('dimensioni' === $ chiave) foreach ($ valore come $ dimensioni => $ dimensione) $ original_filename = $ upload_dir ['basedir']. '/'. $ percorso ['dirname']. '/'. $ Size [ 'file']; $ retina_filename = substr_replace ($ original_filename, '@ 2x.', strrpos ($ original_filename, '.'), strlen ('.')); if (file_exists ($ retina_filename)) unlink ($ retina_filename); Non ci vuole molto per ottenere il tema pronto per il supporto della retina. Con solo poche funzioni e un file JavaScript aggiuntivo, i tuoi utenti possono assicurarsi che le loro immagini sembrino sempre fantastiche su ogni tipo di schermo.
Se hai commenti o feedback su qualcosa che hai letto sopra, non esitare a discuterne di seguito.
