Även om det växande antagandet av responsiva bilder inte kan ignoreras, kan det vara mycket svårt att använda funktionaliteten under begränsningarna av ett stort CMS som WordPress. Även om det är fullt möjligt att designa funktionen i ditt tema själv, är det ett svårt och tidskrävande uppdrag.

Lyckligtvis, med lanseringen av WordPress 4.4, har tema- och plugin-utvecklare möjlighet att använda responsiva bilder i sina produkter. Sedan starten av den här utgåvan har pluginprogrammet "Responsive Images RICG" slogs samman i WordPress-kärnan, vilket innebär att responsiv bildsupport nu är en intern WordPress-standardfunktion. Låt oss ta en titt på hur det fungerar och hur du kan använda det för att få ut det bästa av din WordPress-webbplats.

reagerar-image-trac-wordpress

Hur bilder fungerar responsives

Så fort du uppgraderar till WordPress 4.4 är hela din innehåll och bilderna kommer att ha attributen "srcset" och " storlekar Vilka filtreras för att säkerställa att alla tillgängliga bildstorlekar existerar, samtidigt som storleken på den ursprungliga begärda bilden bibehålls. Det är viktigt att notera att anpassade storlekar ignoreras från " srcset »Om bildförhållandet skiljer sig från den begärda originalbilden. Dessutom genom att ringa upp en bild via funktionen " wp-get-fäst image Det ger också en responsiv bild.

Den " Responsive Images Är en funktion i bakgrunden, vilket innebär att allt händer automatiskt varje gång en användare laddar upp en bild till WordPress via mediaöverföringsgränssnittet. När en bild visas på en sida kommer den attributet " srcset "Och" storlekar Som ett resultat av denna bakgrundsprocess.

Det betyder att den nya responsiva bilderfunktionen inte kommer att ha ett synligt användargränssnitt. Det finns inga alternativ att byta, former att fylla i, eller kryssrutor. Som sagt, temautvecklare bör redigera sina " functions.php För att deras bilder ska ha en precision med attributet " storlekar ". Faktum är att när vi pratar om responsiva bilder i WordPress pratar vi specifikt om attributen " srcset "Och" storlekar Som finns på taggens bild.

Medan WordPress gör ett exceptionellt jobb och infogar alla tillgängliga storlekar i attributet " srcset ", Attributet" storlekar "är lite svårare att förutsäga. Attributet " storlekar Är ansvarig för att berätta för webbläsaren hur bilden enligt tillgängliga dimensioner i fönstret. Eftersom informationen kommer att vara olika beroende på stilen för användarens tema är det bästa vi kan göra att tillhandahålla en rimlig standard enligt följande:

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

Detta standardattribut " storlekar Gör två saker. Först ser det till att ett giltigt attribut " storlekar Finns på bilden, som nyligen blev ett obligatoriskt krav enligt specifikationen. För det andra säkerställer det att webbläsaren inte tillhandahåller en bildkälla som är större än den ursprungliga begärda bredden. Vid CSS-manipulation kommer bildens storlek att variera beroende på fönstrets bredd, å andra sidan standardvärdet " storlekar Blir mindre användbar.

Sedan standardattributet " storlekar "Hjälper bara till med bilder som inte ändras av CSS, filterfästen kommer att vara tillgängliga för att tillåta temautvecklare att ställa in" attribut " storlekar "Av varje bild, se till att en perfekt" storlekar Levereras till varje stopppunkt.

Det är viktigt att notera här att om möjligt, bör ditt tema inte förlita sig på standardvärdet för attributet " storlekar"För att ge korrekt information om stöd för responsiv bild." I själva verket är standardattributet " storlekar »Tillåter inte webbläsaren att ändra bildkällan när fönstret är mindre än den begärda bildens originalstorlek. Det kommer inte heller att kunna ändra källan om bilden redigeras med CSS vid en brytpunkt, när bilden kan vara större än den begärda originalstorleken.

Om du är en temautvecklare eller har tillgång till en WordPress-kodbas, filtrera bilderna i ditt tema för att ge precisionen attributet " storlekar Är en av de viktigaste sakerna du kan göra efter att den nya versionen snart kommer. Följande är ett exempel på en krok i " wp_calculate_image_sizes Som du kan utveckla för att passa ditt 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 det här exemplet gäller bocken för allt innehåll inklusive bilder och miniatyrer. Ytterligare logik kan läggas till för att säkerställa att olika typer av bilder har olika värden.

code-source-wp-image-lyhörd

Nya funktioner har lagts till för attributet " srcset "Och" storlekar » kan läggas till en bild som har lagts till i WordPress via mediahanteraren, förutom bilder som lagts till för att visa innehåll. Funktion" wp_get_attachment_image_sizes Returnerar ett standardattribut " storlekar Vilket kan ändras med ett filter av ditt tema i filen " functions.php ". Funktionen wp_get_attachment_image_srcset kommer att returnera ett attribut srcset »Som innehåller alla tillgängliga storlekar på den begärda bilden. Dokumentation och exempel på hur man använder dessa nya funktioner finns referenskatalog för utvecklare.

Mottagande bilderkonfiguration för ditt tema

Med de nya funktionerna kommer flera nya konsoler som kan användas för att ge en ny nivå av stöd för lyhörda bilder, som bäst passar ditt tema. Kroken max_srcset_image_width "Tillåter temautvecklaren att filtrera den maximala bredden på bilden som ska inkluderas i" srcset ". Kroken wp_calculate_image_srcset »Filtrerar attributen« srcset »Bilder, medan kroken (filter)« wp_calculate_image_sizes "Tillåter temautvecklaren att anpassa" storlekar För att bättre matcha bildens brytpunkter i deras tema.

Om du letar efter ett exempel på hur du bäst filtrerar " storlekar Av en bild är det nya tjugosixton-temat ett perfekt exempel. I filen functions.php för detta tema filtrerar de två sista funktionerna attributet " storlekar För att svara på de olika bildbrytpunkterna inom temat.

responsiva bildfilter WordPress handledning#

Uppdatering till WordPress 4.4 innebär att användare omedelbart kommer att dra nytta av responsiv bildkompatibilitet, vilket gynnar visning av skarpa, tydliga bilder i varje fönsterstorlek och pixeldensitet. Detta kommer också att resultera i en ökad prestanda, eftersom sidor inte längre behöver ladda stora, tunga bilder under lång tid. Även om detta är en automatisk process för användare, måste temainvecklare justera sina bildstorlekar för sina teman.

Det här är allt för denna tutorial, jag hoppas att det kommer att hjälpa dig att bättre förstå vikten och konceptet med lyhörda bilder på WordPress. Dela gärna denna tutorial med dina vänner på dina favorit sociala nätverk.