Tutorial – Använd miniatyrbilder i WordPress

Många teman som ser ut som en tidningar eller magasin har länge använt sig av en bild för varje post på startsidan. Hittills har det inte funnits något standardiserat sätt att göra detta på utan man har ofta använt sig av custom fields för att åstadkomma detta. Sedan WordPress 2.9 finns en funktion som gör att man kan ladda upp en miniatyrbild (thumbnail på engelska) till varje post eller sida.
De flesta teman som använder miniatyrbilder för posterna och som är gjorda för WordPress 2.9 använder troligtvis redan denna funktion. Skulle du hitta ett tema som inte gör det är det ingen katastrof. Det är nämligen väldigt lätt att själv lägga till denna funktion i temat.

Aktivera ministyrbilder i WordPress

Det första man måste göra är att aktivera funktionen för miniatyrbilder. Man kan välja på om man vill aktivera det för både poster och sidor eller bara för någon av dem. Lägg till någon av följande rader i functions.php beroende på hur du vill göra.

add_theme_support( 'post-thumbnails' ); // post och sida
add_theme_support( 'post-thumbnails', array( 'post' ) ); // endast post
add_theme_support( 'post-thumbnails', array( 'page' ) ); // endast sida 

Nästa steg är att ange storleken för dina miniatyrbilder, även det i functions.php. Här har man lite olika val både när det gäller storleken på bilderna men även hur man ska beskära bilden. Det enklaste fallet är att ange miniatyrbilder enligt följande.

 set_post_thumbnail_size( 100, 100 );

Detta betyder att bilder är i storlek 100×100 pixlar och bilden förminskas tills den får plats inom angiven storlek. Anger man istället följande så betyder det att man beskär bilden i angiven storlek.

 set_post_thumbnail_size( 100, 100, true );

Det kan finnas tillfällen då man vill använda samma bild fast i en annan storlek på till exempel sidan som visar hela posten (single.php). Detta gör man genom att ange fler storlekar på detta sätt i functions.php.

 add_image_size( 'single-post-thumbnail', 400, 9999 );

Visa miniatyrbilder på sajten

För att sedan visa miniatyrbilderna i home.php eller index.php anger man följande kod.

<?php the_post_thumbnail(); ?>

För att visa bilder på single.php i den större storleken anger man följande.

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Stöd tidigare versioner av WordPress

Om man utvecklar ett tema som man planerar att publicera kan man lägga till funktioner som kontrollerar vilken version av WordPress man använder och om inlägget verkligen har en miniatyrbild. Ange följande kod i function.php för att kontrollera vilken version av WordPress du använder. Använder man version 2.9 eller nyare aktiverar man funktionen för miniatyrbilder.

if ( function_exists( 'add_theme_support' ) ) { // Från och med 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true ); // index.php eller home.php
add_image_size( 'single-post-thumbnail', 400, 9999 ); // single.php
}

För att kontrollera om en post innehåller en miniatyrbild anger man följande.

if ( has_post_thumbnail() ) {
the_post_thumbnail(); // posten har en miniatyrbild
} else {
// posten saknar en miniatyrbild
}

Använd CSS med dina thumbnails

Vill man använda CSS tillsammans med sina miniatyrbilder kan man såklart göra det.

the_post_thumbnail('single-post-thumbnail', array('class'=>'thumbnail')); 

Hur fungerar det för användare?

Efter att ha gått igenom hur man aktiverar miniatyrbilder i sitt tema ska vi kolla på hur det fungerar när man väl skriver inlägg i sin blogg eller på sin webbsida.

Har man gjort allt ovanstående och går till sidan där man skriver sina inlägg så ser man följande box där man kan ladda upp en miniatyrbild.

Post Set Thumbnail

Ladda upp en miniatyrbild

Om man klickar på Set thumbnail i bilden ovan så kommer man till den vanliga bilduppladdningen i WordPress men nu så har man fått ytterligare ett val att använda bilden som miniatyrbild (thumbnail).

Use As Thumbnail

Använd som miniatyrbild

När detta är gjort så ser man den uppladdade bilden direkt på sidan.

Preview Post Thumbnail

Förhandsgranska inläggets miniatyrbild

Svårare än så är det inte att aktivera miniatyrbilder i sitt tema och att använda funktionen när man skriver inlägg på sin blogg.

Det här inlägget postades i Allmänt. Bokmärk permalänken.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *