Den kompletta guiden för visade miniatyrer och bildstorlekar i WordPress
Annons
En bild är värd tusen ord - såvida den inte har ändrats på ett korrekt sätt, i vilket fall det är lite pinsamt. WordPress innehåller kraftfulla verktyg för att ändra storlek på bilder och miniatyrer, men du måste veta hur du ska hantera dem.
Läs vidare för allt du behöver veta om bildstorlekar i WordPress och hantera presenterade bilder.
Redigera PHP i WordPress-filer
Det här inlägget innehåller PHP-kod för WordPress. Du kanske vill läsa vår gratis PHP-kraschkurs innan du försöker ändra ditt tema.
Om du inte är bekväm att öppna dina temafiler, eller inte vill för att de kommer att gå förlorade med framtida temainformationer, kan du använda insticksprogrammet Mina anpassade funktioner för att lägga till kodblock istället.
Mina anpassade funktioner
WordPress Image Size Basics
I WordPress admin-instrumentpanelen vet du antagligen redan om Inställningar > Media.
Dessa är de tre standardbildstorlekarna, som WordPress kallar: miniatyrbild, medium och stor . Miniatyrstorleken har en speciell inställning som ska beskäras i den exakta dimensionen du anger här. Detta behöver inte vara en 1: 1-dimension: du kan ställa in den du vill.
När beskärning är aktiverad skalas bilderna och centreras, och allt som inte passar kommer att kasseras.
Den medelstora och stora inställningen fungerar något annorlunda, genom att du anger maximala dimensioner för både bredd och höjd, och bilderna skalas ned i enlighet därmed. Om bilden är för liten skapas inte dessa bildstorlekar.
När du laddar upp en ny bild sparas originalet och är tillgängligt att infoga i ett inlägg i full storlek, och de andra registrerade bildstorlekarna skapas automatiskt.
Lägga till anpassade bildstorlekar i WordPress
De tre storlekarna som är definierade som standard inom WordPress kanske inte räcker, varför teman och plugins får lägga till sina egna anpassade storlekar. Om du är bekväm att redigera dina temafiler kan du göra det också.
Öppna temakatalogen och leta efter filen files.php. Lägg till följande kod, en för varje bildstorlek du vill definiera:
add_image_size( 'my-thumbnail', 400, 200, true); Varje ny bildstorlek behöver namn, bredd och höjdmått och huruvida bilder ska beskäras till exakt denna storlek ( sant eller falskt ). För strukturella delar av ett tema eller widget vill du i allmänhet skära så att det inte bryter layouten.
Du kanske frestas att skapa många anpassade bildstorlekar, men du bör göra det sparsamt. Varje bildstorlek du definierar kommer att genereras för varje enskild bild som du laddar upp, även om du bara tänkte den för oss med den visade bilden.
Så om du har sju anpassade bildstorlekar, plus de tre standardstorlekarna, kommer varje bild du laddar upp tio små kopior av sig själv. Om du anser att ett enda inlägg kan ha 10 bilder inbäddade i det, är det 100 filer som skapas bara för det inlägget ensam.
Du kan inte skapa en anpassad bildstorlek och ange att den endast ska användas för dina presenterade bilder.
Även om du inte längre använder en viss anpassad storlek och har tagit bort den koden (eller ändrade teman) kommer de gamla bilderna att stanna kvar på servern för alltid. WordPress tar inte bort oanvända bilder för dig. På en webbplats så gammal eller så stor som MakeUseOf, betyder detta att några hundra gigabyte slösas med att lagra bilder som inte längre används.
För mindre webbplatser kan Media Cleaner-plugin hjälpa, men kör alltid en fullständig säkerhetskopia först.
Media Cleaner
Anpassade bildstorlekar för användning i postinnehåll
Som standard visas inte anpassade bildstorlekar i listrutan när du sätter in en bild i ett inlägg. Det enda du ser där är miniatyrbild, medium, stor och full storlek (beroende på storleken på originalbilden, eftersom den inte ska uppskalas).
Om du vill att din anpassade storlek också ska vara med på listan behöver vi lite mer kod. Lägg igen till din features.php- fil:
function image_sizes_to_mediapicker( $default_sizes ) { return array_merge( $default_sizes, array( 'my-thumbnail' => __( 'My Thumbail Size' ), ) ); } add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' ); Detta fungerar genom att filtrera listan över medievalen. Vi sammanfogar den ursprungliga storlekslistan med alla nya storlekar som vi också vill lista. Ändra "min-miniatyrbild" och "Min miniatyrstorlek" till din anpassade storlek och det mänskliga läsbara vänliga namnet du vill att det ska visas som.
WordPress Featured Image Options
Utvalda bilder är en enda bild associerad med ett inlägg, men inte nödvändigtvis infört i inläggets innehåll. De används ofta av teman i rubriken, på framsidan eller i sidofältet. När det gäller bildstorlek behandlas de emellertid inte annorlunda än normala bilder.
För varje storlek du har definierat kommer alla bilder som laddas upp dupliceras och ändras i storlek, inklusive den visade bilden.
Om du inte ser alternativet att ställa in visad bild på skärmen för redigering av inlägg, är det möjligt att ditt tema inte stöder funktionen. Du kan tvinga fram support genom att lägga till följande rad i ditt temas funktioner.php- fil, men jag skulle starkt föreslå att du hittar ett nytt tema istället.
Brist på stöd för något så grundläggande som presenterade bilder skulle indikera föråldrad kod någon annanstans.
add_theme_support('post-thumbnails'); Om du vill använda den visade bilden i ditt eget tema eller plugins använder du funktionen_post_tumnail () för att mata ut bildtaggen:
the_post_thumbnail('my-thumbnail', array('class'=>'my_post_thumbnail_css_class')); Funktionen tar två parametrar: den namngivna storleken du letar efter (i detta fall "min-miniatyrbild") och alla attribut du vill skicka in, som en anpassad CSS-klass.
Om du hellre bara vill få den verkliga webbadressen för den visade bilden än den HTML som krävs också, kan du prova detta istället (få medelstorleken i det här exemplet):
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium'); echo $thumbnail[0]; Regenerera WordPress-miniatyrbilder
När du ändrar dina standardbilddimensioner eller skapar en anpassad bildstorlek gäller den bara för nya uppladdningar. Alla dina befintliga bilder förblir i de ursprungliga dimensionerna.
Om du vill ändra storlek på tidigare överförda bilder behöver du ett plugin. Med AJAX Thumbnail Rebuild kan du välja vilka storlekar du ska regenerera och kommer långsamt att arbeta igenom ditt arkiv.
AJAX Miniatyruppbyggnad
Det finns dock vissa begränsningar och fallgropar som du bör veta om.
Även om visade bilder kan ändras storlek automatiskt, kan inget plugin skriva om innehållet i inlägget. Om du till exempel lägger till en bild till ett inlägg i den stora storleken (som kanske har varit 500 px vid den tiden), kommer inte att ändra definitionen av stor ändra bildstorleken i inlägget. Det kommer att stanna på 500px om du inte redigerar inlägget och sätter in samma bild igen i den nya storleken.
Som nämnts kommer du att generera en hel del bilder om du har många bildstorlekar. Tack och lov, med miniatyruppbyggnaden kan du begränsa detta till endast presenterade bilder . Men igen, kom ihåg att detta bara gäller för din tidigare bild. Alla framtida uppladdningar av bilder hanteras av WordPress, vilket betyder att alla bildstorlekar skapas för allt.
Nu skulle det vara en bra tid att också lära sig skillnaden mellan JPG och PNG Vet när man ska använda Vilket filformat: PNG vs. JPG, DOC vs. PDF, MP3 mot FLAC. Vet när man ska använda Vilket filformat: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Känner du till skillnaderna mellan JPG och PNG, eller MP3 och FLAC? Om du inte vet vilka filformat du ska använda, låt oss vägleda dig genom deras distinktioner. Läs mer så att du vet att du ska använda det optimala formatet i framtiden.
Ta din WordPress-webbplats till nästa nivå
Vill du justera ditt WordPress-tema? Ditt temas användning av bilder, färger och placering av element definieras huvudsakligen av CSS och HTML, så vi rekommenderar att du tittar på dessa steg-för-steg-tutorials för att lära dig CSS och HTML.
Och om du är intresserad av teman, titta på dessa coola WordPress-teman för en fotografiportfölj.
Kraschar din WordPress-webbplats för ofta? Betalar du för mycket? Byt till en välkänd webbhotell som InMotion Hosting (special MakeUseOf-rabatt med denna länk) eller Bluehost (special MakeUseOf-rabatt med denna länk).
Utforska mer om: Wordpress.
