U bent er wellicht op gestuit dat het in de rol als theme ontwikkelaar een standaard is om uw theme te bouwen met web performance in het achterhoofd. Dit betekent dat u ervoor moet zorgen dat de afbeeldingen die in uw thema worden uitgevoerd, niet de volledige grootte hebben als ze meer dan 100 kilobyte groot zijn.
Ook het gebruik van WordPress’s functionaliteit voor het HTML-afbeeldingsattribuut srcset is een reden om de functie wp_get_attachment_image() te gebruiken bij het uitvoeren van afbeeldingen.
Een ander gebruik is bij het uitvoeren van blogberichten met uitgelichte afbeeldingen. Als een thema-ontwikkelaar wilt u ervoor zorgen dat u ofwel specificeert: (a) een van de standaard post thumbnail maten, of (b) maak uw eigen aangepaste post thumbnail grootte.
Er zijn gevallen waarin je misschien niet hoeft te gebruiken een aangepaste post thumbnail grootte. U kunt echter in plaats daarvan een standaard post thumbnail grootte die perfect zal voldoen aan uw eisen te gebruiken.
De standaard thumbnailformaten die u kunt gebruiken, zijn de volgende:
-
thumbnail(gebruikt de grootte 150px × 150px) -
medium(gebruikt de grootte 300px × 300px) -
medium_large(gebruikt de grootte 768px × 0px) -
large(gebruikt de grootte 1024px × 1024px)
In deze gevallen kun je eenvoudig aangeven of je een vergelijkbare grootte wilt gebruiken voor een van deze standaard thumbnail groottes. Het enige wat u hoeft te doen is een van de bovengenoemde strings te gebruiken in de $size parameter van de_post_thumbnail() functie.
U zult merken dat deze standaard post thumbnail maten bijna allemaal vierkant bijgesneden afbeeldingen zijn. Dit is waarschijnlijk te wijten aan de maximale ruimte waarvan een afbeelding kan worden uitgevoerd – een vierkant. Om de ruimte zo goed mogelijk te benutten, is besloten om deze standaard post thumbnail maten als vierkante afbeeldingen te maken.
Wanneer een aangepaste post thumbnail grootte te gebruiken
Echter, er zijn gevallen waarin u een afbeelding moet uitvoeren die geen vierkant is. Neem bijvoorbeeld dat u een uitgelichte afbeelding moet toevoegen boven uw blog enkel artikel met behulp van de functie the_post_thumbnail().
U kunt de volgende code gebruiken die een uitgelichte afbeelding van uw artikel zal uitvoeren met de grootte 1024px × 768px:
add_image_size( 'single-feature', 1024, 768, true );
En snel duidelijk maken wat dit in lekentaal betekent:
- add_image_size() – maak een aangepaste post thumbnail grootte
- ‘single-feature’ – parameter
$name, gewoon een naam van de aangepaste post thumbnail grootte - 1024 – parameter
$width, de breedte van de aangepaste post thumbnail - 768 – parameter
$height, de hoogte van de aangepaste post thumbnail - true – parameter
$crop, betekent of (a) hard bijsnijden, of (b) afbeelding schalen naar de aangepaste post thumbnail grootte. Meer info in de WP Dev docs
Als extra info: in het voorbeeld zijn de opgegeven breedte en hoogte gekozen (1024 × 768) omdat dit de gebruikelijke afmetingen zijn om te gebruiken voor uitgelichte afbeeldingen. Dit hoeft echter niet te betekenen dat je geen andere afmetingen kunt gebruiken. Zorg ervoor dat u ziet wat het beste past voor uw thema-ontwerp en gebruik dat.
Hoe aangepaste post thumbnails bij te werken
Zoals u de nieuwe afbeeldingsformaten voor uw WordPress-afbeeldingen gaat testen, zult u merken dat u problemen kunt hebben met het bijwerken van de breedte en hoogte zonder de $name van de aangepaste post thumbnail grootte te wijzigen.
Laten we als voorbeeld nemen dat u de oude grootte hebt:
add_image_size( 'single-feature', 1024, 768, true );
Maar nu moet u de grootte van deze ‘single-feature’ thumbnailgrootte bijwerken naar de volgende:
add_image_size( 'single-feature', 1366, 768, true );
U ziet dat de verandering in de breedte van 1024 naar 1366 was. Maar als u het sjabloon vernieuwt waarin deze grootte moet worden weergegeven, toont het nog steeds de afbeelding met de breedte van 1024. Hoe kan dit worden opgelost?
Om dit te verhelpen, moet je de thumbnail regenereren.
Dus om te beginnen, zorg ervoor dat u uw thumbnail breedte en hoogte hebt bijgewerkt, installeer dan de plugin Regenerate Thumbnails. Volg de instructies van de plugin en u zult dan hebben geregenereerd de thumbnail maten met succes.
Hergenereren van al uw afbeeldingen kan enige tijd duren, vooral als uw website heeft veel afbeeldingen in uw Media Library.
Waar te plaatsen van de add_image_size Functie
De add_image_size() functie zal niet werken, tenzij je het goed te plaatsen binnen de WordPress after_setup_theme actie haak. Dit betekent dat de volgende voorbeeld code:
add_image_size( 'archive-featured', 792, 446, true );
Moet worden binnen de volgende actie haak in uw thema functions.php bestand onder:
function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );
Toevoegen add_image_size in de Underscores Thema
Een zeer populaire starter thema genaamd de Underscores Thema of _s thema heeft een goede plek om uw add_image_size() functies toe te voegen.
U kunt de aangepaste post thumbnail grootte functie add_image_size() toevoegen onder de add_theme_support( 'post-thumbnails' ); regel in het functions.php bestand van het Underscores thema.
De reden dat u de functie add_image_size() hier onder kunt toevoegen is omdat het al in de eerder genoemde after_setup_theme actiehaak zit.
Afbeelding grootte functie knipsel voor WordPress thema’s
Als u wilt, kunt u de onderstaande knipsel voor de add_image_size in de Underscores thema kopiëren voor uw toekomstige referentie:
/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );
Note: Zorg ervoor dat u de parameters gebruikt in de knipsel definiëren om ervoor te zorgen dat u geen PHP waarschuwing fouten in uw thema te ontvangen. Het bovenstaande knipsel wordt gebruikt als sjabloon om in de functies van uw thema te plakken.
Conclusie
Dank u voor het lezen van dit artikel! Laat me weten wat u denkt en hoe u de thumbnail-grootte van aangepaste berichten instelt.
Als u van dit artikel hebt genoten, vindt u het misschien leuk om te weten welke fouten u maakt bij het instellen van aangepaste post-typen. Ten eerste, registreer geen custom post types in je thema!
