elementor logo op witte achtergrond

Meest gelezen posts weergeven in Elementor: de eenvoudige manier

Web & servers, Wordpress / Door

Het sorteren in een post-blok op “most popular posts” is op heden niet zo evident als je Elementor gebruikt. Maar met de gratis plugins “Advanced Custom Fields” en “Code Snippets” klaar je de klus. In de meeste handleidingen moet je code schrijven in functions.php en/of header.php maar wij gaan voor de eenvoudigste manier en zonder deze ingrepen. Voor dummies zeg maar.

 

In deze handleiding werken we met de gratis versie van het thema Astra ende paginabouwer Elementor. Wil je iets investeren in je website dan is de beste en eerste zeker Elementor Pro.

1. Installeer Advanced Custom Fields (ACF)

Met deze plugin maak je eenvoudig een extra veld om het aantal views bij te houden per post. Hieronder maken we dat veld aan.

acf-nieuw-veld-toevoegen-1

Installeer eerst de plugin “Advanced Custom Fields” en activeer die. Klik nu links in de Admin balk op Custom Fields en kies dan Add.

1. We noemen het “Most viewed”

2. Het field label krijgt de naam “Views”

3. Field Name krijgt automatisch de naam “views” (zonder hoofdletter)

4. In Field Type kiezen we voor “Number”

5. De Default waarde zetten we op “0”

acf-nieuw-veld-toevoegen-2

We scrollen naar beneden

1. Met deze Rule (regel) zorgen we er voor dat dit enkel van toepassing is op Posts.

2. Het veld willen we zien in de Sidebar van de post.

3. En hier nog een beschrijving

2. De teller laten tellen

Nu we het extra veld hebben om het aantal views bij te houden moeten we dat natuurlijk laten werken. Dat gebeurt door een stukje code. In heel wat handleidingen moet je dat stukje programmeren in de header.php van je thema. Maar het kan heel wat eenvoudiger en veiliger met “hooks”, haken. Als je Elementor Pro of Astra Pro hebt zit het standaard ingebakken. Heb je de gratis versie van Astra installeer dan eerst de gratis plugin Astra Hooks.

Een hook of haak injecteert code op een welbepaalde plaats.

moest viewed astra hooks 
	<?php
	
		if(is_singular('post')){
			$views = get_field('views');
			$views++;
			update_field('views', $views);
		}	

	?>

In Weergave / Astra opties kies je voor Dynamische Content (Custom Layouts)

We geven de de naam “Most viewed”

1. Klik op <>Code editor inschakelen en plak de code hieronder in het veld.

2. Kies als layout voor Hooks en nieuwe velden ontvouwen zich nu

3. Bij Action kiezen we ervoor de code te laten starten vóór de header: kies header_before

4. Kies All Posts om de code enkel te laten werken op de Posts

4. Opgelet: Wijzig User Roles (gebruikersrollen) van All naar Uitgelogd / Logged out. Zo worden enkel de echte bezoekers geteld en niet jijzelf als je aan een post werkt.

Vergeet niet op te slaan

 

3. Aangepast query mogelijk maken

Nu moeten we het nog mogelijk maken om in Elementor de volgorde van de posts aan te passen naar most viewed. Dit gebeurt door een PHP functie te maken.
 
In de meeste handleidingen laat men je nu aanpassingen doen in functions.php via een Child Theme.
 
Er bestaat een veel veiliger en minder omslachtige manier!
 
Code snippet plugin

We laten de eenvoudige maar broodnodige code injecteren via de gratis plugin Code Snippets

 
PHP functie maken met code snippet

Met de onderstaande code maken we op een veilige manier de functie most_viewed_posts

 
	<?php

add_action('elementor/query/most_viewed_posts', function($query){

	$query->set('orderby', 'meta_value');
	$query->set('meta_key', 'views');
	
});

	?>
 

4. Je post blok sorteren in Elementor

In je Post blok zoek je nu naar de filter / Query.

query instellen most viewed posts

Bij Query ID geven we de naam van de functie die we hebben gemaakt: most_viewed_posts

We hebben op een zeer eenvoudige manier een teller gemaakt om posts te sorteren op aantal keren bekeken.

Meer info: https://developers.elementor.com/custom-query-filter/#Related_Posts_by_Tags_in_Posts_Widget

 
Scroll naar top