Share
Cu toate ecranele de înaltă rezoluție disponibile astăzi, este doar logic că tema dvs. WordPress include suport pentru afișarea imaginilor de calitate superioară. Aceasta înseamnă adăugarea de funcții pentru a crea aceste imagini în partea de sus a unei modalități de încărcare a celei potrivite, în funcție de rezoluția ecranului utilizatorului final.
Există destul de puține plugin-uri disponibile pentru utilizatorii obișnuiți de WordPress care vor adăuga suport pentru retină pe site-ul lor. Făcând o căutare în directorul plugin WordPress le aduce pe acestea pe primele cinci:
Fiecare plugin se apropie de adăugarea suportului pentru retină în mod diferit, deși toate utilizează în mod similar aceleași două componente: un script de detectare și o funcție de creare a imaginii gata pentru retină. Pentru dezvoltatorii care doresc să adauge această facilitate direct la temele lor, primul lucru pe care trebuie să-l faceți este să includeți fișierul JS potrivit pentru a detecta rezoluția ecranului utilizatorului.
Are sens doar afișarea unei imagini de calitate superioară dacă utilizatorul final utilizează un afișaj cu retină. Pentru scopurile noastre, cea mai bună cale este cu JavaScript. Îmi place să folosesc un script numit retina.js de Imulus. Acesta cântărește la doar 4kb și adaugă toate funcțiile de front-end de care aveți nevoie pentru a detecta un afișaj al retinei și a încărca imaginea corectă.
Copiați pe retina.js fișier în tema ta / js pliant. Trebuie să se afle în locul potrivit pentru ao elimina.
Adăugați următoarele la temele dvs. functions.php fişier:
Accentsconagua
add_action ('wp_enqueue_scripts', 'retina_support_enqueue_scripts'); / ** * Intrarea în retina.js * * Această funcție este atașată la cârligul de acțiune 'wp_enqueue_scripts'. * / funcția retina_support_enqueue_scripts () wp_enqueue_script ('retina_js', get_template_directory_uri () '/js/retina.js', ",", true); De fapt, tot ce aveți nevoie pentru partea de detectare a lucrurilor. În continuare apar funcțiile pentru a crea imagini de calitate superioară.
Trebuie să vă asigurați că de fiecare dată când o imagine este încărcată, se creează o versiune de calitate superioară și se stochează cu ea @ 2x adăugat la numele fișierului. Scriptul de detectare va căuta sufixul respectiv pentru a încărca versiunea gata de imagine a retinei, dacă este necesar.
Pentru a vă asigura că imaginea gata pentru retină este creată automat ori de câte ori o imagine este încărcată, trebuie să vă conectați la filtrul WordPress corespunzător. Cel corect folosit wp_generate_attachment_metadata.
Asta merge în tema ta functions.php fişier:
add_filter ('wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2); / ** * Imaginile retinei * * Această funcție este atașată la cârligul de filtrare "wp_generate_attachment_metadata". * / funcția retina_support_attachment_meta ($ metadata, $ attachment_id) foreach ($ metadate ca $ cheie => valoare $) if (is_array (valoare $)) foreach ($ value as $ image => $ attr) if ($ attr) retina_support_create_images (get_attached_file ($ attachment_id), $ attr ['lățime'], $ attr ['height'], true); returnează metadatele $; Funcția de mai sus verifică dacă fișierul încărcat este o imagine. Dacă este, atunci o procesează folosind retina_support_create_images () funcţie.
Cu totul în loc pentru a verifica dacă o imagine a fost încărcată, următorul lucru de care aveți nevoie este o funcție de procesare și de a crea o versiune de calitate superioară compatibilă cu retina.
Acest lucru trebuie să meargă, de asemenea, în tema ta functions.php fişier:
/ ** * Creați imaginile gata pentru retină * * Referențiat prin retina_support_attachment_meta (). * / funcția retina_support_create_images ($ file, $ width, $ height, $ crop = false) dacă ($ lățime || $ înălțime) $ resized_file = wp_get_image_editor ($ file); dacă is_wp_error ($ resized_file)) $ filename = $ resized_file-> generate_filename ($ lățime. 'x'. $ height. '@ 2x'); $ resized_file-> redimensionare ($ lățime * 2, $ înălțime * 2, cultura $); $ resized_file-> save ($ filename); $ informație = $ resized_file-> get_size (); retur array ('fișier' => wp_basename (nume fișier $), 'lățime' => $ info ['lățime'], 'înălțime' => $ info ['height'];); return false; Acum va fi creată o nouă imagine gata pentru retină, care va dubla dimensiunea originalului. La care se adauga @ 2x vor fi adăugate la numele fișierului, astfel încât scriptul de detectare să poată acționa corect magia pe front-end.
Asta e tot ce ai nevoie, dar adăugarea unei funcții suplimentare este o idee bună pentru a ajuta la curățarea lucrurilor ori de câte ori o imagine este ștearsă.
Dacă un utilizator șterge o imagine din Biblioteca Media, ar putea să distrugeți și toate imaginile extra pregătite pentru retină care au fost create.
Plasați acest bloc de cod final în tema proprie functions.php fişier:
add_filter ('delete_attachment', 'delete_retina_support_images'); / ** * Șterge imaginile gata pentru retină * * Această funcție este atașată la cârligul de filtrare 'delete_attachment'. * / funcția delete_retina_support_images ($ attachment_id) $ meta = wp_get_attachment_metadata ($ attachment_id); $ încărcare_dir = wp_upload_dir (); $ path = pathinfo ($ meta ['fișier']); foreach ($ meta ca $ cheie => valoare $) if ('size' === $ cheie) foreach (valoare $ ca $ size => $ size) $ original_filename = $ upload_dir ['basedir']. '/'. $ path ['dirname']. '/'. $ Dimensiunea [ 'dosar']; $ retina_filename = substr_replace ($ original_filename, '@ 2x.', strrpos ($ original_filename, '.'), strlen ('.')); dacă (file_exists ($ retina_filename)) deconectați ($ retina_filename); Nu durează prea mult pentru a vă pregăti tema pentru suportul pentru retină. Cu doar câteva funcții și un fișier JavaScript suplimentar, utilizatorii dvs. pot asigura că imaginile lor vor arăta întotdeauna excelent pe orice tip de ecran.
Dacă aveți comentarii sau feedback despre ceva ce ați citit mai sus, vă rugăm să discutați mai jos.
