Door naar hoofdmenu

Responsives hoe afbeeldingen worden beheerd door WordPress

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Hoewel de toenemende acceptatie van responsieve afbeeldingen niet kan worden genegeerd, kan het erg moeilijk zijn om de functionaliteit te gebruiken onder de beperkingen van een groot CMS zoals WordPress. Hoewel het heel goed mogelijk is om de functie in uw thema zelf te ontwerpen, is dit een moeilijke zaak en kost het tijd.

Gelukkig krijgen thema- en plug-in-ontwikkelaars met de lancering van WordPress 4.4 de mogelijkheid om responsieve afbeeldingen in hun producten te gebruiken. Sinds de start van deze release is de plug-in "Responsive Images RICG" samengevoegd met de WordPress-kern, wat betekent dat ondersteuning voor responsieve afbeeldingen nu als een interne standaardfunctie van WordPress is. Laten we eens kijken hoe het werkt en hoe u het kunt gebruiken om het beste uit uw WordPress-site te halen.

responsieve-image-trac-wordpress

Hoe beelden werken responsives

Zodra u een upgrade naar WordPress 4.4 uitvoert, hebben al uw inhoud en afbeeldingen de 'srcset' en ' maten Die worden gefilterd om ervoor te zorgen dat elke beschikbare afbeeldingsgrootte bestaat, terwijl de grootte van de oorspronkelijk aangevraagde afbeelding behouden blijft. Het is belangrijk op te merken dat aangepaste afmetingen worden genegeerd in de " srcset »Als de beeldverhouding verschilt van de gevraagde originele afbeelding. Bovendien door een afbeelding op te roepen via de functie " wp-get-attachment image Het zal ook een responsief beeld retourneren.

de " Responsieve Beelden Is een functie op de achtergrond, wat betekent dat alles automatisch gebeurt elke keer dat een gebruiker een afbeelding uploadt naar WordPress via de interface voor het uploaden van media. Wanneer een afbeelding op een pagina verschijnt, heeft deze het kenmerk ' srcset "En" maten Als resultaat van dit achtergrondproces.

Dit betekent dat de nieuwe functionaliteit van responsieve afbeeldingen geen zichtbare gebruikersinterface zal hebben. Er zijn geen schakelopties, invulbare formulieren of selectievakjes. Dat gezegd hebbende, moeten thema-ontwikkelaars hun " functions.php Opdat hun afbeeldingen een precisie hebben met het kenmerk " maten ". Inderdaad, als we het hebben over responsieve afbeeldingen in WordPress, hebben we het specifiek over de attributen " srcset "En" maten Die zijn te vinden op de tag van de afbeelding.

Hoewel WordPress uitstekend werk levert door alle beschikbare formaten in het kenmerk ' srcset ", Het kenmerk" maten "is iets moeilijker te voorspellen. Inderdaad, het kenmerk ' maten Is verantwoordelijk voor het vertellen van de browser hoe de afbeelding overeenkomt met de beschikbare afmetingen van het venster. Aangezien de informatie zal verschillen afhankelijk van de stijl van het thema van de gebruiker, is het beste wat we kunnen doen als volgt een redelijke standaard opgeven:

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

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

Dit standaardkenmerk ' maten Doet twee dingen. Ten eerste zorgt het ervoor dat een geldig kenmerk " maten Bestaat in de afbeelding, die sinds kort een verplichte vereiste is volgens de specificatie. Ten tweede zorgt het ervoor dat de browser geen afbeeldingsbron biedt die groter is dan de oorspronkelijk gevraagde breedte. In het geval van CSS-manipulatie zal de grootte van de afbeelding verschillen afhankelijk van de breedte van de vensters, aan de andere kant de standaardwaarde " maten Wordt minder nuttig.

Omdat het standaardkenmerk ' maten "Helpt alleen bij afbeeldingen die niet door CSS zijn gewijzigd, filterhaakjes zijn beschikbaar zodat thema-ontwikkelaars het" attribuut "kunnen instellen maten "Van elke afbeelding, ervoor zorgen dat een perfecte" maten Wordt bij elke stopplaats afgeleverd.

Het is belangrijk op te merken dat, indien mogelijk, uw thema niet mag vertrouwen op de standaardwaarde van de " maten"Om nauwkeurige informatie te verstrekken over responsieve beeldondersteuning." Inderdaad, het standaardattribuut ' maten »Staat de browser niet toe de afbeeldingsbron te wijzigen wanneer het venster kleiner is dan de oorspronkelijke grootte van de opgevraagde afbeelding. Het zal ook niet in staat zijn om de bron te wijzigen als de afbeelding wordt bewerkt met CSS op een breekpunt, wanneer de afbeelding groter is dan het aangevraagde originele formaat.

Als u een thema-ontwikkelaar bent of toegang hebt tot een WordPress-codebasis, filtert u de afbeeldingen in uw thema om precisie te bieden met het kenmerk ' maten Is een van de belangrijkste dingen die u kunt doen nadat de nieuwe versie binnenkort beschikbaar is. Het volgende is een voorbeeld van een haak in de " wp_calculate_image_sizes Welke u kunt ontwikkelen om bij uw thema te passen.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

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 );

In dit voorbeeld is het vinkje van toepassing op alle inhoud, inclusief aanbevolen afbeeldingen en miniaturen. Er kan extra logica worden toegevoegd om ervoor te zorgen dat verschillende soorten afbeeldingen verschillende waarden hebben.

code-source-wp-image-responsieve

Nieuwe functies zijn toegevoegd voor het kenmerk " srcset "En" maten Kan worden toegevoegd aan een afbeelding die is toegevoegd aan WordPress via Media Manager, naast de afbeeldingen die zijn toegevoegd om de inhoud weer te geven. De functie wp_get_attachment_image_sizes Retourneert een standaardkenmerk " maten Die kan worden aangepast door een filter van uw thema in het bestand ' functions.php ". De functie wp_get_attachment_image_srcset retourneert een kenmerk srcset »Die alle beschikbare formaten van de gevraagde afbeelding bevat. Documentatie en voorbeelden van het gebruik van deze nieuwe functies zijn te vinden naslaggids van ontwikkelaars.

Responsieve afbeeldingen configureren voor uw thema

Met de nieuwe functies komen verschillende nieuwe haakjes die kunnen worden gebruikt om een ​​nieuw niveau van ondersteuning te bieden voor responsieve afbeeldingen, die het beste bij uw thema passen. De haak max_srcset_image_width "Staat de thema-ontwikkelaar toe om de maximale breedte van de afbeelding te filteren om in de" srcset ". De haak wp_calculate_image_srcset »Zal ​​de attributen filteren« srcset »Afbeeldingen, terwijl de haak (filter)« wp_calculate_image_sizes "Staat de thema-ontwikkelaar toe de" maten Om de afbeeldingbreekpunten in hun thema beter af te stemmen.

Als u een voorbeeld zoekt van hoe u de " maten Van een afbeelding zal het nieuwe twentysixteen-thema een perfect voorbeeld zijn. In het functions.php-bestand van dit thema filteren de laatste twee functies het attribuut " maten Om te reageren op de verschillende beeldbreekpunten binnen het thema.

responsieve filters afbeelding WordPress tutorial #

Updaten naar WordPress 4.4 betekent dat gebruikers onmiddellijk profiteren van responsieve afbeeldingscompatibiliteit, wat de weergave van scherpe, heldere afbeeldingen bij elke venstergrootte en pixeldichtheid bevordert. Dit zal ook resulteren in betere prestaties, aangezien pagina's niet langer lange tijd grote, zware afbeeldingen hoeven te laden. Hoewel dit een automatisch proces is voor gebruikers, zullen thema-ontwikkelaars hun afbeeldingsgrootte moeten aanpassen voor hun thema's.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Dat is alles voor deze zelfstudie, ik hoop dat het u helpt het belang en het concept van responsieve afbeeldingen op WordPress beter te begrijpen. Deel deze tutorial met je vrienden op je favoriete sociale netwerken.

 

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
11 aandelen
aandeel6
gekwetter1
Enregistrer4