De geschatte leestijd voor je content tonen

De geschatte leestijd voor je content tonen

Laat de geschatte tijd voor een blogposts zien op diverse manieren.

Soms zie je aan het begin van een blogpost staan, wat de geschatte leestijd voor een blogpost is. Om eerlijk te zeggen, ik zie het ook wel eens aan het einde staan, maar dan vraag ik mij toch af of de eigenaar van de blog wel een idee heeft van wat hij of zij doet. Want een geschatte leestijd geven nadat ik het al gelezen heb, dat is toch wel heel veel mosterd na de maaltijd.

Er zijn verschillende plugins die dit doen, maar omdat we het aantal plugins tot een minimum willen beperken, kijken we hoe we dit met een code snippet kunnen doen.

De code snippet bestaat uit twee delen. Eén deel de leestijd te berekenen, een ander deel om deze ook zichtbaar te maken.

En dat zichtbaar maken doen we op twee verschillende manieren. Kortom, weer een hoop code voor de boeg om van te leren.

De leestijd berekenen

Een leestijd berekenen is natuurlijk voor iedereen verschillend. Ik ben een ‘speed reader’. Mijn gemiddelde leessnelheid is vele malen hoger dan het gemiddelde. Voor de gemiddelde Nederlander is de leessnelheid voor het Nederlands 250 woorden per minuut. Met de Engelse taal wordt het interessanter. De gemiddelde leessnelheid voor de Engelse taal is voor de gemiddelde Brit 250 woorden per minuut, net zoals voor de gemiddelde Nederlander. De gemiddelde Amerikaan leest 210 woorden per minuut en de gemiddelde Aussie 240 worden per minuut.

Dat zijn nogal verschillen!

In mijn voorbeeld, ervan uitgaande dat de gemiddelde lezer van mijn blog voor de gemiddelde Nederlander zal schrijven, ga ik uit van 250 woorden per minuut.

Maar laten we eerst eens met de eerste code snippet beginnen.

<?php
function wxp_get_read_time() {

    global $post; 

    $count_words = str_word_count( strip_tags( $post->content ) );

    $read_time = ceil($count_words / 250);  


    return $read_time;
}

De werkelijke magie gebeurt in twee regels. Laten we hier eens wat verder naar kijken

$count_words = str_word_count( strip_tags( $post->post_content ) );

Functies in PHP worden van binnen naar buiten gelezen. Het eerste wat we dus met ‘$post->post_content’ doen (het veld ‘post_content’, van de globale variabele ‘$post’), is alle HTML tags verwijderen. Want HTML tags lezen we niet, die zien we niet eens. Vervolgens laten we op dit resultaat de functie str_word_count los, en die doet precies wat de naam suggereert.

Hij telt het aantal woorden in een tekst. En gewoon op een heel domme manier. Tekenseries door witruimte of leestekens gescheiden worden geacht woorden te zijn. Dus lkjklweqjkl is net zozeer een woord als fietsbel. De functie gaat een klein beetje de fout in bij afkortingen gescheiden door punten, zoals bijvoorbeeld ‘Napoleon Solo the man from U.N.C.L.E’, omdat hier iedere letter door punten gescheiden als een apart woord wordt gezien. Maar in de context van onze functie maakt dat niet uit.

Onze variabele $count_words bevat in ieder geval het juiste aantal woorden.

$read_time = ceil($count_words / 250); 

De functie ceil (van ceiling) ‘rond’ een getal af op het eerstvolgende gehele nummer. Dus ceil(5) is 5, maar ceil(5.000000000000000000000000001) is al zes. We nemen dus het aantal woorden, delen dit door 250 en bepalen op basis hiervan een geheel aantal minuten. Aangezien we met schattingen werken, zal niemand ons verwijten, dat hij of zij het in een minuut meer of minder dan de schatting heeft gelezen.

De echte PHP crack zal mij verwijten, dat ik hier de code een stuk sneller had kunnen schrijven door geen tussen variabelen te introduceren. En dat is waar. Maar dan was het een stuk lastiger geweest om de code te bespreken. Wil je de meest efficiënte code voor deze functie gebruiken, dan kan je de functie in zijn geheel ook als volgt schrijven :

<?php
function wxp_get_read_time() {
    global $post; 
    return ceil(str_word_count( strip_tags( $post->content ) ) / 250);
}

Het zichtbaar maken van het resultaat

Wanneer ik het resultaat van deze functie zichtbaar zou willen maken in een theme builder als bijvoorbeeld Elementor, dan zou ik een shortcode nodig hebben. Ik heb eerder geschreven over het zelf maken van shortcodes, maar deze shortcode is wel heel simpel.

<?php
add_shortcode('readtime','wxp_get_read_time');

Natuurlijk moet je ook één van de twee snippets voor de functie wxp_get_read_time implementeren.

In een Single Post template in Elementor Pro zou je in een text widget vervolgens iets als de volgende tekst kunnen plaatsen :

Geschatte leestijd voor dit artikel is [readtime] min. 

Gebruik je geen theme builder als Elementor Pro, dan kan je nog steeds de shortcode gebruiken. Wanneer je gewoon ieder blogartikel met deze tekst begint, dan krijg je eenzelfde resultaat. Er zit hier echter een kleine onnauwkeurigheid in, omdat nu de woorden ‘Geschatte leestijd voor dit artikel is x min. ook meegenomen wordt in de berekening. Maar is een nauwelijks significant verschil.

Het nadeel is echter wel, dat je -indien je al 100 blogposts hebt, deze regel aan alle blogposts toe zal moeten voegen.

Dat moet makkelijker kunnen. En dat kan het ook. Een tijdje terug heb ik een andere code snippet behandeld, waarin ik aangaf, hoe je een regel tekst aan het begin of einde van een blogpost toe kan voegen.

Laten we die functie nog eens bekijken en gelijk aanpassen aan de door ons gewenste situatie. Omdat een ‘geschatte leestijd’ aan het einde van een post vrij onzinnig is, concentreren we ons op de manier om die tekst aan het begin van de blogpost te zetten.

<?php
add_filter(‘the_content’, ‘wxp_add_content_before’);

function wxp_add_content_before($content) {

   $reading_time = sprintf('div class="wxp-rt"><span class="wp-rt-prefix">Geschatte leestijd voor dit artikel is</span> %d <span class="wp-rt-postfix">min.</span></div>',wxp_get_read_time()); 

   if(is_single() && !is_home()) {
     if ('post' == get_post_type()) {  
        $content = $reading_time . $content;
     }
   }
   return $content;
}

Vergeet ook hier niet de snippet voor de functie wxp_get_read_time() ook mee te nemen.

Een uitdaging hier is misschien regel 6.

Even los van alle HTML in deze regel om het straks ook mogelijk te maken de tekst via CSS te stylen, is de constructie

sprintf('some %d template',5);

nieuw voor je.

sprintf maakt het mogelijk om op bepaalde posities in een string (die hier een ‘format’ wordt genoemd) bepaalde variabelen in te voegen.

In ons voorbeeld hierboven wordt het getal 5 op de plaats van %d ingevuld. En we hebben hier %d staan, omdat we hier decimale getallen (zonder breuk) verwachten.

En die heel ingewikkelde sprintf regel in regel 6 is eigenlijk niet veel meer dan dat. Maar we vullen hier niet direct een getal in, maar het resultaat van een functie.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

Een 'terug' knop voor je webpagina
Stel, je bezoeker is op een pagina en je wilt dat die bezoeker eenvoudig terug kan gaan naar de voorgaande...
Maak WP Courseware lessen zichtbaar in Elementor
Standaard kan Elementor Pro jouw WP Courseware Units niet vinden. Zo los je dit op.
Beperk zoekresultaten tot bepaalde post-typen
Hoe beperk je de post typen die terug komen vanuit een zoekopdracht?
WooCommerce checkout velden verwijderen
Sommige velden in het bestelformulier van WooCommerce heb je absoluut niet nodig. En zo haal je ze weg!
Een veld toevoegen in WooCommerce bestellingen
Hoe voeg je extra velden toe aan je WooCommerce checkout procedure?
De 'search' functie in je site helemaal uitschakelen
In de meeste gevallen zal je willen dat mensen je website makkelijk kunnen doorzoeken. Maar wat nu als...

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

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

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht