Hoe je een afbeelding in een WordPress sidebar widget kunt plaatsen

Wil je een afbeelding in de sidebar van je WordPress website plaatsen? Dit gaat helaas niet zo eenvoudig als een afbeelding plaatsen in een bericht of pagina.

Om een afbeelding in de sidebar te plaatsen heb je wat basiskennis nodig van HTML.

Een alternatieve optie is om een plugin te installeren waarmee je een speciale afbeelding widget krijgt. WordPress heeft namelijk zelf geen standaard ingebouwde afbeelding/foto widget waar je gebruik van kunt maken.

In dit artikel kun je lezen en bekijken hoe je het voor elkaar kunt krijgen om een afbeelding of foto in een WordPress sidebar widget te plaatsen.

Video: Afbeelding in WordPress sidebar widget plaatsen

In de video hieronder kun je over mijn schouder meekijken hoe je het voor elkaar kunt krijgen om met HTML een afbeelding zichtbaar te maken in de sidebar van je website.

Wil je meer informatie, liever de tekstuitleg lezen of een afbeelding met behulp van een plugin in de sidebar krijgen? Lees hieronder verder.

Afbeelding in sidebar plaatsen met een tekst widget

Voordat we aan de slag kunnen moet de afbeelding die je wilt gebruiken op je website staan. Je kunt een afbeelding uploaden via “Media -> Nieuw bestand”. Nadat je de afbeelding hebt geüpload moet je op “Bewerken” klikken om de URL te achterhalen.

Wanneer je op bewerken hebt geklikt kom je op de bewerkpagina van mediabestanden uit. Je kunt hier in de box aan de rechterkant de “Bestand URL” achterhalen van de afbeelding. Selecteer en kopieer deze URL.

Nu je dit gedaan hebt kun je naar “Weergave -> Widgets” gaan en een tekst widget toevoegen aan de sidebar van je WordPress website. In de tekst widget kun je de URL van de afbeelding plakken en zal je vervolgens nog wat HTML code eromheen moeten plaatsen.

De code die je nodig hebt om een afbeelding te laten weergeven is:

<img src="je-bestand-url" alt="bestandsnaam" />

De img tag geeft aan dat er een afbeelding moet worden weergegeven, src geeft de bestandslocatie aan (de URL die je gekopieerd hebt) en de alt attribuut is een alternatieve tekst dat wordt weergegeven als de afbeelding om een bepaalde reden niet kan worden weergegeven.

Wil je de HTML code echt helemaal netjes doen, dan kun je ook nog de hoogte en breedte van de afbeelding toevoegen. De hoogte en breedte kun je bij de “afmetingen” vinden op de bewerkpagina waar je de bestand URL hebt gekopieerd.

Hieronder staat een voorbeeld van de totale code die je kunt gebruiken om een afbeelding op je website te plaatsen. Uiteraard moet je de gegevens nog wel wijzigen naar de gegevens van je eigen afbeelding.

<img src="http://www.voorbeeld.nl/wp-content/uploads/2015/03/02/bestand-url" alt="bestandsnaam" height="250" width="250" />

De code die je moet plaatsen in de tekst widget zal dus lijken op de code die je in de afbeelding hieronder kunt zien.

Het enige wat je verder nog hoeft te doen is op “Opslaan” klikken. Nadat je dit gedaan hebt zal de afbeelding zichtbaar zijn op de website.

De slimme methode: code uit bericht kopiëren

Hoe handig het ook is om de basis van HTML te leren, het kan heel goed zijn dat je niet de behoefte hebt om je hier in te verdiepen.

Je hebt daarom ook de mogelijkheid om slim te werken en WordPress het werk voor je te laten doen. Wat je kunt doen is de afbeelding in een bericht of pagina plaatsen, naar de tekst editor gaan en de HTML code die hier staat kopiëren.

Je hebt op deze manier direct de code waar je de afbeelding mee kunt laten weergeven en hoeft het alleen nog in de tekst widget te plaatsen.

Plugin om een afbeelding widget te krijgen

Wil je niets met vreemde HTML codes te maken hebben, dan is dit natuurlijk geen probleem en heb ook nog de optie om een plugin als “Image Widget” te installeren. Met Image Widget krijg je, zoals de naam al zegt, een extra widget waarmee je een afbeelding in de sidebar kunt plaatsen.

Nadat je de plugin geïnstalleerd en geactiveerd hebt zal je op de pagina “Weergave -> Widgets” de widget “Afbeelding Widget” zien staan.  Je kunt deze widget slepen naar de sidebar en vervolgens een afbeelding uit de mediabibliotheek selecteren.

Zodra je een afbeelding hebt geselecteerd zal je de afbeelding direct zien en krijg je ook nog een aantal extra opties. Met de extra opties kun je een titel, alt tekst en onderschrift toevoegen, de afbeelding koppelen aan een link en de grootte en uitlijning bepalen.

Indien je alles hebt ingesteld moet je tot slot natuurlijk nog even op “Opslaan” klikken en de afbeelding zal getoond worden op je website.

Zijn er nog meer plugins die dit kunnen?

Jazeker, er zijn vele wegen die naar Rome leiden en dit geldt ook voor het krijgen van een afbeelding in de sidebar op een WordPress website. Enkele plugins waarmee je hetzelfde kunt bereiken zijn:

Black Studio TinyMCE Widget
Met Black Studio TinyMCE Widget krijg je een extra widget genaamd “Visuele Bewerker”. Wanneer je deze widget gebruikt krijg je net als in normale berichten en pagina’s een visuele editor te zien.

Het opmaken en het toevoegen van een afbeelding gaat met de “Visuele Bewerker” widget dus precies hetzelfde als bij normale berichten en pagina’s.

Jetpack
Indien je Jetpack hebt geïnstalleerd op je WordPress website heb je ook een extra widget waarmee je afbeeldingen kunt toevoegen aan de sidebar. Je hebt in dit geval geen andere plugin.

Jetpack kun je het best gebruiken wanneer je ook andere functies van deze plugin wilt gebruiken. De plugin is namelijk erg groot en voordat je er gebruik van kunt maken moet je het koppelen aan een WordPress.com account (je hebt geen WordPress.com blog nodig). Dit is een extra stap die je bij de andere plugins niet hebt.

Conclusie

Er zijn verschillende methodes om een afbeelding in de sidebar van je WordPress website te krijgen. Helaas is er nog geen methode standaard ingebouwd in WordPress, maar wellicht dat dit ooit gaat gebeuren in een toekomstige WordPress versie.

Voor nu kun je in ieder geval de methodes gebruiken die in dit artikel beschreven staan. Er staat voor iedereen wel een methode tussen waarmee goed omgegaan kan worden.

Indien je nog vragen hebt kun je deze gerust hieronder stellen in de reacties.