Sådan gør du WordPress Images Responsive
WordPress er en rigtig kraftfuld platform. At lave et lydhørt tema og integrere det er ret nemt, når du kender de grundlæggende temaer. Responsive billeder på den anden side er ikke noget, WordPress beskæftiger sig med uden for boksen. Du kunne gå ned på ruten for manuelt at generere hver billedstørrelse, og i HTML-editoren kunne du manuelt skrive billedmærket, srcset- attributterne og hvert billede. Dette vil ikke kun tage tid, men det kan være et problem for alle admin brugere, der ikke er HTML-literate.
Heldigvis er der en måde at gøre WordPress til at gøre alt det tunge løft. Det kan generere alle billedstørrelser fra en enkelt billedoplæsning, og gennem et plugin implementerer du image tag og srcset attributter hvor som helst forfatteren vælger at indsætte et billede.
Trin 1: Modificer funktioner.php for at generere flere billedstørrelser
Hver gang du uploade et billede gemmer WordPress det med sin oprindelige størrelse. Det genererer også automatisk 3 ændrede kopier i disse standardstørrelser (enten højde eller bredde kan ændres baseret på billedforhold):
- Miniaturebillede (150 × 150)
- Medium (300 × 300)
- Stort (1024 × 1024)
Dette er en rigtig kraftfuld funktion, da den kan tilpasses for at gøre nogen billedstørrelse. Det betyder, at du ikke behøver at lave flere kopier af et billede i forskellige størrelser. Du uploader bare et enkelt billede, og WordPress opretter de ændrede kopier.
Dette gøres ved at ændre funktioner.php-filen. For at tilføje nye billedstørrelser skal du tilføje opkald til funktionen add_image_size . Her er et eksempel, der tilføjer fire nye billedstørrelser:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Hvert kald til funktionen indeholder et navn (så WordPress kan identificere størrelsen) og en bredde. De nye størrelser vil være 300, 600, 1200 og 2400 pixel brede. Det er muligt med funktionen add_image_size at have WordPress også indstille højden eller beskære billedet, men eksemplet ovenfor vil holde det oprindelige billedformatforhold. (Mere kan findes ud af funktionen add_image_size i WordPress Codex .)
Eksemplet ovenfor viser kun fire nye billedstørrelser, der tilføjes, men du vil måske tilføje mere eller mindre ... dette vil være baseret på dit tema design. Nu når et billede uploades til WordPress, vil det generere de nye billedstørrelser. Det næste skridt er at inkludere dem i HTML'en.
Trin 2: Installer RICG Responsive Images plugin
For at WordPress skal kunne udlæse alle billedstørrelser, skal der installeres et nyt plugin: RICG Responsive Images plugin. Når det er installeret og aktiveret, vil alle billedstørrelser blive inkluderet i billedtaggen via srcset-attributten.
Typisk når et billede er tilføjet til en side i WordPress, ser uddata HTML sig sådan ud:
Der er et enkelt billede i src attributten.
Når plugin'et er installeret, vil HTML'en se sådan ud:
Alle de nye billedstørrelser er blevet tilføjet via srcset attributten.
Proppen indeholder også Picturefill.js , en responsiv billedpolyfill, der tilføjer understøttelse for både billedelementet og de nye responsive attributter for img-elementet. Dette, sammen med de srcset attributter, der nu indgår i billedetiketten, er, hvad der gør dine billeder lydhøre.
Dine billeder er nu lydhøre
Nu vil billederne på din hjemmeside være lydhøre - browseren vælger det mest hensigtsmæssige billede til at downloade.
Brugere på enheder med mindre skærme får de mindre billeder. Din hjemmeside bliver hurtigere, da disse billeder downloades hurtigere, de skal bruge mindre af brugerens båndbredde. Brugere på enheder med større skærme får de større billeder. De vises ikke pixeleret eller af mindre kvalitet.
Der er kun et potentielt problem med denne metode: Den fungerer kun med billeder, der er uploadet til WordPress, efter at RICG Responsive Images-plugin er installeret. Hvis det er en helt ny hjemmeside, du arbejder på, så er det måske ikke et problem, men hvis det er et eksisterende websted med eksisterende indhold, er de nye billedstørrelser, som du har tilføjet i functions.php, ikke blevet genereret. Heldigvis behøver du ikke at tilføje alle billederne igen - der er et plugin, der kan hjælpe.
Trin 3: Installer plugin for at genskabe billedstørrelser (valgfrit)
Det Regenerere miniaturebilleder plugin vil gennemgå alle de eksisterende billedvedhæftninger og genoprette de nye billedstørrelser baseret på de nye, der er oprettet i functions.php - det er en real-time saver og kræver kun et enkelt klik.
Når du er installeret, skal du gå til Tools -> Regen. Miniaturebilleder og klik derefter på knappen "Genoprett alle miniaturer". En statuslinje vises, og du får vist oplysninger om, hvor mange billeder der er blevet ændret.
Nu vil alle eksisterende billeder på dit websted blive udført korrekt ved hjælp af billedtaggen via srcset attributten.
Udvalgte billedbrug enhed billede og mobil enhed billede via Shutterstock.