WPLounge
Home » Developers » Tip: Uitgelichte afbeelding tonen in thema

Tip: Uitgelichte afbeelding tonen in thema

Ben je een WordPress-thema aan het aanpassen of zelfs aan het ontwikkelen? Vaak is het een fijne optie om vanuit WordPress zelf de header van een bepaalde pagina te tonen. Het liefst doe je dit natuurlijk met een “featured image” (of “uitgelichte afbeelding“). Maar hoe toon je die op je WordPress-website?

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Een uitgelichte afbeelding oproepen in een paginatemplate is eigenlijk heel simpel. Er zijn twee manieren.

Optie 1

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

Met onderstaand stukje PHP-code “spuugt” WordPress de uitgelichte afbeelding uit.

Hiermee maakt WordPress zelf een image tag, het nadeel is dat WordPress dan automatisch de breedte en hoogte aan die tag mee geeft. Wil je meer eigen controle, dan is optie 2 beter.

 

Optie 2

Het volgende stukje code roept alléén de URL van de afbeelding op, je moet dus zelf een image tag in HTML schrijven.

Je kijkt hier eerst óf er een uitgelichte afbeelding is gedefinieerd. Zo niet, dan toont WordPress niets.

Heb je wél een uitgelichte afbeelding ingesteld dan krijg je het volgende stukje HTML-code:

 

Natuurlijk is het aan te raden om hier nog een bepaalde CSS-class aan mee te geven zodat je alle afbeeldingen vanuit één bestand bepaalde stijlelementen kunt meegeven.

Wouter Postma

Oprichter WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

Reageer

Advertenties

Blijf op de hoogte!

Het is Cyber Monday! Elegant Themes & Divi: nu met 25% korting op alle Divi abonnementen! Ga naar Elegant

Scroll Up
Open chat
Skip to content