Selvom den voksende anvendelse af responsive billeder ikke kan ignoreres, kan det være meget vanskeligt at anvende funktionaliteten under begrænsningerne af et stort CMS som WordPress. Selvom det er fuldt ud muligt at designe funktionen til dit tema selv, er det en vanskelig og tidskrævende opgave.

Heldigvis med lanceringen af ​​WordPress 4.4 har tema- og pluginudviklere mulighed for at bruge lydhøre billeder i deres produkter. Siden starten af ​​denne udgivelse er “Responsive Images RICG” plugin blevet flettet ind i WordPress-kernen, hvilket betyder, at responsiv billedstøtte nu er som en intern WordPress-standardfunktion. Lad os se på, hvordan det fungerer, og hvordan du kan bruge det til at få det bedste ud af dit WordPress-websted.

lydhør-image-trac-wordpress

Hvordan billederne fungerer responsives

Så snart du opgraderer til WordPress 4.4, vil hele din indhold og billederne vil have attributterne "srcset" og " størrelser Hvilke er filtreret for at sikre, at alle tilgængelige billedstørrelser eksisterer, samtidig med at størrelsen på det oprindelige anmodede billede opretholdes. Det er vigtigt at bemærke, at tilpassede størrelser ignoreres fra " srcset »Hvis billedformatet afviger fra det ønskede originale billede. Derudover ved at kalde et billede op via funktionen " wp-get-tilknytning billede Det giver også et responsivt billede.

« Responsive Images Er en funktion i baggrunden, hvilket betyder, at alt sker automatisk hver gang en bruger uploader et billede til WordPress via medie-uploadgrænsefladen. Når et billede vises på en side, har det attributten " srcset "Og" størrelser Som et resultat af denne baggrundsproces.

Det betyder, at den nye responsive billedfunktion ikke vil have en synlig brugergrænseflade. Der er ingen muligheder for at skifte, formularer at udfylde, eller afkrydsningsfelter. Når det er sagt, bør temaudviklere redigere deres " functions.php For at deres billeder skal have en præcision med attributten " størrelser ". Når vi taler om responsive billeder i WordPress, taler vi faktisk specifikt om attributterne " srcset "Og" størrelser Som findes på tagget på billedet.

Mens WordPress udfører et usædvanligt stykke arbejde ved at indsætte alle tilgængelige størrelser i attributten " srcset ", Attributten" størrelser "er lidt sværere at forudsige. Faktisk er attributten " størrelser Er ansvarlig for at fortælle browseren, hvordan billedet svarer til de tilgængelige dimensioner i vinduet. Da oplysningerne vil være forskellige afhængigt af stilen på brugerens tema, er det bedste, vi kan gøre, at give en rimelig standard som følger:

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

Denne standardattribut " størrelser Gør to ting. Først sørger det for, at en gyldig attribut " størrelser Eksisterer på billedet, som for nylig blev et obligatorisk krav i henhold til specifikationen. For det andet sikrer det, at browseren ikke leverer en billedkilde, der er større end den oprindelige anmodede bredde. I tilfælde af CSS-manipulation vil størrelsen på billedet være forskelligt afhængigt af vinduernes bredde, på den anden side standardværdien " størrelser Vil blive mindre nyttigt.

Siden standardattributten " størrelser "Hjælper kun med billeder, der ikke ændres af CSS, filterparenteser vil være tilgængelige, så temaudviklere kan indstille" attribut " størrelser "Af hvert billede, at sikre, at et perfekt" størrelser Leveres til hvert stoppunkt.

Det er vigtigt at bemærke her, at dit tema, hvis det er muligt, ikke bør stole på standardværdien af ​​attributten " størrelser"At give nøjagtige oplysninger om responsiv billedsupport." Faktisk er standardattributten " størrelser »Tillader ikke browseren at ændre billedkilden, når vinduet er mindre end det ønskede billedes originale størrelse. Det vil heller ikke være i stand til at ændre kilden, hvis billedet redigeres med CSS ved et brudpunkt, når billedet muligvis er større end den ønskede originale størrelse.

Hvis du er en temaudvikler eller har adgang til en WordPress-kodebase, skal du filtrere billederne i dit tema for at give egenskaben præcision " størrelser Er en af ​​de vigtigste ting, du kan gøre, når den nye version snart kommer. Følgende er et eksempel på en krog i " wp_calculate_image_sizes Som du kan udvikle til at passe til dit 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 );

I dette eksempel gælder fluebenet for alt indhold inklusive fremhævede billeder og miniaturebilleder. Yderligere logik kan tilføjes for at sikre, at forskellige typer billeder har forskellige værdier.

kode-kilde-wp-image-responsiv

Nye funktioner er tilføjet til attributten " srcset "Og" størrelser » kan tilføjes til et billede, der er blevet tilføjet til WordPress gennem mediehåndteringen, ud over billeder tilføjet for at vise indhold. Funktion" wp_get_attachment_image_sizes Returnerer en standardattribut " størrelser Hvilket kan ændres ved hjælp af et filter af dit tema i filen " functions.php ". Funktionen wp_get_attachment_image_srcset returnerer en attribut srcset »Hvilket vil indeholde alle de tilgængelige størrelser på det ønskede billede. Dokumentation og eksempler på brug af disse nye funktioner kan findes referencekatalog over udviklere.

Modtagelig billedkonfiguration til dit tema

Med de nye funktioner kommer flere nye parenteser, der kan bruges til at give et nyt niveau af understøttelse af lydhøre billeder, der bedst passer til dit tema. Krogen max_srcset_image_width "Tillader temaudvikleren at filtrere den maksimale bredde på billedet, der skal inkluderes i" srcset ". Krogen wp_calculate_image_srcset »Filtrerer attributterne« srcset »Billeder, mens krogen (filter)« wp_calculate_image_sizes "Tillader temaudvikleren at tilpasse" størrelser For bedre at matche billedets breakpoints i deres tema.

Hvis du leder efter et eksempel på, hvordan du bedst filtrerer attributten " størrelser Af et billede vil det nye twentysixteen tema være et perfekt eksempel. I funktions.php-filen for dette tema filtrerer de to sidste funktioner attributten " størrelser At svare på de forskellige billedbrudpunkter inden for temaet.

responsive billedfiltre WordPress tutorial#

Opdatering til WordPress 4.4 betyder, at brugerne straks vil drage fordel af lydhør billedkompatibilitet, hvilket vil fremme visningen af ​​skarpe, skarpe billeder i hver vinduesstørrelse og pixeltæthed. Dette vil også resultere i en forbedring af ydeevnen, da sider ikke længere skal indlæse store, tunge billeder i lang tid. Selv om dette er en automatisk proces for brugerne, skal temaudviklere justere deres billedstørrelser efter deres temaer.

Det er alt sammen til denne tutorial, jeg håber, at det vil hjælpe dig med bedre at forstå vigtigheden og konceptet med lydhør billeder på WordPress. Del denne tutorial med dine venner på dine foretrukne sociale netværk.