Link toevoegen aan uitgelichte afbeelding WordPress

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

De eerste stap is het aanmaken van een extra veld. Deze mogelijkheid vind je onderaan iedere pagina in WordPress, boven “reacties”. Als je dat veld niet ziet klik je rechtsbovenin op “scherminstellingen” en vervolgens plaats je een vinkje bij “extra velden”.

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:

<?php the_post_thumbnail(); ?>

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 esc_url( $name ); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
    <?php
} else {
    the_post_thumbnail();
}
?>

Het 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 😉