Hur man skapar ytterligare bildstorlekar i WordPress

Förra månaden upptäcktes en enorm sårbarhet i ett berömt skript för storleksändring som kallas TimThumb. Sedan dess har gemenskapen samarbetat och fixat problemen. Medan TimThumb är ett genomförbart alternativ, tror vi att WordPress-temautvecklare borde fokusera på att använda kärnfunktionerna snarare än att förlita sig på skript från tredje part. I den här artikeln kommer vi att visa dig hur du lägger till ytterligare bildstorlekar i WordPress.


WordPress har en inbyggd funktion Post Thumbnails aka Featured Pictures. Det finns också en inbyggd funktion add_image_size () som låter dig ange bildstorlekar och ge dig möjlighet att beskära. Att använda dessa kärnfunktioner i ditt tema kan i huvudsak eliminera behovet av ett tredjepartsskript som TimThumb i de flesta fall.

Registrera ytterligare bildstorlekar för ditt tema

Du måste börja med att lägga till stöd för miniatyrbilder efter inlägg genom att placera följande kod i ditt temas funktioner.php-fil:

add_theme_support (‘post-miniatyrbilder’);

När du aktiverar stödet för postminiatyrer kan du nu använda funktionen för att registrera ytterligare bildstorlekar med funktionen add_image_size (). Användningen av add_image_size-funktionen är så här: add_image_size (‘namn-på-storlek’, bredd, höjd, beskärningsläge);

Exempelkod kan se ut:

add_image_size (‘sidofält-tumme’, 120, 120, sant); // Hårskärningsläge
add_image_size (‘hemsida-tummen’, 220, 180); // Soft Crop Mode
add_image_size (‘singlepost-thumb’, 590, 9999); // Obegränsad höjdläge

Om du nu märker att vi har angett tre olika slags bildstorlekar. Var och en har olika lägen som hård gröda, mjuk gröda och obegränsad höjd. Så låter oss täcka varje exempel och hur du kan använda dem till dina fördelar.

Hårskärningsläge – Som ni märker läggs ett värde “sant” till efter höjden. Det verkliga värdet säger WordPress att beskära bilden till den storlek som vi har definierat (i detta fall 120 x 120 px). Detta är metoden vi använder mycket i våra temateckningar för att se till att allt står i proportion och att vår design inte bryter. Denna funktion beskär bilden automatiskt antingen från sidorna eller från toppen och botten beroende på storlek. Nackdelen med hårt beskärning är att du inte kan kontrollera vilken del av bilden som visas.

Rättelse av Mike Little – När du har laddat upp en bild och innan du sätter in i inlägget kan du klicka på ‘redigera bild’ och därifrån ändra miniatyren eller hela bilden, skala, rotera eller vända bilden och för miniatyrbilden välj den exakta delen av bilden du vill ha.

Mjuk beskärningsläge – Som standard aktiveras mjuk beskärningsläge. Därför ser du inget extra värde efter höjden. Denna metod ändrar storlek på bilden proportionellt utan att förvränga den. Så du kanske inte får de dimensioner du ville ha. Vanligtvis matchar den bredddimensionen och höjderna är olika beroende på varje bilds andel. Ett exempel på displayen ser ut så här:

Soft Crop Exempel

Obegränsad höjdläge – Det finns tillfällen när du har superlånga bilder som du vill använda i din design, men du vill se till att bredden är begränsad. Den viktigaste användningen vi hittar för denna typ av bildstorlek är på infografiska inlägg. Infografik tenderar att vara väldigt lång och full av information. Det är inte bra att beskära en sådan bild på en enda inläggssida. Men av natur är infografik bredare än innehållsbredden. Så vad du kan göra är att ange en bredd som inte kommer att bryta din design medan du lämnar höjden för att vara obegränsad, så all infographic kan visas utan någon snedvridning. Ett exempel på displayen ser ut så här:

Exempel på obegränsad höjdläge

Visa ytterligare bildstorlekar i ditt WordPress-tema

Nu när du har lagt till funktionaliteten för önskade bildstorlekar kan vi titta på att visa dem i ditt WordPress-tema. Öppna temafilen där du vill visa bilden och klistra in följande kod:

<?php the_post_emonynail (‘din-specificerade bildstorlek’); ?>

Obs: Denna kodkod måste klistras in i postslingan.

Det är allt du verkligen måste göra för att visa ytterligare bildstorlekar i ditt WordPress-tema. Du borde förmodligen lindra den med den styling som passar ditt behov.

Regenerera ytterligare bildstorlekar

Om du inte gör detta på en helt ny webbplats måste du antagligen återskapa miniatyrbilder. Sättet add_image_size () -funktionen fungerar är att den bara genererar storleken från den punkt den lades till i temat. Så alla inlägg som lades till innan denna funktion inkluderades kommer inte att ha den nya storleken. Så vad vi behöver göra är att förnya den nya bildstorleken för äldre inlägg. Detta görs enkelt av plugin som heter Regenerate Thumbnails. När du installerar och aktiverar detta plugin läggs ett nytt alternativ till under menyn: Verktyg »Regen. miniatyrer

Regenerera miniatyr-plugin-skärmen

Klicka på Regenerera miniatyrikonen och låt plugin göra sitt jobb.

En annan plugin som kan göra det här jobbet är enkla bildstorlekar.

Aktivera ytterligare bildstorlekar för ditt inlägg

Även om du har aktiverat bildstorlekar i ditt tema begränsas användningen endast till ditt tema som inte är vettigt. Alla bildstorlekar genereras oavsett, så varför inte göra det tillgängligt för postförfattaren att använda det inom inläggets innehåll. Du kan göra detta genom att använda ett plugin som heter Simple Image Sizes.

När du installerar och aktiverar detta plugin kommer nya alternativ att läggas till på sidan Inställningar »Media. Du kommer att se en lista med storlekar som du definierade i ditt tema. Allt du behöver göra är att kryssa i rutan som säger “Visa i inlägget efter inlägg”.

Inlägg för ytterligare bildstorlekar

När du har markerat den här rutan kommer ytterligare storlekar att vara tillgängliga för din författare att använda i inläggets innehåll.

Ytterligare bildstorlekar för inlägg

Observera i bilden ovan, vi har alla bildstorlekar som vi definierade i vårt tema tillgängliga för våra författare att använda i inlägget om de vill.

Enkel insticksstorlek-plugin låter dig också skapa anpassade bildstorlekar direkt från WordPress-instrumentpanelen.

Vi anser att denna metod bör läggas till under bästa praxis för alla WordPress-temautvecklare. Vad är dina tankar??

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me