Importanța imaginilor receptive în WordPress Core

Popularitatea imaginilor responsive este în creștere și este ceva ce nimeni nu poate ignora. Cu toate acestea, folosirea aceleiași funcționalități în CMS populare precum WordPress poate fi o experiență provocatoare. Sarcina poate fi una consumatoare de timp, chiar dacă este posibil ca utilizatorii să scrie ei înșiși funcția în cadrul temei. Dar lucrurile s-au schimbat dramatic de când a fost introdus WordPress 4.4, făcându-le mai ușor pentru dezvoltatori și administratori încorporarea funcționalității imaginii receptive în temele lor.

Principalul punct culminant include disponibilitatea plug-in-ului Responsive Images în nucleul WordPress. Aceasta înseamnă că utilizatorii se pot bucura acum de prezența suportului de imagine receptivă, care vine ca o caracteristică implicită în WordPress. Să aruncăm o privire atentă asupra modului în care funcționează de fapt această funcție și cum poate fi utilizată cu atenție pentru a valorifica potențialul site-ului WordPress.

Funcționarea caracteristicii

Tot conținutul și imaginile vor fi compuse din atribute srcset și sizes odată ce actualizați la WordPress 4.4. Acest lucru este în principal pentru a asigura disponibilitatea fiecărei dimensiuni a imaginii, astfel încât să se mențină dimensiunea reală a imaginii solicitate. În cazurile în care raportul de aspect variază în comparație cu imaginea inițială solicitată, decupările personalizate vor fi lăsate în afara atributului srcset . În același timp, o imagine receptivă va fi returnată atunci când o imagine este apelată prin funcția wp-get-attachment-image.

Imaginile responsive acționează ca o funcție de fundal în WordPress 4.4 datorită funcționalității sale automate care apare ori de câte ori o imagine este încărcată în WordPress printr-un încărcător media. Acest proces automat de fundal are ca rezultat afișarea atributelor srcset și sizes ori de câte ori apare o imagine într-o pagină. Aceasta înseamnă că nu există interfețe vizibile în noua funcție de imagini receptive. Niciuna dintre opțiuni, cum ar fi prezența formularelor în scopuri de completare sau casete pentru scopuri de verificare și opțiuni pentru scopuri de comutare, nu este disponibilă din cauza lipsei de interfețe vizibile.

Dezvoltatorii de teme vor trebui să se asigure că atributul de dimensiuni precise este disponibil în imagini prin editarea fișierului functions.php al temei. Este important să o luați în considerare deoarece atributele srcset și sizes prezente în eticheta de imagine reprezintă de fapt imaginile receptive din WordPress. Cel mai dificil de prezis este atributul sizes, chiar dacă WordPress funcționează bine atunci când vine vorba de includerea tuturor dimensiunilor disponibile în atributul srcset . Datoria dimensiunilor este de a explica browserului cât de largă ar fi imaginea în fiecare fereastră de vizualizare disponibilă. Cu toate acestea, rezultatele pot diferi în funcție de stilul disponibil cu tema utilizatorului, oferind valoarea implicită rezonabilă și anume „dimensiuni =” (lățime maximă: {{image-width}}) 100 vw, {{image-width}}”

Cu atributul sizes, utilizatorii pot realiza în special două lucruri. În primul rând, asigură disponibilitatea unui atribut de dimensiuni valide în imagine, care a devenit acum o condiție prealabilă în ceea ce privește specificațiile. În al doilea rând, împiedică browserul să furnizeze o sursă de imagine care este mai mult în comparație cu lățimea originală care a fost solicitată. Cu toate acestea, beneficiul atributului dimensiuni implicite devine mai mic ori de câte ori orice CSS manipulează dimensiunea imaginii la lățimi ale ferestrei de vizualizare care sunt complet diferite.

Dezvoltatorii de teme pot ajusta atributul de dimensiuni corespunzător fiecărei imagini cu ajutorul cârligelor de filtrare pentru a asigura livrarea atributului de dimensiuni perfecte în timpul fiecărui punct de întrerupere. Prin urmare, este de dorit să ne asigurăm că tema nu se bazează pe atributul de dimensiuni implicite atunci când vine vorba de a oferi suport precis pentru imagini receptive. Motivul principal este faptul că browserele nu au voie să modifice sau să schimbe sursa imaginii prin atributul de dimensiuni implicite în cazurile în care dimensiunea ferestrei de vizualizare este mai mică în comparație cu dimensiunea originală a imaginii solicitate. Cu toate acestea, dacă imaginea a fost deja modificată cu CSS la un punct de întrerupere, atunci și sursa nu poate fi schimbată.

Dacă sunteți o persoană care are acces la o bază de cod WordPress sau dacă sunteți un dezvoltator de teme, atunci este o necesitate mai mare să filtrați imaginile în teme, astfel încât să oferiți atribute de dimensiuni care să fie precise. Acestea ar trebui să fie cele mai importante lucruri care trebuie făcute după lansarea noii versiuni.

Configurarea imaginilor receptive pentru tema dvs

Sunt introduse o serie de noi cârlige, împreună cu noile funcții care pot fi utilizate pentru a oferi un nivel de suport pentru imagini receptive, care sunt adaptate pentru a se potrivi cu tema dvs. Lățimea maximă a imaginii care trebuie inclusă în atributul srcset poate fi filtrată de către dezvoltatorul temei prin hook max_srcset_image_width. Atributele srcset ale imaginii pot fi filtrate prin conectarea la wp_calculate_image_srcset, în timp ce atributul sizes poate fi personalizat de un dezvoltator de teme, astfel încât să se potrivească punctelor de întrerupere a imaginii în tema lor prin filtrarea wp_calculate_image_sizes.

Imaginile de conținut pot fi filtrate cu wp_calculate_image_sizes, în timp ce miniaturile postate/imaginile prezentate pot fi filtrate cu funcția wp_get_attachment_image_attributes. Este necesară necesitatea a două funcții diferite, deoarece tema se schimbă pentru modul în care imaginile prezentate sunt afișate în puncte de întrerupere diferite și este complet diferită în comparație cu modul în care imaginile de conținut sunt afișate în aceleași circumstanțe. Astfel, WordPress 4.4 oferă dezvoltatorilor de teme o oportunitate îmbunătățită de a filtra imaginile în diferite moduri și, prin urmare, fiind cât se poate de specific.

Toate acestea evidențiază beneficiile instantanee pe care utilizatorii și dezvoltatorii de teme le vor putea obține cu suport pentru imagini receptive prin actualizarea WordPress 4.4. De asemenea, permite dezvoltatorilor de teme să includă imagini clare și clare, indiferent de dimensiunea ferestrei de vizualizare și densitatea pixelilor, îmbunătățind astfel performanța site-ului web, deoarece paginile web pot evita timpul suplimentar necesar pentru încărcarea imaginilor mai mari. Chiar dacă este o procedură automată pentru utilizatori, dezvoltatorii de teme sunt responsabili în ajustarea atributului dimensiunilor imaginii, petrecând timp în fișierul functions.php din cadrul temei. Mai mult, trebuie reținut că crearea și îmbinarea plug-in-ului Responsive Images este mai mult un efort de echipă.