Hur man skapar ytterligare bildstorlekar i WordPress

Hur man skapar ytterligare bildstorlekar i WordPress

Förra mÄnaden upptÀcktes en enorm sÄrbarhet i ett berömt bildstorleksskript som kallas TimThumb. Sedan dess har samhÀllet samarbetat och ÄtgÀrdat problemen. Medan TimThumb Àr ett lönsamt alternativ, tror vi att WordPress-temautvecklare bör fokusera pÄ att anvÀnda kÀrnfunktionerna snarare Àn att förlita sig pÄ tredjepartsskript. I den hÀr artikeln visar vi dig hur du lÀgger till ytterligare bildstorlekar i WordPress.

WordPress har en inbyggd funktion Post Thumbnails aka Featured Images. 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 inlÀggsminiatyrer genom att placera följande kod i ditt temas funktioner.php-fil:

add_theme_support( 'post-thumbnails' );

NĂ€r du vĂ€l har aktiverat stödet för inlĂ€ggsminiatyrer kan du nu anvĂ€nda funktionen för att registrera ytterligare bildstorlekar med funktionen add_image_size (). AnvĂ€ndningen av funktionen add_image_size Ă€r sĂ„ hĂ€r: add_image_size (‘name-of-size’, bredd, höjd, beskĂ€rningslĂ€ge);

Exempelkod kan se ut:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Nu om du mÀrker har vi angett tre olika typer av bildstorlekar. Var och en har olika lÀgen som hÄrd beskÀrning, mjuk beskÀrning och obegrÀnsad höjd. SÄ kan vi tÀcka varje exempel och hur du kan anvÀnda dem för dina fördelar.

LĂ€ge för hĂ„rd beskĂ€rning – Som du mĂ€rker finns det ett vĂ€rde ”sant” tillagt efter höjden. Det verkliga vĂ€rdet ber WordPress att beskĂ€ra bilden till den storlek som vi har definierat (i detta fall 120 x 120 pixlar). Det hĂ€r Ă€r metoden vi anvĂ€nder mycket i vĂ„ra temadesigner för att se till att allt Ă€r proportionellt och att vĂ„r design inte gĂ„r sönder. Den hĂ€r funktionen beskĂ€r bilden automatiskt antingen frĂ„n sidorna eller frĂ„n toppen och botten beroende pĂ„ storlek. Nackdelen med hĂ„rd beskĂ€rning Ă€r att du inte kan kontrollera vilken del av bilden som visas.

Korrigering av Mike Little – NĂ€r du har laddat upp en bild och innan du sĂ€tter in den i inlĂ€gget kan du klicka pĂ„ “redigera bild” och dĂ€rifrĂ„n Ă€ndra miniatyrbilden eller hela bilden, skala, rotera eller vĂ€nda bilden och för miniatyrbilden vĂ€lj den exakta delen av bilden du vill ha.

Mjukt beskĂ€rningslĂ€ge – Som standard Ă€r mjukt beskĂ€rningslĂ€ge aktiverat. Det Ă€r dĂ€rför du inte ser nĂ„got tillĂ€ggsvĂ€rde efter höjden. Denna metod Ă€ndrar storlek pĂ„ bilden proportionellt utan att den snedvrids. SĂ„ du kanske inte fĂ„r de dimensioner du ville ha. Vanligtvis matchar den breddimensionen och höjderna Ă€r olika beroende pĂ„ varje bilds andel. Ett exempel pĂ„ en skĂ€rm skulle se ut sĂ„ hĂ€r:

ObegrĂ€nsat 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 huvudsakliga anvĂ€ndningen vi hittar för den hĂ€r typen av bildstorlek Ă€r pĂ„ infografiska inlĂ€gg. Infografik tenderar att vara vĂ€ldigt lĂ„ng och full av information. Att skĂ€ra en sĂ„dan bild hĂ„rt pĂ„ en enda inlĂ€ggssida Ă€r ingen bra idĂ©. Men av naturen Ă€r infografik bredare Ă€n innehĂ„llsbredden. SĂ„ vad du kan göra Ă€r att ange en bredd som inte kommer att bryta din design samtidigt som höjden Ă€r obegrĂ€nsad, sĂ„ all infografik kan visas utan förvrĂ€ngning. Ett exempel pĂ„ en skĂ€rm skulle se ut sĂ„ hĂ€r:

Exempel pÄ obegrÀnsat höjdlÀge

Visar ytterligare bildstorlekar i ditt WordPress-tema

Nu nĂ€r du har lagt till funktionaliteten för önskade bildstorlekar kan du ta en titt 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_thumbnail( 'your-specified-image-size' ); ?>

Obs! Den hÀr biten av kod mÄste klistras in i postslingan.

Det Àr allt du verkligen behöver göra för att visa ytterligare bildstorlekar i ditt WordPress-tema. Du borde nog sÀtta in den med den styling som passar ditt behov.

Regenererar ytterligare bildstorlekar

Om du inte gör detta pÄ en helt ny webbplats mÄste du antagligen Äterskapa miniatyrer. Funktionen add_image_size () fungerar Àr att den bara genererar storlekarna frÄn den punkt den lades till i temat. SÄ alla inlÀggsbilder som har lagts till innan den hÀr funktionen inkluderats har inte den nya storleken. SÄ vad vi behöver göra Àr att Äterskapa den nya bildstorleken för Àldre inlÀggsbilder. Detta görs enkelt med plugin som heter Regenerate Thumbnails. NÀr du har installerat och aktiverat detta tillÀgg lÀggs ett nytt alternativ till under menyn: Verktyg »Regen. Miniatyrer

Återskapa insticksskĂ€rmen för miniatyrbild

Klicka pÄ Regenerera miniatyrikonen och lÄt plugin-programmet göra sitt jobb.

Ett annat plugin som kan göra det hÀr jobbet Àr Simple Image Sizes.

Aktivera ytterligare bildstorlekar för ditt inlÀggsinnehÄll

Även om du har aktiverat bildstorlekar i ditt tema Ă€r anvĂ€ndningen endast begrĂ€nsad till ditt tema vilket inte ger nĂ„gon mening. Alla bildstorlekar genereras oavsett, sĂ„ varför inte göra det tillgĂ€ngligt för författarens författare att anvĂ€nda det i inlĂ€ggets innehĂ„ll. Du kan göra detta genom att anvĂ€nda ett plugin som heter Simple Image Sizes.

NĂ€r du har installerat och aktiverat detta plugin kommer nya alternativ att lĂ€ggas till pĂ„ sidan InstĂ€llningar »Media. Du kommer att se en lista över storlekar som du definierade i ditt tema. Allt du behöver göra Ă€r att markera rutan som sĂ€ger “Visa i inlĂ€gg efter inlĂ€gg”.

InlÀggsinlÀgg för ytterligare bildstorlekar

NÀr du har markerat den hÀr rutan kommer ytterligare storlekar att finnas 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Àggets innehÄll om de önskar.

Med plugin för enkla bildstorlekar kan du ocksÄ skapa anpassade bildstorlekar direkt frÄn WordPress-instrumentpanelen.

Vi anser att den hÀr metoden bör lÀggas till under bÀsta praxis för alla WordPress-temainvecklare. Vad Àr dina tankar?