Du kanske har snubblat över det faktum att i rollen som temautvecklare är det standard att bygga ditt tema med webbprestanda i åtanke. Detta innebär att du ska se till att bilderna i ditt tema inte är i ”full” storlek om de kan vara mer än 100 kilobyte.
Och att använda WordPress funktionalitet för HTML-bildattributet srcset är en annan anledning att använda wp_get_attachment_image()-funktionen vid utmatning av bilder.
En annan användning skulle vara vid utmatning av blogginlägg med presenterade bilder. Som temautvecklare vill du se till att du antingen anger: (a) en av standardstorlekarna för miniatyrbilder av inlägg eller (b) skapa en egen anpassad storlek för miniatyrbilder av inlägg.
Det finns fall där du kanske inte behöver använda en anpassad storlek för miniatyrbilder av inlägg. Du kan dock i stället använda en standardstorlek för miniatyrbilder av inlägg som passar perfekt för dina behov.
De standardstorlekar för miniatyrbilder som du kan använda är följande:
-
thumbnail(använder storleken 150px × 150px) -
medium(använder storleken 300px × 300px) -
medium_large(använder storleken 768px × 0px) -
large(använder storleken 1024px × 1024px)
I dessa fall kan du enkelt ange om du har en liknande storlek att använda för någon av dessa standardstorlekar för miniatyrbilder. Allt du behöver göra är att använda någon av ovanstående strängar i parametern $size i funktionen the_post_thumbnail().
Du kommer att märka att dessa standardstorlekar för miniatyrbilder för inlägg nästan alla är kvadratiskt beskurna bilder. Detta beror troligen på det maximala utrymme som en bild kan visas – en kvadrat. För att utnyttja utrymmet maximalt beslutades det att dessa standardstorlekar för miniatyrbilder för inlägg ska vara kvadratiska.
När du ska använda en anpassad storlek för miniatyrbilder för inlägg
Det finns dock fall där du behöver skriva ut en bild som inte är kvadratisk. Ta till exempel att du måste lägga till en presenterad bild ovanför en enskild artikel i din blogg med hjälp av funktionen the_post_thumbnail().
Du kan använda följande kod som ger ut en presenterad bild av din artikel med storleken 1024px × 768px:
add_image_size( 'single-feature', 1024, 768, true );
Och snabbt identifiera vad detta innebär i lekmannatermer:
- add_image_size() – skapar en egen miniatyrstorlek för inlägget
- ’single-feature’ – parameter
$name, bara ett namn på den anpassade miniatyrstorleken för inlägget - 1024 – parameter
$width, bredden på den anpassade miniatyrbilden - 768 – parameter
$height, höjden på den anpassade miniatyrbilden - true – parameter
$crop, betyder att bilden ska a) beskäras hårt eller b) skalas till den anpassade miniatyrbilden. Mer information i WP Dev-dokumentationen
Som ytterligare information: I exemplet valdes den angivna bredden och höjden (1024 × 768) eftersom det är de vanligaste storlekarna att använda för presenterade bilder. Detta behöver dock inte betyda att du inte kan använda någon annan storlek. Se till att se vad som passar bäst för din temadesign och använd det.
Hur man uppdaterar anpassade inläggsminiatyrer
När du kommer att testa de nya bildstorlekarna för dina WordPress-bilder kommer du att märka att du kan ha problem med att uppdatera bredden och höjden utan att ändra $name av storleken på den anpassade inläggsminiatyren.
Låt oss till exempel ta att du har den gamla storleken:
add_image_size( 'single-feature', 1024, 768, true );
Men nu måste du uppdatera storleken på denna ”single-feature” miniatyrbildsstorlek till följande:
add_image_size( 'single-feature', 1366, 768, true );
Du ser att ändringen var i bredden från 1024 till 1366. Men när du uppdaterar mallen där den här storleken ska visas kommer den fortfarande att visa bilden med bredden 1024. Hur kan detta åtgärdas?
För att åtgärda detta måste du återskapa miniatyrbilden.
Så för att börja med att se till att du har uppdaterat din miniatyrbildsbredd och -höjd, installera sedan insticksmodulen Regenerate Thumbnails. Följ instruktionerna i insticksprogrammet och du kommer sedan att ha regenererat miniatyrstorlekarna framgångsrikt.
Regenerering av alla dina bilder kan ta lite tid, särskilt om din webbplats har många bilder i mediebiblioteket.
Var ska du placera add_image_size-funktionen
Funktionen add_image_size() kommer inte att fungera om du inte placerar den på rätt sätt i WordPress after_setup_theme-action hook. Detta innebär att följande exempelkod:
add_image_size( 'archive-featured', 792, 446, true );
måste ligga inom följande action hook i ditt temas functions.php-fil under:
function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );
Lägga till add_image_size i Underscores-temat
Ett mycket populärt starttema som kallas Underscores-temat eller _s-temat har ett bra ställe för att lägga till dina add_image_size()-funktioner.
Du kan lägga till funktionen för anpassad storlek på miniatyrbilder för inlägg add_image_size() under raden add_theme_support( 'post-thumbnails' ); i filen functions.php i Underscores-temat.
Anledningen till att du kan lägga till funktionen add_image_size() under här är att den redan finns i after_setup_theme-åtgärdshaken som nämndes tidigare.
Add Image Size Function Snippet for WordPress Themes
Om du vill kan du kopiera utdraget nedan för add_image_size i Underscores-temat för din framtida referens:
/* * 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 );
Anmärkning: Se till att du definierar de parametrar som används i utdraget för att säkerställa att du inte får några PHP-varningsfel i ditt tema. Ovanstående utdrag används som en mall som du kan kopiera och klistra in i dina temafunktioner.
Slutsats
Tack för att du läste den här artikeln! Låt mig veta dina tankar och din inställning på anpassade inläggs miniatyrstorlekar.
Om du gillade den här artikeln kanske du vill veta Temas misstag när du ställer in anpassade posttyper. För det första, registrera inte anpassade posttyper i ditt tema!
