De geschatte leestijd voor je content tonen

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);  //Aanpassen aan de doelgroep


    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);  //Aanpassen aan de doelgroep

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()) {  //We willen dit alleen voor het post 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.