De uitgelichte afbeelding is een standaard feature van WordPress. De afbeelding die je hier instelt wordt in veel thema’s gebruikt in het berichtenoverzicht, maar het is helaas niet standaard mogelijk een link toe te voegen aan deze uitgelichte afbeelding. In dit artikel leg ik je uit hoe je de uitgelichte afbeelding automatisch naar de post kunt laten linken, maar ook naar een willekeurige andere URL.
In dit artikel lees je:
- Hoe je de uitgelichte afbeelding standaard naar een bericht kunt laten linken
- Hoe je een willekeurige link aan de uitgelichte afbeelding kunt toevoegen door een extra veld aan te maken
De uitgelichte afbeelding standaard naar het bericht laten linken
Veel mensen verwachten dat een klik op de uitgelichte afbeelding in het berichtenoverzicht ze naar de betreffende post brengt. Dat werkt bij webshops immers ook zo, maar bij WordPress helaas niet. De uitgelichte afbeelding is namelijk standaard geen link.
Het is gelukkig wel relatief eenvoudig om de uitgelichte afbeelding automatisch naar de post te laten linken (dat is op deze website ook het geval). Daarvoor dien je de onderstaande code (bron: stackexchange.com) toe te voegen aan functions.php:
// Uitgelichte afbeelding linkt naar post
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
return $html;
}
Vervolgens moet je functions.php natuurlijk nog even uploaden en als het goed is linkt je uitgelichte afbeelding nu automatisch naar je post.
Een willekeurige link toevoegen aan de uitgelichte afbeelding
Het komt echter ook wel eens voor dat de uitgelichte afbeelding voor een ander doeleinde gebruikt wordt. Zo heb ik laatst een site voor een klant gebouwd die per pagina een andere afbeelding in de header wilde hebben. Ik heb de uitgelichte afbeelding gebruikt om dit te bereiken. Deze klant wilde echter ook een link aan deze afbeelding kunnen toevoegen, en dat was niet zomaar mogelijk.
Een zoektocht op internet bracht me uiteindelijk op dit topic op het WordPress forum, en dat bleek ook in mijn geval de oplossing te zijn. Ik vind dit topic echter vrij lastig te begrijpen en daarom leg ik in dit artikel in normale Nederlandse taal uit hoe je een eigen link aan de uitgelichte afbeelding kunt toevoegen.
Stap 1 : Maak een extra veld aan
Klik vervolgens op “nieuwe toevoegen” (onder het dropdown veld). Bij “naam” vul je een logische naam in, zonder spaties (koppelstreepjes mogen wel). Aangezien we dit extra veld gaan gebruiken om een link aan de uitgelichte afbeelding toe te voegen heb ik het veld “link-uitgelichte-afbeelding” genoemd.
Bij “waarde” vul je de link in waarnaar de uitgelichte afbeelding moet gaan verwijzen. Je moet de volledige link hier invoeren, dus inclusief http://www…
Stap 2 : Vervang de php code
Als het goed is heb je in één of meerdere templates (page.php, index.php, single.php) ergens onderstaande code staan om de uitgelichte afbeelding weer te geven:
Deze code dien je te vervangen door onderstaande code:
<?php $name = get_post_meta($post->ID, 'link-uitgelichte-afbeelding', true);
if( $name ) { ?>
<a href="<?php echo $name; ?>"><?php the_post_thumbnail(); ?></a>
<?php } else {
the_post_thumbnail();
} ?>
Het dikgedrukte gedeelte (‘link-uitgelichte-afbeelding’) dien je te vervangen door de naam die je bij stap 1 bij “naam” hebt ingevoerd.
Nu moet je de gewijzigde template nog even uploaden en klaar is Bo.. uh Kees!
Extra veld selecteren bij andere pagina’s
Het extra veld dat je bij stap 1 hebt aangemaakt verschijnt helaas niet automatisch op iedere pagina. Het wordt echter wel toegevoegd aan het dropdown menu bij “extra velden” dus je hoeft het daar alleen even te selecteren om het te kunnen gebruiken. Niet vergeten de link in te vullen bij “waarde” he 😉
Hoi,
Dankje voor de goede uitleg. Hiermee kwam ik er een stuk sneller uit dan met de uitleg op het WordPress forum.
Ik heb de code geplaatst en er zit nu inderdaad een link achter mijn uitgelichte afbeelding. Alleen mijn template lijkt het niet helemaal te pikken.. Ik krijg een 404 foutmelding in plaats van de link te openen. In de url van de fourmeldingpagina staat nu huidigewebsite.com/link.com/”Array”
Kun je me hier nog misschien mee helpen?
Alvast bedankt!
Angela
Oh nog even een aanvulling op mijn vraag, de link wordt niet zo weergegeven namelijk maar als volgt:
eigenwebsite.com/artikel/”array”
Artikel is dus het artikel waarvan de foto de uitgelichte afbeelding is.
Hoi Angela,
Bedankt voor je berichtje. Die fout komt mij helaas niet bekend voor, maar ik zal je vraag voorleggen aan wat mensen die wat meer thuis zijn in PHP dan ik.
Groeten van Bob
Hoi Bob,
Ok, dankje! Ben benieuwd 🙂
Groetjes,
Angela
Hoi Bob,
Had je nog reactie hierop? Ben benieuwd of het mogelijk is.
Groetjes Angela
Helaas niet Angela, sorry…
Kan toch niet zo heel moeilijk zijn.. ik wil er best even naar kijken, mail me dan even de URL en een admin login van je site naar bob@bobdewebbouwer.com.
Groeten van Bob
Ook ik krijg deze foutmelding. Is er al iets duidelijk hoe dit komt en hoe dit kan worden opgelost? Ik hoor het graag!
Hoi Alyssa,
Ik ben er inmiddels achter dat WordPress de aanhalingstekens in mijn code omzette waardoor de code niet meer werkte.
Als het goed is werkt de bovenstaande code nu wel correct (laat me aub even weten of dat inderdaad het geval is), anders moet je de code even kopiëren vanaf de bron op stackexchange.com.
Kun je me vertellen waar in de functions.php ik de code van het eerste voorbeeld plaats?
Wanneer ik deze onderaan binnen de php code plaats gebeurt er helemaal niets.
Hoi Peter,
Ik zou zeggen probeer ‘m eens wat hoger te plaatsen… bij mij staat hij ergens in het midden dus het zou niet zoveel uit moeten maken, maar het is natuurlijk mogelijk dat er een conflict is met een ander stuk code in het bestand.
Kopieer voor de zekerheid nog even de code vanaf stackexchange, zie ook de comments hierboven.
Succes en groeten van Bob
Super bedankt voor deze uitleg. Ik heb een tijdlang zitten zoeken op dit onderwerp en durfde het zelf ‘programmeren’ niet direct aan.
Maar door de duidelijke uitleg hier toch de gok gewaagd en het werkt. Erg blij mee!
Hoi Anita,
En dat voor een bijna 10 jaar oud artikel 😉 Tegenwoordig kan dit een stuk makkelijker m.b.v. een page builder, maar toch bedankt voor je leuke reactie hoor 🙂
Groeten van Bob