Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du till en image i WordPress Sidebar Widget

Vill du lägga till en image till en sidebar widget i WordPress?

Som standard gör WordPress det enkelt att uploada och add to images var som helst på din website. Du kan add to widgets i sidebar lika enkelt som du kan add to pages eller blogginlägg.

I den här artikeln visar vi hur du enkelt kan add to en image till din sidebar widget i WordPress.

How to add an image in WordPress sidebar widget

Vi kommer att dela med oss av flera metoder så att du kan använda den som fungerar bäst för din WordPress site.

Klicka bara på länkarna under för att hoppa vidare till din önskade section:

Lägga till en image i WordPress med hjälp av Image Widget Block

Du kan använda ett image widget block för att add images till din sites sidebar.

Widgets Block Editor introducerades i WordPress 5.8, och det replikerar upplevelsen av att använda WordPress Content Editor. Du kan använda olika block för att add to formulär, related posts, bilder och andra element till widgets area med hjälp av block.

För att börja måste du besöka sidan Appearance ” Widgets från din WordPress dashboard. Efter det klickar du bara på knappen ”+” och lägger till ett block med widgetar för image.

Add an image widgets block

Därefter kan du lägga till en image i widgetar blocket med 3 sätt.

You, for instance, upload an image, choose an existing image from your WordPress media library, or insert the image from a URL.

Upload image in widget block

I widget block editor får du också alternativ för att ändra stil, add to en alt-text och edit storleken på image.

Det finns inställningar för att ändra bildens kant och andra avancerade inställningar.

Edit image widget block settings

När du är klar, glöm inte att klicka på knappen ”Update”.

Därefter kan du besöka din website och se imagen i sidebaren.

View image in sidebar

Lägga till en image i WordPress Classic Widgetar Area

Om du använder en äldre version av WordPress eller om du har inaktiverat blocken för widgetar kan du också enkelt lägga till en image i sidebaren.

Gå bara till sidan Appearance ” Widgets från din adminpanel i WordPress och add ’Image’-widgeten till din sidebar. Om du inte har använt widgetar tidigare kan du läsa vår guide om hur du lägger till och använder widgetar i WordPress.

Add image widget

Widgeten kommer att förstoras och du kommer att kunna se dess inställningar.

Det första alternativet är att add to en rubrik till widgeten image. Därefter klickar du på knappen ”Add Image” för att fortsätta.

Då visas mediauppladdaren i WordPress, där du kan klicka på knappen Upload Files för att ladda upp din image eller välja en image som du tidigare har laddat upp.

Image settings

När du har uppladdat bilden kommer du att se image settings i den högra columnen. Härifrån kan du ange en rubrik eller alt-text för bilden, add to en description, välja storlek eller till och med lägga till en länk.

När du är klar kan du klicka på knappen ”Add to Widget” för att save your changes. You will now see a preview of the image inside the widget settings area.

Widget preview

Glöm inte att clicka på knappen ”Save” för att spara din image widget.

Nu kan du besöka din website och se den image som visas i sidebaren på din WordPress blogg.

Sidebar image preview

Lägga till en image manuellt i WordPress Sidebar Widget

I vissa fall kan du behöva add to ytterligare HTML-kod till din image. Standard text widget tillåter en del mycket grundläggande HTML, men det kanske inte fungerar med avancerad HTML eller format. I så fall måste you manuellt add to en image till din bloggs sidebar.

Först måste du uploada imagen till din WordPress site. Gå helt enkelt till Media ” Add New och upload your image file.

När du har uploadat bilden måste du clicka på Edit-länken bredvid bilden.

Edit uploaded image

WordPress tar dig nu till sidan ”Edit Media”, där du ser URL:en till image-filen på höger sida av vyn.

Du måste kopiera denna URL och klistra in den i en textredigerare som Notepad.

Copy image file URL

Därefter måste du gå till vyn Appearance ” Widgets från din WordPress dashboard.

Efter det kan du add to ’Custom HTML’ widget block till din sidebar där du vill visa bilden.

Add custom html widget block

I widgetens area för textboxen måste du add to din image med hjälp av denna kod:

<img src="Paste The File URL Here" alt="Strawberries" />

Taggen img används i HTML för att displaya images. Den behöver två attribut. Det första är src, som definierar image-filens location. Det är här du ska klistra in URL:en som du kopierade tidigare.

Den andra är alt som används för att ge en alternativ text för imagen. Din slutliga image tagged kommer att se ut ungefär så här:

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

You need to click on the ”Update” button to store your widgetar settings and then preview your website.

Lägga till en image i sidebar i WordPress med hjälp av ett plugin

Undrar du hur du kan add to en foto widget med hjälp av ett WordPress plugin?

Ett annat sätt att add to images till din sidebar i WordPress är att använda ett plugin. Detta ger dig några fler alternativ och ett enkelt gränssnitt, som vissa Beginnare kan tycka är enklare än standard ”Image”-widgeten.

Först måste du installera och aktivera pluginet Image Widget. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, gå bara till sidan Appearance ” Widgets och add to blocket ’Image Widget’.

Add image widget block

Klicka sedan på knappen ”Select Image” för att uploada en image eller selecta en från mediabiblioteket.

Efter det måste du klicka på knappen ”Infoga i widget”, så ser du preview av image under widgetinställningarna.

Select an image from library

You can add to a title or alt text, as well as a link and caption for the image.

You can also choose an image size from the list of available options, edit the alignment, and more.

Add title and alt text

När du är nöjd klickar du bara på knappen Update för att save image widgeten. Det var allt. You can now go to your website and see the image displayed in your sidebar.

Vi hoppas att den här artikeln hjälpte dig att add to en image till sidebar widget i WordPress. Om du stöter på problem, glöm inte att titta på vår guide om hur man fixar vanliga image issues i WordPress och hur man ändrar sidebar-sidan i WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

50 kommentarerLämna ett svar

  1. Holly

    Hi,

    I just submitted a question about my image only showing up on the home page and not other pages on the site. I resolved my issue and wanted to share the solution in case it helps someone else. I was trying to use the Custom HTML widget to SHOW a couple of images to my Content Sidebar and when I specifically configured the addition of the pages I wanted to show, (leaving ”Match all” UNchecked), the images only showed up on the Home page.

    The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages. :-)

    Thank you,
    Holly

    • WPBeginner Support

      Thanks for sharing your resolution :)

      Administratör

  2. Holly

    Hi,

    I got the custom HTML widget working on the home page but the images are not showing up on the other static pages. I configured the settings to ”Show if” my desired pages are selected but the image only shows up on the home page. I’ve tried deleting and re-adding the widget and removing and re-adding pages. Any ideas?

    Thank you!
    Holly

    • WPBeginner Support

      Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show :)

      Administratör

  3. Alice

    Hi, I am trying to add the picture and have it show up in the upper left corner of the post. When I add it and preview everything is there but when I publish it is not there. Any ideas?

  4. Kathy Turner

    I have added an image to my footer and in Chrome on a desktop it appears and then immediately disappears. I have reduced the size, I have tried adding it as an image in html but nothing solves the problem. On chrome on my mobile it is fine. I don’t have adblock on my desktop. The problem also occurs with Firefox but Microsoft Edge all works fine. Any ideas?

  5. harika

    hi i have created blog in wordpress but posting content language is telugu.i want to change the font style of telugu post how?

  6. Micky

    Hi there,

    I’ve tried both mehods listed in this video, and still the sidebar image is not showing up at all.

    Any ideas on how I could trouble shoot this?

    Thanks!

  7. Doma

    Thanks it was quick n to the point….v helpful.

  8. MS Rahman

    I want show a default image while nothing on the widget. How to do this?

    Thanks

  9. Krishna

    Is there any way I can set the image so that the image is displayed only on the start / home page?

  10. Sara william

    Thanks. I am trying hard for uploading my profile pic on and now it can be done easily.

  11. Anette

    Thanks for the explaining it in easy steps!

  12. Rebecca Claxton

    Thanks for always being top of random searches I do for Wordpress stuff – and thanks for the useful info suitable for everyday folk using WP!

    • WPBeginner Support

      Hi Rebecca,

      We are glad you find WPBeginner helpful :) Don’t forget to join us on Twitter for more WordPress tips and tutorials.

      Administratör

  13. Karthik Marripoodi

    Thanks for writing about this in detail. I want to put my ads on the widget section. This method will perfectly suit my requirement. But I just have one problem. How to add different image for different blog posts. Is there a way to do that?

  14. Minhaz

    great post, love wpbeginner

  15. Mark

    I believe the video said ”Alt tag”. That wouldn’t be the correct terminology – it would be the Alt Attribute of the tag.

  16. Victoria

    Love this tutorial, however I am skeptical to download the image widget because it says that it is untested with my version of Wordpress. Will there be updates coming soon or how does it get tested with my version of Wordpress?

  17. melessa

    Hi, I hope I didn’t overlook it somewhere in the comments, but how do you put a circular or oval instead of square image for the about me in side bar? I’m using divi by elegant themes.

  18. Rod

    Hi,

    Any idea why bullet points wouldn’t show up in the sidebar widgets despite having taken off ”list-style-type: none” from the css file and replaced it with the following code and it still doesn’t work:

    .widget ul li { list-style: circle }

  19. Sam

    How can i make the image a clickable link.

    Thanks

  20. David

    wow! spot on. The visual text is too much work for just a plain image. I have been looking for a plugin that does exactly this. thanks a lot

  21. Molly

    Thanks, this is exactly what I needed, and you made it so easy!

  22. Sandra Wiese

    Thank you very much – works perfectly!

  23. Jana

    Hi,
    I have a couple of questions. First, I am having trouble installing the Widget Image plugin for some reason. I’ve installed plugins before but I can’t seem to do this one. Granted, I’m a beginner and I added them almost a year ago so maybe I’ve forgotten something. Can you give me any tips?

    Also, believe it or not, I got a picture on my widget using the html coding! (Surprised I could code, but you made it very easy and understandable) The only problem I have is that it is full size and I’m hoping to have thumbnails. Is there code for that? If so, I don’t need to install the plugin.
    Thanks!

    • WPBeginner Support

      You can create a smaller image on your computer using any image editing tool and then upload that image.

      Administratör

  24. James McAllister

    I had a read at this to try and update the image I have on a widget on my blog.

    Are you guys on the same planet as the rest of us? Have a read at what you wrote – you’d have to be a Philadelphia lawyer crossed with Steve Jobs to understand the instructions.

    Anyway – back to trying to change the image, I’m sure the trick is in there somewhere.

  25. Marvis

    Thank you so much for this info. But i really need to know how to display google ads on my posts and sidebar as well. I have an approved adsense account already and i have generated the ad code. But the next step to take is what i don’t get. I need help please.

  26. Abbie

    Either I have overlooked many things you have talked about or the site has changed. I do see an option for an image widget which you state does not exist. I do not see any media or gallery to which I can upload an image file.

    So, where do I upload the file so I can get a URL to put in the necessary place on the form to set up the image widget?

    • Paul

      Upload to your media libary

  27. Nikki

    Thank you, this was very helpful. the video could have been a little slower

  28. Luke

    Thanks for the help! Definitely easier to just get the image widget plugin.

  29. manmohan

    It Is Really Helpful For Me …thank u for this post.
    But I Have A Question

  30. Erica

    Hi there. I know how to get the images in the sidebar, but they take up too much space so I am trying to do a click-through gallery here. I get the little click-through box, but no images show. I was also able to do an auto-slideshow, but it is very distracting so I don’t want that. I just want the photo gallery that you click through to the next image, but I can’t find anything on how to fix this here.

  31. Giulia

    Hi,

    I am having an issue adding image widgets. When I try adding a new one (after having deleted one too) the changes don’t save, the page stops loading, and when I try to access the site (admin and normal) it says can’t connect to server – so basically my site is down. I restarted my computer and installed updates and this solved it the first time, but when I tried adding the widget again the same thing happened, except restarting doesn’t seem to help anymore!

    Please help! I would really appreciate it!

    Thanks in advance!

  32. Gregor Egan

    Hi, Thanks for that, it works a treat. I have a question; I don’t want the same image to appear on every page so how to I restrict it to a particular page so that I can use a different image on subsequent pages.

    Regards,

    Gregor

  33. Lee

    Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful. :-)

  34. Sheryl Anderson

    I have the image in the widget – what I want to know is how to point that widget to an opt-in form – how do you add that code

  35. Sultan Ayyaz

    The idea of image widget is really new and very helpful to add image in wordpress sight. very helpful article.

  36. Fiona

    I’ve been wanting to learn how to do this. Perfect timing. Thankyou!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.