Letar du efter ett sätt att add featured images till dina blogginlägg i WordPress?
Featured images, även kända som inläggsminiatyrer, är en välkänd WordPress-funktion som stöds för de flesta teman. De är den primära image för dina blogginlägg, och de visas ofta bredvid headingen på din home page och sociala media.
I den här artikeln visar vi dig hur du enkelt kan lägga till featured images eller inläggsminiatyrer i WordPress.
En Beginner’s Guide till Featured Images i WordPress
Featured images är en utvald funktion i WordPress teman. Nästan all WordPress teman kommer med built-in support för featured images och visar dem vackert över olika area på din WordPress website.
Som människor tycker vi att visuella element är mer engagerande än plain text. Featured images hjälper you att få dina pages på bloggen att se mer tilltalande ut.
De hjälper dig också att skapa engagemang hos användarna och öka antalet pages view. Search engines och social media websites kan också använda dessa images och displayed them in search results and social media news feeds.
För det mesta används featured images för blogginlägg, men du kan också ställa in featured images för pages och custom post types.
Note: Featured images är inte samma sak som cover images. Se skillnaden mellan cover image och featured image i WordPress.
Med detta sagt, låt oss ta en titt på hur du enkelt kan add to featured images i WordPress.
Video Tutorial
Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.
Lägga till inläggsminiatyr eller featured image i WordPress
För att add a featured image to a WordPress post, edit or create a new blog post.
I content editor hittar du tabben featured image i den högra columnen.
Du måste klicka på ”Set Featured Image” area, och detta kommer att ta upp WordPress media uppladdare popup.
Härifrån kan du uploada en image från din dator eller använda en befintlig image från ditt mediabibliotek. När du har valt bilden klickar du bara på knappen ”Set Featured Image”.
WordPress kommer nu att visa en preview av den featured image i den högra colonnen.
Den faktiska featured image kommer dock att se annorlunda ut beroende på ditt WordPress theme.
Du kan nu save eller publicera ditt inlägg eller previewa det för att se hur den featured image kommer att visas på din live website.
Beroende på de settings som definierats av din theme utvecklare, kommer din featured image automatiskt att visas med dina inlägg.
Hur man hittar och använder Featured Images på ett effektivt sätt
Nästa stora fråga som de flesta Beginnare stöter på är var man hittar bilder att använda som featured images.
Du kan inte bara använda Googles bildsök och använda vilken image som helst från internet. Dessa images skyddas av upphovsrättslagar och om du använder dem utan behörighet kan det leda till juridiska problem.
Lyckligtvis finns det flera resurser tillgängliga som du kan använda för att hitta gratis images för dina blogginlägg.
Våra toppfavoriter är:
- Shutterstock – De har några gratis images, men det verkliga värdet kommer från deras betalda planer, som ger dig tillgång till massor av högkvalitativa foton, illustrationer, teckningar, videoklipp och mer.
- Unsplash – En populär online resource som publicerar högupplösta images som du kan använda på din website och i andra projekt.
- Negative Space – En välorganiserad samling av copyright gratis images.
- New Old Stock – En samling vintagefotografier från offentliga archives.
Note: Alla dessa källor tillhandahåller högupplösta images, vilket innebär att de är stora i filstorlek och dimensioner. You will need to optimize images for the web before using them as featured images.
Featured images hanteras av ditt WordPress-tema. För att ändra hur ditt theme visar featured images behöver du några grundläggande CSS- eller WordPress-kodningskunskaper.
Om du känner dig bekväm med kodning kan du fortsätta läsa för fler tips.
Guide för temautvecklare till featured images och inläggsminiatyrer i WordPress
Den featured image är en populär funktion som stöds av nästan alla WordPress themes. I sällsynta fall kan du stöta på ett theme som inte stöder featured images, eller ej gillar hur de hanterar featured images.
I så fall kan du add to featured image support till your theme eller ändra hur den visas.
Om du är bekväm med att editera WordPress theme-filer och känner dig hemma med lite customize CSS, då kan du göra det själv.
Om your theme inte har stöd för featured images kommer du ej att se alternativet att add a featured image i content editor.
För att lägga till stöd för featured image i ett WordPress-tema måste du lägga till den här kodraden i ditt temas functions.php-fil:
add_theme_support( 'post-thumbnails' );
Vi rekommenderar inte att du direkt editerar filen functions.php på din site om du eller ej är en utvecklare. Minsta lilla misstag kan förstöra din website och orsaka många error.
Ett enklare sätt att lägga till custom code är att använda WPCode. Det är det bästa code snippet plugin för WordPress. Du kan enkelt hantera alla anpassade code snippets med hjälp av pluginet och behöver inte oroa dig för att förstöra din webbplats.
Först måste du installera och aktivera pluginet WPCode. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Efter aktivering kan du gå till Code Snippets ” + Add Snippet från din WordPress dashboard. Härifrån väljer du helt enkelt alternativet ”Add Your Custom Code (New Snippet)”.
Därefter kan du enter your custom code i ”Code Preview” area.
Glöm inte att clicka på dropdown-menyn ”Code Type” och select ”PHP Snippet” som typ.
När du är klar kan du rulla ner och välja metod för insert för din kod.
WPCode kommer att använda alternativet ”Auto Insert” som standard och köra koden överallt. Du kan dock ändra platsen och välja att köra koden på en viss plats, gillar header, footer, före ett stycke, och mer.
Det finns också en Shortcode-metod, där du manuellt kan enter en shortcode för att köra koden.
För den här tutorialen kan du använda standardmetoden och automatiskt infoga koden överallt.
När du är klar klickar du bara på toggeln högst upp för att aktivera snippet och klickar sedan på knappen ”Save Snippet”.
Den här koden aktiverar support för featured image för inlägg och pages. Du kan nu gå till inlägget eller sidans block editor, och du kommer att se alternativet featured image aktiverat.
Men när du ställer in en featured image kommer den inte automatiskt att visas i ditt WordPress-tema. För att visa featured images i ditt theme måste du edit dina templates och add to denna rad med kod där du vill visa featured image:
<?php the_post_thumbnail(); ?>
Filerna du lägger till koden ovan i varierar beroende på ditt theme. Du kommer att vilja add to koden inuti din post loop.
Related to: Se fuskbladet om temahierarkin i WordPress för att bättre förstå hur themes fungerar.
Konfigurera storleken på dina Featured Images
Koden ovan är den grundläggande funktionen som du behöver för att add to featured image support och display featured images i your theme. För att ställa in bildstorleken för featured images som du uploadar, måste du add to denna kodrad till din functions.php-fil eller WPCode snippet.
set_post_thumbnail_size( 50, 50);
Parametrarna för set_post_thumbnail_size är i denna order: width, height.
You kan också ställa in ytterligare storlekar på images som ska användas med funktionen_post_thumbnail(). Till exempel
// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );
I det här exemplet har vi lagt till en new image-storlek som anropas single-post-thumbnail med 590px bredd och 180px höjd.
För att använda denna image-storlek i vårt theme måste vi fortfarande add to den till lämplig theme-fil.
För mer information, vänligen se vår guide om att lägga till ytterligare image-storlekar i WordPress för mer detaljer.
Om du tidigare har uploadat featured images, men de fortfarande visas i någon annan storlek, måste du återskapa thumbnails och bildstorlekar för äldre inlägg.
Under visas ett exempel på funktionen featured image med en specifik storlek på bilden.
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
Detta är den nedbrutna versionen av den fullständiga funktionaliteten. Det finns många andra saker du kan göra med featured images.
Vanliga frågor om featured images i WordPress
Som Beginner kan du stöta på frågor eller issues när du använder featured images på din blogg. Här är bara några av de vanligaste frågorna om featured images.
1. Varför visas den featured image två gånger i mina inlägg?
Ibland lägger Beginnare till en featured image och lägger sedan till samma image i content-delen av post editor.
Allt du behöver göra är att ta bort bilden från innehållsområdet och bara använda featured image meta box för att add to den featured image. För mer information om detta ämne, se vår artikel om hur du fixar featured image som visas två gånger i WordPress.
2. Vad är skillnaden mellan cover image och featured image?
Cover images används i content area på dina posts eller pages. De används normalt för att separera olika sektioner på en lång page eller post.
Den featured image är den representativa bilden av en artikel. Den visas före eller bredvid innehållet, men ej i själva artikeln.
Mer om detta ämne finns i vår guide om skillnaden mellan cover image och featured image i WordPress.
3. Hur visar jag featured images bredvid senaste inlägg på bloggen?
WordPress block editor levereras med ett ”Senaste inlägg”-block som allow you att visa senaste inlägg med inläggsminiatyrer.
Du kan också visa de senaste inläggen med inläggsminiatyrer i sidebar-widgets med hjälp av pluginet Recent Posts Widget Extended. För mer detaljer, se vår artikel om hur du visar senaste inlägg i WordPress.
4. Hur påminner jag auktoriseringar om att lägga till featured images i WordPress?
Featured images visas på ett framträdande sätt på din homepage, blogg page och andra archive pages.
Om du eller en annan författare på din blogg glömde att ställa in en och publicerade inlägget, kommer det att visas utan en featured image. Detta kommer att se dåligt och inkonsekvent ut, vilket inte är bra för användarnas upplevelse.
Du kan installera och aktivera PubliceraPress Checklist plugin, som kommer att visa en notification när någon försöker att publicera ett inlägg utan en featured image.
För mer detaljer, se vår artikel om hur du kräver featured images i WordPress.
5. Varför visas inte min featured image i WordPress?
Det finns ett antal anledningar till att din featured image inte visas på din WordPress site. Till exempel kan du försöka uploada en image-fil som är för stor. Eller så kan ett plugin eller tema begränsa bilden från att visas.
För att lösa detta problem, kontrollera vår guide om hur man fixar featured image som inte visas i WordPress.
Ytterligare resurser för optimering av Featured Images
Du kan också läsa igenom våra andra guider och tutorials om hur du får ut mesta möjliga av featured images på din site:
- Hur man massredigerar featured images i WordPress
- Hur man lägger till flera inläggsminiatyrer / Featured Images i WordPress
- Hur man ställer in en standard featured image i WordPress (enkelt sätt)
- Cover Image vs. Featured Image i WordPress Block Editor (Guide för nybörjare)
- Hur man döljer Featured Images på enskilda inlägg i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till featured images eller inläggsminiatyrer i WordPress. Du kanske också vill kontrollera vår Beginnarens guide till Image SEO och våra expertval för de bästa tilläggen för sociala medier för WordPress-webbplatser.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Freddy says
Hi, I had some problems with the picture once the post has been published.
The photo looks normal on the page but when I click it to have a better view, the photo got ”squeezed” and the dimension just got complicated. Any suggestion to fix this issue? I tried resizing the photo from landscape to square but the same issue still occurred.
Thank you!
WPBeginner Support says
It sounds like your specific theme has a preferred set image size. If you reach out to your theme’s support they can let you know the dimensions that they use for your images to prevent any resizing issues in the future!
Administratör
Moinuddin Waheed says
Whenever I use a featured image and one more image at the top of the post, it becomes not so good looking at the front end of the website. the two images looks unnecessary.
And when we don’t use featured image and use only image for the post on top, it doesn’t look good on blog posts layout.
Is it possible to make sure that whenever we have such scenario, only the posts image is visible at the blog posts page and featured image appear on blog posts layout?
Moreover, how can we avoid duplication of images that is built with every image we insert inside the media ,taking unnecessary space?
WPBeginner Comments says
This sounds like the featured image may be appearing twice. To fix this, check out: https://www.wpbeginner.com/beginners-guide/how-to-fix-featured-images-appearing-twice-in-wordpress-posts/
Also, to answer your second question and control the types of thumbnails generated, check out: https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/
Mrteesurez says
For if anyone want to add default featured image to blog post so that newly posted posts will be assigned that default images as thumbnail pending the time to use the actual image intending for the post.
Hope you have a post on this ??
WPBeginner Support says
For setting a default featured image, we would recommend taking a look at our guide below:
https://www.wpbeginner.com/plugins/how-to-set-a-default-featured-image-in-wordpress-using-a-plugin/
Administratör
Mrteesurez says
Featured images are very important for blog posts, it bring a sense of visual appealing to the site.
If one set WPcode to add featured image support but not specifying either footer or header and set to run through out entire site, will it not slowing or have any speed effect to the site.
WPBeginner Support says
It should not affect your site’s speed you would need to edit your templates for the featured image to display as well.
Administratör
Patricia says
The thumbnail pictures are turning up bottom of the page with ’Related Articles’ — just black boxes. What am i doing wrong or missing? We had them at one point but after the last WordPress upgrade, the pictures turned into black boxes.
WPBeginner Support says
You would want to check with the support for the tool that you are using for your related posts, either your theme or a plugin as it sounds like it is not grabbing your featured images correctly.
Administratör
E says
How can I change the size of my featured image? It always so large on my blog post. I’ve looked to see in Settings>Media to change it as suggested but that does not show up.
WPBeginner Support says
For changing the size of your featured image, you would want to reach out to the support for your specific theme and they should be able to assist.
Administratör
Josh says
Quick question, is it possible to add featured image support to a theme without WordPress generating extra thumbnail sizes?
WPBeginner Support says
Yes, you would use the add_theme_support and the_post_thumbnail only from this article to do that. You may want to set a size for the featured images so they are all the same size.
Administratör
Josh says
Would that look something like
or does it need to be a numerical value or something else?
WPBeginner Support says
It would be the same code as in our article above
Nwankwo ekene says
My site is not showing featured image on Google search and when shared to WhatsApp
What should I do to fix this
WPBeginner Support says
You would want to ensure you have the correct markup similar to our guide below for Facebook:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Administratör
R Taylor says
How can I set the ”recent blogs” on the right of screen so they stay in order by date? They keep moving around everytime I open blog. Thanks
WPBeginner Support says
You would want to ensure your theme or a plugin isn’t modifying the order. By default, the recent posts widget would display by date
Administratör
Neshadkhan says
Hi wpbegginers i am following you from last 2 year please tell me how to add our post title on thumbnail image like a lot of blogs are doing that
WPBeginner Support says
Depending on what you’re looking at, some of those are added using image editors such as GIMP or Photoshop
Administratör
Rizard says
Thank you.. this works for me..
WPBeginner Support says
Glad our guide was helpful
Administratör
Sunil says
I use supermag theme and my one post feture image is showing to other post ….how to solve it
WPBeginner Support says
You would want to reach out to your theme’s support for how to fix display errors.
Administratör
Nate says
how can I make the the featured image disappear when they click the post? I just want the picture to be featured.
WPBeginner Support says
That would be determined by your theme, if you reach out to your theme’s support they may have a recommended method to remove the featured image in the post itself.
Administratör
Nick Sim says
great explanation! But I’m having issues adding the mutliple post thumbnails into a custom post type. How do you solve this?
kar says
Hi, my featured image overrides my main banner image. Everytime I set a featured image for a post, it overrides the main site’s banner image. How do I stop it from happening?
Maj says
Hi all, actually am using WordPress 4.9.1 to upload home page video from YouTube for our website, but after I uploaded the video and access the website from the laptop I noticed that the poster image that it supposed to be displayed only when access via Phone it’s appearing in the home page for 3 seconds and this causes the first 3 seconds of the uploaded video not to be seen then can watch the video.
Please I need your help and suggestion to solve this issue. Thank you so much
carlos ballin says
i need 2 or 3 feature image, i install DFI plugin but does not work. Exist other proccess for todo that ?
Joao Cerca says
Hi,
I have a problem with featured image. Everytime I upload a new picture for a profile, the picture does not turn into a thumbnail in the list of profiles. Is it a problem of the theme or the definition of the wordpress?
Here you can check my problem
Best Regards,
WPBeginner Support says
Hi Joao Cerca,
We really can’t say what may be causing the issue. Are you using WordPress.com? In that case you may want to reach out to WordPress.com support. If you are on a self hosted WordPress.org website, then you can try our WordPress troubleshooting tips to figure out the issue.
Administratör
Emily says
MOST of the time when I share links to my posts on Facebook, the featured image appears as the thumbnail but sometimes it just doesn’t for no reason. I’m not doing anything fancy (or even differently) from week to week. What’s up?
Saransh Sagar says
hey, it takes some times to load your post,page image or feature image and loading time may vary from different types of social media ! in linkedin it fetch very fast and it fb it takes some time !
Nsereko Eriab says
hi, i want to put 5 post excerpts on my homepage but i want the most new one (the first post) to have a bigger thumbnail image than the other 4. help, thx
Bankole Emmanuel says
pls what i need is how to insert my first post image as my featured image
Liz Johnson says
Hey Thanks for posting this! I’d just left you a question about it. My theme has a featured image option. Plus I found a setting in my general settings for the thumbnail, but it still isn’t showing up when I post on Twitter. Not sure if I need to go to the CSS coding option?!?? Thanks
Amanda says
Hello. I’ve been trying to find help with my blog, but I can’t seem to find the answers I’m looking for. I am using WordPress’ theme Hemingway, and I can’t figure out how to get the picture that is at the top of my post to show up in my home page next to the post summary. I’ve tried setting a featured image, but it still doesn’t show up on the home page, and when I do that it puts the image in the header when I go to the post. When I was looking at the Hemingway sample on the WordPress site it showed pictures next to posts in the homepage. I don’t understand why I can’t do that on my blog.
Rul says
i’m using zerif pro theme but now my portfolio featured image is not arranged correctly (2 rows x 4 columns) like how it supposed to be. any idea what causes this issue and how to fix it?
Kim says
Hi. I have the featured image turned on my blog. It was working just fine until today. With our latest blog post it isn’t displaying correctly on our homepage when viewed from a cell phone. All of the post below it on the homepage show up correctly, but I can’t figure out where I went wrong with this one. It shows with a huge gap in between some of the words. Any suggestions on how to fix this?
Dennis says
Hi,
Any suggestions for plugins to generate post-thumbnails // featured images for Facebook videos? Already tried ’Featured Video Plus’ but that one is not working for Facebook-videos
Asen says
I want my featured images to appear on my posts and for some reason they don’t appear when I click the particular category in my main menu.
Let me explain this better- if you visit my site and if you click on “Action Heroes” in the menu tab, the posts appear with the excerpt but there are no images displayed. I want the title of the post to appear with the excerpt, as well as the associated featured image before the reader clicks on “”Continue reading. The same is for the News and Facts section.
How can I change that and why the image don’t appear?
WPBeginner Support says
Hi Asen,
Most likely your WordPress theme does not display featured images correctly. Try switching to a default WordPress theme like Twenty Seventeen, if it displays your featured images then you can contact your theme developer for support.
Administratör
pawan kumar mandawariya says
Dear wpbeginner team,
can you guide me how to display post images on homepage. I am unable to to this. At while, images are showing on the post/ articles, but not showing on the homepage. You can see this problem here
WPBeginner Support says
Hi Pawan,
This could be a theme or plugin issue. This could also an issue with SSL. Please see our WordPress troubleshooting guide to figure out whats causing the issue.
Administratör
hristiqn says
Hello , I use WordPress witn Fashionistas theme intsalled, but I understand the featured image is not showing the full image uploaded. I would like to have the full image appear instead of the default theme sizing of the featured image. What settings I should do in the Admin panel ?
Thanks in advance.
And really I hope you can help me.
Tony Joy says
WordPress is automatically cropping my featured image. Can you help me out?
balaram tankala says
thank you for this article….
mahesh chapgaonkar says
thank you…
Esch says
What do I need to do to only have the featured image shown next to each post in the blog roll, but not when you are reading individual posts? Do I insert the line of code into my index.php file or is there something else? Thanks!
Jurgen says
Hi,
is it possible to embed a code as a featured image? For example: Getty images offers free pictures for bloggers. Once i copy the code its easy to embed in the post, but I need the pictures as my featured image. Is there a way I can do this? Plugin?
Thanks for your help!
lauren lynch says
I cant find the featured pictures bit on this and can you use this for hp windows laptop?????
WPBeginner Support says
Are you sure you are using self hosted WordPress.org site? Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administratör
Sumit Kumar Gogawat says
I want to remove blank space of featured image from wordpress post. Can you please help me.
carlita says
Need help with distorted pics on mobile look of site. When you click read more the photos are distorted can someone explain what i need to do. thanks
Adam says
How do I edit a post so that the picture is beside a blog post description?
Harini says
I do not know how to convert html file to wordpress. As a beginner can you help me.
Astha says
thanks
Abs says
Hi,
Thanks for the info. I’ve been following this blog and help a lot.
I have a question regarding the thumbnail.
1. It is possible the thumbnail or featured image appeared on the blog roll but when the user click and open the entire post, the feature image will be hide?
2. Or it is possible that one of the image inside the post will be use as the featured image?
The reason for this is, in my blog not all post have image on the beginning of the post. When I set featured image, it will automatically insert on the beginning of the post.
Thanks.
Isabel says
Hi, I am able to upload a feature image successfully but when I open the post, the image doesn’t show. What might be the problem? For better understanding you can check out my post below to get what I mean. I use the plugin WP Smush as well so not sure if this affects.
Gaby says
I’d been using Timthumb for a while now, and I was kinda afraid to change to WordPress’ built in featured images, but this tutorial worked perfectly – and Worpress is handling different sized images just fine! So thank you so much for it!
Cheers!
Tracy Quinn says
Thanks for the article, really helped me out today, I now have pictures on my blog roll.
Cheers Tracy
Filip says
Thanks for making it so simple! I was petrified of going into the code, but with your help I finally fixed the thing that has been bugging me for days!
Thank you!
Barry Richardson says
I have set a Featured Image for most of my blog posts. (In each case the image is already present within the post.) My Reading setting is set to show the latest post when viewing the Home page.
However, on the Home page the Featured image is repeated above the post, and I don’t want that. How can I prevent that duplication?
I’m not getting any response from the WP Support Forum.
bobbi says
I have the same issue as Barry.
So I remove the original, and try to remember to set FI first.. it’s sort of ok.
But when hover over image I don’t get the title info (Firefox) that is there.. ???
Milagros Cuevas says
Hello,
I’m not sure if this fits under the ”featured image” issue, but I am hoping to use a image link map on the featured image (my client insist on having it), but I cannot seem to find where I can edit the code easily. The theme they have selected is utilizing a left side bar as the regular ”header” so I’ve had to set a featured image to be the ”header” on each post. I don’t want to start messing around with the .php or stylesheet until I know whether or not I can actually do it, or more insight on how to do it.
Anne Seabrook says
Help!! Our website crashed and it’s been rebuilt but now there is a problem with featured image. The images are cutting off the top of the pictures, such as peoples heads. Also, when setting featured images, pictures are not uploading to featured image size and they are loading in the centre, not to the left.
Hope this makes sense. I have tried everything I can think of, unsure about changing coding in php as previous effort crashed site. Any help greatly received.
WPBeginner Support says
Please see our guide How to regenerate thumbnails and new image sizes in WordPress.
Administratör
Lionel says
Thanks for this tip, that’s exactly what I need !
Daniel Keith says
Hi there,
Great tutorial indeed. Especially, the links you provided at the end of this tutorial are awesome.
Customizing a WordPress website is always a charm.
Chao says
How to display featured image below page title?