Lucrul cu imagini receptive în WordPress

Până de curând, lucrul cu imagini receptive în WordPress era o adevărată provocare. Dacă utilizatorii nu erau dispuși să scrie ei înșiși funcționalitatea, nu au avut noroc. Cealaltă opțiune a fost să achiziționați un plugin sau să găsiți o altă soluție, dar nu era disponibilă nicio funcționalitate de bază de care dezvoltatorii să poată profita. Temele create fără suport pentru imaginile receptive aveau adesea performanțe lente, iar utilizarea era uneori instabilă pe diferite dimensiuni de ecran. Acestea nu sunt tocmai atribute pe care clienții și utilizatorii le asociază cu o funcționalitate bună.

Din fericire, totul s-a schimbat odată cu lansarea WordPress 4.4. Acum, funcționalitatea pentru imaginile receptive este inclusă direct în WordPress, permițând dezvoltatorilor să lucreze cu ea și în teme. Acest lucru a fost realizat prin luarea unui plugin de imagini receptive și făcându-l parte din nucleul WordPress.

Cum funcționează totul

Evident, dacă nu ați făcut deja acest lucru, primul pas este să actualizați la WordPress 4.4. Odată ce ați finalizat actualizarea, dacă vizualizați codul sursă al site-ului dvs., veți observa că imaginile de pe site-ul dvs. au acum două atribute noi: sizes și srcset . Aceste atribute sunt filtrate, ceea ce înseamnă că toate dimensiunile de imagini disponibile sunt prezente, dar dimensiunile rămân în concordanță cu imaginea originală. Atributul srcset nu va permite decuparea personalizată în cazurile în care raportul de aspect nu este același cu cel al versiunii originale a imaginii. Acest lucru este pentru a vă asigura că calitatea imaginii nu este compromisă atunci când este afișată pe ecranul unui utilizator.

Intru sub capotă și face schimbări

WordPress a adăugat imagini receptive ca funcție de fundal, ceea ce înseamnă că procesul are loc automat. Când încărcați o imagine folosind instrumentul de încărcare media, atributele sunt aplicate acelor imagini fără nicio intervenție din partea dvs. Acest lucru este util și pentru optimizarea imaginii.

Deoarece este o caracteristică de fundal, imaginile receptive nu vin cu o interfață cu utilizatorul, ci doar se întâmplă. În calitate de dezvoltator, puteți modifica fișierul functions.php în fiecare dintre temele dvs. pentru a fi sigur că imaginile dvs. au un atribut de sizes care este corect. Rețineți: când doriți să faceți referire la imagini receptive, aceasta înseamnă atributele etichetei de imagine ale sizes și srcset .

Atribute implicite

Pe măsură ce începeți să lucrați cu această funcție, veți observa că WordPress este destul de bun la găsirea tuturor dimensiunilor posibile și la adăugarea lor la atributul srcset . Din păcate, problemele pot intra în joc când vine vorba de predictibilitatea atributului sizes . Acesta este atributul care este utilizat pentru a comunica lățimea imaginii către browsere, astfel încât imaginile să fie disponibile și vizualizate pe orice ecran de afișare.

Configurarea acestui atribut ca implicit funcționează în câteva moduri. Primul este că forțează ca atributul sizes să fie aplicat fiecărei imagini. Acest lucru este util având în vedere că acum este o cerință obligatorie. Al doilea este că nu permite browserelor să utilizeze o sursă de imagine mai mare decât dimensiunea originală a imaginii. Codul CSS care este folosit pentru a modifica dimensiunea imaginii în funcție de lățimile ecranului de afișare (cum ar fi interogările media) poate face, din păcate, această implicită mult mai puțin utilă.

Cârlige de filtrare pentru dezvoltatorii de teme

Deoarece acest atribut implicit funcționează numai cu imagini care nu au fost modificate de codul CSS, WordPress a creat cârlige de filtrare pe care dezvoltatorii de teme să le folosească. Doar ajustați atributul sizes pentru toate imaginile folosind acest cârlig. Ca rezultat, puteți fi sigur că atributul de sizes care este servit va fi ideal în orice situație.

O avertizare

Înainte de a merge mai departe, să luăm un minut pentru a afirma că opțiunea atribute implicite nu este cea mai bună modalitate de a oferi o funcționalitate bună a imaginii receptive. De fapt, ar trebui să lucrați pentru a evita crearea de teme care se bazează pe această implicită. Motivul pentru aceasta este că atributul implicit împiedică browserele să modifice sursa imaginii atunci când zona de afișare nu este la fel de mare ca dimensiunea imaginii originale. De asemenea, browserele nu pot modifica sursa dacă aceasta a fost ajustată de CSS și este nevoie de o imagine mai mare.

Filtrarea imaginilor

În calitate de dezvoltator de teme, puteți utiliza filtrarea în imagini pentru a introduce un atribut de sizes care este precis. Acest lucru poate fi realizat prin utilizarea unui cârlig pentru funcția WordPress, wp_calculate_image_sizes . Puteți utiliza această funcție astfel încât să funcționeze cu tema dvs. curentă. Puteți face modificări care aplică un atribut de sizes diferite diferitelor tipuri de imagini.

Noile funcții care vin cu această ediție fac acum posibil ca sizes și atributele srcset să fie aplicate tuturor imaginilor pe care le-ați adăugat folosind aplicatorul de încărcare media WordPress. De asemenea, vă permite să adăugați atributele imaginilor din postările dvs. Aruncă o privire la wp_get_attachment_image_sizes . Aceasta returnează un atribut sizes pe care îl puteți captura și modifica printr-un filtru din fișierul functions.php pentru tema dvs. La fel, wp_get_attachment_image_srcset face același lucru, doar pentru atributul srcset .

Imagini receptive și tema dvs. personalizată

Noile funcții care au venit cu această ultimă versiune sunt însoțite de multe cârlige pe care le puteți folosi pentru a oferi suport eficient pentru imaginile receptive din tema dvs. Aceste cârlige includ următoarele:

Wp_calculate_image_sizes – Un cârlig pe care dezvoltatorii de teme îl pot folosi pentru a ajusta atributul sizes pentru a lucra cu punctele de întrerupere care sunt prezente în tema lor.

Max_srcset_image_width – Un cârlig pe care un dezvoltator de teme îl va putea folosi pentru a filtra în funcție de lățimea maximă a imaginilor care se află în atributul srcset .

W_calculate_image_srcset – Un cârlig care oferă dezvoltatorilor capacitatea de a filtra în funcție de atributele srcset .

Aflați mai multe despre suportul pentru imagini receptive

Manualul pentru dezvoltatori WordPress poate oferi mai multe îndrumări atunci când vine vorba de utilizarea eficientă a acestor cârlige. Cercetarea pe care trebuie să o faceți va varia în funcție de nivelul dvs. de confort în efectuarea acestor tipuri de ajustări în culise. Dacă sunteți un dezvoltator de teme care urmărește acest lucru ca fiind strict un hobby, ați putea opta pentru a experimenta puțin. Pe de altă parte, dacă sunteți un dezvoltator de teme de carieră, este posibil să doriți să investiți în timpul și resursele necesare pentru a stăpâni cu adevărat această actualizare.

Beneficiile actualizării

Dacă nu ați actualizat deja WordPress (sau dacă gazda dvs. WordPress gestionată nu s-a actualizat deja pentru dvs.), utilizatorii dvs. vor beneficia de câteva avantaje grozave atunci când o faceți. Suportul pentru imagini receptive poate îmbunătăți performanța paginii, deoarece paginile lor nu vor pierde timpul trăgând în jos imaginile care sunt prea mari. Utilizatorii vor observa, de asemenea, o îmbunătățire foarte impresionantă a calității imaginilor. Ei nu vor vedea „fabricarea cârnaților” care intră în toate. În schimb, vor vedea doar că funcționează frumos.

În calitate de dezvoltator, va trebui să ajustați atributul sizes în fiecare dintre fișierele functions.php pentru toate temele dvs. Cu toate acestea, odată ce ați făcut acest efort inițial, lucrurile devin mult mai ușoare. După ce ați abordat curba de învățare, veți descoperi că lucrul cu această nouă funcționalitate este destul de natural.

Ar putea fi nevoie de puțină cercetare și practică pentru a înțelege această nouă funcționalitate și pentru a obține suport de imagine receptiv pentru a funcționa pentru temele dvs. personalizate. Cu toate acestea, dacă sunteți dispus să căutați manualul dezvoltatorului și să vă dați seama de lucruri, clienții dvs. vor aprecia cu adevărat îmbunătățirea performanței și funcționalității. Acest lucru a trecut mult timp, iar dezvoltatorii de teme experimentați și cei însărcinați cu menținerea temelor personalizate sunt pe bună dreptate încântați de această actualizare.