Gå till innehållet

Responsives hur bilderna hanteras av Wordpress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Det växande antagandet av responsiva bilder kan inte ignoreras, men det kan vara mycket svårt att använda funktionaliteten under begränsningarna för ett stort CMS som WordPress. Även om det är fullt möjligt att designa funktionen i ditt tema själv, är det en svår strävan att göra det och det tar tid.

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å snart du uppgraderar till WordPress 4.4 kommer allt ditt innehåll och bilder att ha "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.

Detta innebär att den nya funktionen hos responsiva bilder inte har ett synligt användargränssnitt. Det finns inga växlingsalternativ, fyllbara formulär eller kryssrutor. Med detta sagt bör temautvecklare 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:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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 Media Manager, förutom de bilder som lagts till för att visa innehållet. Funktionen 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.

responsiv filterbild WordPress självstudie #

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

 

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
11 aktier
del6
tweet1
Enregistrer4