Populaire berichten tonen op je WordPress website? Je publiceert bijvoorbeeld regelmatig blogs of je hebt een nieuwswebsite waarop je de meest populaire berichten wilt tonen in een sidebar. Jammer genoeg is hier nog geen standaard functie voor in Elementor Pro (hopelijk komt dit nog), dus je moet hiervoor een paar aanpassingen doen in de code bestanden van je website. Laat dit je niet ontmoedigen als je geen kennis hebt van code. Het is namelijk goed te doen!
In dit artikel leg ik je uit hoe je populaire berichten kunt tonen in WordPress met behulp ACF plugin (Extra velden) en de Posts widget van Elementor pro.
Stap 1: maak een child theme
Voordat je aanpassingen gaat doen in de code van je website, maak je eerst een child theme. Een child theme neemt alle functionaliteiten van het bovenliggende thema over (het thema dat je gebruikt) en biedt je de mogelijkheid om aanpassingen te doen in de codebestanden van je thema, zonder dat je hiervoor het hoofdthema (parent theme) hoeft aan te passen. Je gebruikt een child theme om te voorkomen dat de wijzigingen die je doorvoert verloren gaan bij een volgende update van je thema.
Om populaire berichten te tonen, moet je straks code toevoegen aan twee bestanden: de header.php en functions.php. Deze kopieer je dus vanuit je thema bestanden naar je child theme.
Als je niet weet hoe dit precies werkt, lees dan dit artikel eerst. Je kunt ook de plugin Child Theme Configurator installeren.
Als je het child theme hebt geïnstalleerd ga je naar Weergave –> Thema’s en activeer je het child theme dat je zojuist hebt aangemaakt. Als het goed is ziet je website er dan nog steeds hetzelfde uit.
Stap 2: Installeer de plugin ACF
Voor het tonen van de populaire berichten maak je een extra veld aan voor je blogartikelen. Dit doe je met de plugin ACF. Een veld is vak in WordPress omgeving waarin je extra informatie kwijt kunt. Zo gebruiken wij bijvoorbeeld extra velden voor het toevoegen van tutorials of contactformulieren aan onze blogartikelen. Deze laden we dan automatisch in via het single blog template.
Een extra nummer veld maken voor je blogberichten
- Maak een nieuwe groep aan in ACF en noem deze ‘Views’
- De veldnaam krijgt automatisch de naam ‘views’
- Maak een nieuw veld ‘Views’ aan en zet het soort veld op ‘Nummer’
Veld tonen bij blogartikelen
- Stel in dat het veld wordt toegepast bij je berichten in WordPress.
Hiervoor moet je even een eindje naar beneden scrollen totdat je ‘Locatie’ ziet staan.
Publiceer vervolgens de groep die je zojuist hebt aangemaakt.
Stap 3: code toevoegen aan header.php
Je hebt nu een veld aangemaakt voor je blogberichten waarin het aantal views komt te staan voor je blogartikelen. Deze begint op nul, maar je wilt natuurlijk dat iedere keer als het artikel een view krijgt, dit aantal omhoog gaat. Hiervoor moet je een stukje code toevoegen aan je header.php bestand. Dit doe je in je child theme dat je zojuist hebt geactiveerd.
- Ga naar Weergave –> Thema editor
- Open het header.php bestand en voeg de onderstaande code toe:
<?php
if(is_singular('post')){
$views = get_field('views');
$views++;
update_field('views', $views);
}
?>
Met deze code geef je de opdracht om het aantal ‘views’ met 1 te verhogen als de pagina wordt bekeken. Let op: deze variabelen en waarden dienen overeen te komen met de veld naam die je hebt ingesteld met ACF. Heb je het veld een andere naam gegeven? Dan moet de code hier ook op worden aangepast.
Stap 4: Een query ID aanmaken voor de post widget
Als je dit hebt gedaan ga je naar de pagina waar je de populaire berichten wilt tonen. Gebruik hiervoor de posts widget van Elementor.
- Voeg de post widget toe en stijl deze naar wens
- Ga naar het tabje ‘Query’ en voeg bij query ID in most_viewed_posts
Stap 5: code toevoegen aan het functions.php bestand
Nu je een query ID hebt aangemaakt, moet je nog aangeven in het functions.php bestand wat deze query moet tonen. Ga naar het functions.php bestand in je child theme en voeg de onderstaande code toe:
add_action('elementor/query/most_viewed_posts', function($query){
$query->set('orderby', 'meta_value');
$query->set('meta_key', 'views');
});
Let op: ook in deze code zie je most_viewed_posts terugkomen. Deze heb je zojuist ingevuld bij de posts widget van Elementor en dien je dus hier ook te gebruiken. Uiteraard kun je ook kiezen voor een andere benaming, zolang de twee maar overeenkomen.
Stap 6: blogberichten bekijken
Dit klinkt misschien een beetje dom, maar je hebt pas net de pageviews ingesteld voor de blogartikelen. Alles staat dus nog op nul. Om die aantallen te verhogen kun je zelf een paar blogartikelen openen.
Uiteraard kun je ervoor kiezen om nu zelf handmatig het aantal views aan te passen voor bepaalde blogartikelen (bijvoorbeeld op basis van je Google Analytics statistieken) te verhogen. Stel je het aantal views bijvoorbeeld bij naar ’10’ dan komt deze automatisch op ’11’ te staan als iemand het artikel bekijkt.
