Hur man gör WordPress Images Responsive
WordPress är en väldigt kraftfull plattform. Att göra ett lyhörd tema och integrera det är ganska enkelt när du känner till grunderna i teman. Responsiva bilder, å andra sidan, är inte något WordPress handlar ut ur lådan. Du kan gå ner på rutten för att manuellt generera varje bildstorlek, och i HTML-editoren kan du manuellt skriva bildtaggen , srcset- attributen och varje bild. Det tar inte bara tid, men kan vara ett problem för alla administrativa användare som inte är HTML-litererade.
Tack och lov finns det ett sätt att få WordPress att göra allt tungt lyft. Det kan generera alla bildstorlekar från en enda bilduppladdning och, via ett plugin, implementera bildtaggen och srcset- attributen var som helst som författaren väljer att infoga en bild.
Steg 1: Ändra functions.php för att generera fler bildstorlekar
Varje gång du laddar upp en bild sparas det med sin ursprungliga storlek. Det genererar också automatiskt 3 storlekar på omformat i dessa standardstorlekar (antingen höjd eller bredd kan ändras baserat på bildförhållande):
- Miniatyrbild (150 × 150)
- Medium (300 × 300)
- Stor (1024 × 1024)
Detta är en väldigt kraftfull funktion eftersom den kan anpassas för att göra någon bildstorlek. Det betyder att du inte behöver göra flera kopior av en bild i olika storlekar. Du lägger bara upp en enda bild, och WordPress skapar de ändrade kopiorna.
Detta görs genom att ändra funktionerna .php-filen. För att lägga till nya bildstorlekar måste du lägga till samtal till add_image_size- funktionen. Här är ett exempel som lägger till fyra nya bildstorlekar:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Varje anrop till funktionen innehåller ett namn (så WordPress kan identifiera storleken) och en bredd. De nya storlekarna kommer att vara 300, 600, 1200 och 2400 pixlar breda. Det är möjligt med funktionen add_image_size att ha WordPress också ställa in höjden eller beskära bilden, men exemplet ovan kommer att behålla det ursprungliga bildformatförhållandet. (Mer kan hittas om funktionen add_image_size i WordPress Codex .)
Exemplet ovan visar bara att fyra nya bildstorlekar läggs till, men du kanske vill lägga till mer eller mindre ... det här kommer att baseras på din tematyp. Nu när som helst en bild laddas upp till WordPress, kommer den att generera de nya bildstorlekarna. Nästa steg är att inkludera dem i HTML.
Steg 2: Installera RICG Responsive Images-plugin
För att WordPress ska kunna mata ut alla bildstorlekar måste ett nytt plugin installeras: RICG Responsive Images plugin. När det är installerat och aktiverat kommer alla bildstorlekar att finnas med i bildtaggen via srcset-attributet.
Vanligtvis när en bild läggs till på en sida i WordPress ser utmatnings HTML ut så här:
Det finns en enda bild i src-attributet.
När plugin är installerad ser HTML ut så här:
Alla nya bildstorlekar har lagts till via srcset- attributet.
Pluggen innehåller också Picturefill.js , en responsiv bildpolyfill som lägger till stöd för både bildelementet och de nya responsiva attributen för img-elementet. Detta, tillsammans med de srcset attribut som nu ingår i bildtaggen, är det som gör dina bilder mottagliga.
Dina bilder är nu lyhörda
Nu kommer bilderna på din webbplats att vara mottagliga - webbläsaren väljer den mest lämpliga bilden att ladda ner.
Användare på enheter med mindre skärmar får de mindre bilderna. Din webbplats laddas snabbare eftersom dessa bilder laddas ner snabbare, de behöver mindre av användarnas bandbredd. Användare på enheter med större skärmar får de större bilderna. De visas inte pixelerade eller av mindre kvalitet.
Det finns bara ett potentiellt problem med den här metoden: den fungerar bara med bilder som laddas upp till WordPress efter att pluginprogrammet RICG Responsive Images har installerats. Om det är en helt ny webbplats som du arbetar på så kan det inte vara ett problem, men om det är en befintlig webbplats med befintligt innehåll, kommer de nya bildstorlekarna som du lagt till i functions.php inte att genereras. Tack och lov behöver du inte lägga till alla bilder - det finns ett plugin som kan hjälpa till.
Steg 3: Installera plugin för att generera bildstorlekar (tillval)
De Regenerera miniatyrer plugin kommer att gå igenom alla befintliga bildbilagor och generera de nya bildstorlekarna baserat på de nya som skapades i functions.php - det är en realtidssparläge och kräver bara ett enkelt klick.
När du har installerat, gå till Verktyg -> Regen. Miniatyrerna klickar sedan på "Regenerera alla miniatyrbilder" -knappen. En statusfält visas och du får se informationen om hur många bilder som har ändrats.
Nu kommer alla befintliga bilder på din webbplats att matas ut korrekt med hjälp av bildtaggen via srcset- attributet.
Utvalda bildanvändningar enhetsbild och mobilenhetens bild via Shutterstock.