Hoe WordPress Images responsief te maken
WordPress is een echt krachtig platform. Een responsief thema maken en integreren is vrij eenvoudig als je eenmaal de basisbegrippen van thema's kent. Responsieve afbeeldingen daarentegen zijn niet iets wat WordPress vanuit de doos doet. U kunt de route van het handmatig genereren van elke afbeeldingsgrootte afleggen en vervolgens kunt u in de HTML-editor handmatig de afbeeldingslabel, de srcset- kenmerken en elke afbeelding typen . Dit kost niet alleen tijd, maar kan ook een probleem zijn voor alle beheerders die geen HTML-literate gebruiken.
Gelukkig is er een manier om WordPress al het zware werk te laten doen. Het kan alle afbeeldingsformaten van een enkele afbeelding uploaden genereren en vervolgens, via een plug-in, de afbeeldingslabel en srcset attributen implementeren overal waar de auteur ervoor kiest om een afbeelding in te voegen.
Stap 1: wijzig functions.php om meer beeldformaten te genereren
Telkens wanneer u een afbeelding uploadt, slaat WordPress deze op de oorspronkelijke grootte op. Het genereert ook automatisch 3 verkleinde kopieën in deze standaardformaten (de hoogte of breedte kan veranderen op basis van de beeldverhouding):
- Thumbnail (150 × 150)
- Gemiddeld (300 × 300)
- Groot (1024 × 1024)
Dit is echt een krachtige functie omdat het kan worden aangepast om elk beeldformaat te maken. Dit betekent dat u niet meerdere kopieën van een afbeelding in verschillende formaten hoeft te maken. U hoeft slechts één afbeelding te uploaden en WordPress maakt de aangepaste kopieën.
Dit wordt gedaan door het functions.php bestand aan te passen. Om nieuwe afbeeldingsformaten toe te voegen, moet u oproepen toevoegen aan de functie add_image_size . Hier is een voorbeeld dat vier nieuwe beeldformaten toevoegt:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Elke aanroep naar de functie bevat een naam (zodat WordPress de grootte kan identificeren) en een breedte. De nieuwe maten zullen 300, 600, 1200 en 2400 pixels breed zijn. Het is mogelijk om met de functie add_image_size WordPress ook de hoogte in te stellen of de afbeelding bij te snijden , maar het bovenstaande voorbeeld behoudt de oorspronkelijke beeldverhouding. (Meer informatie is te vinden over de functie add_image_size in de WordPress Codex .)
In het bovenstaande voorbeeld worden alleen vier nieuwe afbeeldingsformaten toegevoegd, maar misschien wilt u er meer of minder aan toevoegen ... dit is gebaseerd op uw themaontwerp. Wanneer een afbeelding wordt geüpload naar WordPress, worden nu de nieuwe afbeeldingsformaten gegenereerd. De volgende stap is om ze op te nemen in de HTML.
Stap 2: installeer de RICG Responsive Images-plug-in
Om ervoor te zorgen dat WordPress alle afbeeldingsformaten uitvoert, moet een nieuwe plug-in worden geïnstalleerd: de RICG Responsieve afbeeldingen inpluggen. Nadat het is geïnstalleerd en geactiveerd, worden alle afbeeldingen in de afbeeldingstag opgenomen via het attribuut srcset.
Meestal ziet een HTML-afbeelding er als volgt uit wanneer een afbeelding wordt toegevoegd aan een pagina in WordPress:
Er is één afbeelding in het src-attribuut.
Zodra de plug-in is geïnstalleerd, ziet de HTML er als volgt uit:
Alle nieuwe afbeeldingsformaten zijn toegevoegd via het kenmerk srcset .
De plug-in bevat ook Picturefill.js , een responsieve afbeelding-polyfill die ondersteuning toevoegt voor zowel het afbeeldingselement als de nieuwe responsieve kenmerken voor het img-element. Dit, samen met de srcset- kenmerken die nu in de afbeeldingstag worden opgenomen, maakt uw afbeeldingen responsive.
Je afbeeldingen zijn nu responsief
Nu reageren de afbeeldingen op uw website - de browser kiest de meest geschikte afbeelding om te downloaden.
Gebruikers op apparaten met kleinere schermen krijgen de kleinere afbeeldingen. Je website wordt sneller geladen omdat deze afbeeldingen sneller worden gedownload, omdat ze minder bandbreedte van gebruikers nodig hebben. Gebruikers op apparaten met grotere schermen krijgen de grotere afbeeldingen. Ze verschijnen niet korrelig of van mindere kwaliteit.
Er is slechts één potentieel probleem met deze methode: het werkt alleen met afbeeldingen die zijn geüpload naar WordPress nadat de RICG Responsive Images-plug-in is geïnstalleerd. Als het een gloednieuwe website is waar u aan werkt, is dit misschien geen probleem, maar als het een bestaande website met bestaande inhoud is, zullen de nieuwe afbeeldingsformaten die u in functions.php hebt toegevoegd, niet zijn gegenereerd. Gelukkig hoef je niet alle afbeeldingen opnieuw toe te voegen - er is een plug-in die kan helpen.
Stap 3: Installeer plug-in om beeldformaten opnieuw te genereren (optioneel)
De Miniaturen opnieuw genereren plug-in zal alle bestaande beeldbijlagen doorlopen en de nieuwe beeldgroottes opnieuw genereren op basis van de nieuwe beeldbestanden gemaakt in functions.php - het is een real time saver en vereist slechts de klik van een enkele knop.
Eenmaal geïnstalleerd, ga naar Tools -> Regen. Klik op miniaturen en vervolgens op de knop "Alle thumbnails opnieuw genereren". Er verschijnt een statusbalk en u ziet informatie over het formaat van de afbeeldingen.
Nu worden alle bestaande afbeeldingen in uw website correct weergegeven met behulp van de afbeeldingstag via het kenmerk srcset .
Aanbevolen beeldgebruik apparaat afbeelding en afbeelding van een mobiel apparaat via Shutterstock.