MENU

Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Populaire berichten tonen in WordPress met Elementor

Inhoud van dit artikel:

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’

populaire berichten tonen wordpress elementor acf veld views

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.

acf veld tonen bij berichten in wordpress

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.

Posts widget 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

populaire berichten tonen wordpress elementor posts widget query id

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.

Kom je er niet uit? Stuur gerust een bericht!

 

Meer handige tips ontvangen?

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Tips ontvangen?

Schrijf je in voor updates!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.