Visa lästid på inlägg med WordPress

Jag gillar när inlägg jag läser visar uppskattad lästid. Särskilt när det är lite längre artiklar med mycket text. Att se den ungefärliga lästiden högt upp på sidan med texten hjälper mej att bedöma om jag har tid och vill läsa genast, eller om jag vill vänta till ett senare tillfälle. I det här inlägget förklarar jag hur man visar ungefärlig lästid på en WordPress-post för besökaren. Ungefär som jag gjort på den här sajten.

Kod för att visa lästid på WordPress-inlägg

Om du inte är intresserad och vill lära dej eller förstå är det bara att kopiera koden nedan. Men om du vill förstå koden och lära dej vad som faktiskt händer läser du vidare. Jag förklarar allting lite längre ner.

Lägg till följande kod i functions.php.

function wp_readingTime() {
    $postContent = get_post_field('post_content', get_the_ID());
    $wordCount = str_word_count(strip_tags($postContent));
    $imageCount = substr_count($postContent, '<img');
    $readingTime = $wordCount / 200;
    $imageTime = ($imageCount * 10) / 60;
    $totalTime = round($readingTime + $imageTime);
    if ($totalTime == 1) {
        $timeUnit = ' minut';
    } else {
        $timeUnit = ' minuter';
    } 
    return $totalTime . $timeUnit;
}

Och följande kod i den mall-fil där du vill visa lästid, exempelvis single.php.

<?php echo wp_readingTime(); ?>

Förklaring av koden

För att visa lästiden för ett inlägg behövs en function. I WordPress-teman är functions samlade i filen Trumvirvel🥁 functions.php. Det är därför du ska skriva det mesta av koden för att visa lästid i just den filen. Om du redan har ett Wp-tema har du kanske redan en functions-fil i din tema-folder. Men om du inte har det behöver du skapa det.

Har du redan functions-filen så finns också sannolikt <?php först i dokumentet. Om det inte gör det, eller om du behövde skapa den själv behöver du skriva det allra först i functions.php. <?php Det är så all php-kod måste börja. Med php start-tag. Och nu kan vi börja med vår function.

Mer ingående nyfiken på functions.php? Kolla Theme Functions i WordPress Theme Handbook

Skapa function för lästid

Först behöver man skapa, eller definiera function, vi kallar den wp_readingTime.

function wp_readingTime() {

}

Skapa variabler för beräkning av lästiden

I vår function ska vi definiera ett antal variabler som vi ska använda för att beräkna lästiden. En php-variabel skriver man med ett inledande dollartecken, direkt följt av ett variabelnamn som man får hitta på själv; $variabelnamn. Alla variabler ska definieras i function, mellan måsvingarna { }.

$postContent = get_post_field('post_content', get_the_ID());

Först ut är $postContent. Här väljer vi ut själva innehållet i inlägget eller den sida där vi ska visa lästiden. Så variabeln = sidans eller inläggets innehåll.

$wordCount = str_word_count(strip_tags($postContent));

På nästa rad definierar vi $wordCount. Den variabeln innehåller antalet ord i sidans eller inläggets innehåll. Lite förenklat så räknar koden som finns efter likhetstecknet ut hur många ord som finns i vår första variabel $postContent.

$imageCount = substr_count($postContent, '<img');

I $imageCount lägger vi antalet bilder som finns i innehållet. Det gör vi på ungefär samma sätt som med antalet ord. Fast här kollar vi hur många förekomster av <img som är start-tag för bilder som finns istället.

Uträkning av variablerna till total lästid

$readingTime = $wordCount / 200;

Nästa variabel är $readingTime och för att definiera den använder vi en annan variabel från tidigare, nämligen $wordCount. Alltså antalet ord, och det delar vi med 200 eftersom man läser ungefär 200 ord per minut. Så i $readingTime har vi alltså en siffra som är antalet ord delat med 200. Det vill säja antalet minuter det tar att läsa texten.

Vill man så skulle man kunna vara klar här. Men vi tar det en liten bit till. Vi har ju redan kollat hur många bilder som finns i innehållet.

$imageTime = ($imageCount * 10) / 60;

Här gör vi om antalet bilder till tid och lägger i variabeln $imageTime. Varje bild tilldelas 10 sekunder. ($imageCount * 10) är alltså antalet bilder multiplicerat med 10. Och detta ska vara i en parantes eftersom den beräkningen ska göras separat. Om du vill anta att varje bild som finns i innehållet tar mer eller mindre tid i anspråk väljer du ett annat tal än 10.
Låt oss säga att det finns 2 bilder i innehållet. I så fall är talet nu 20. Den sista delen / 60 delar 20 med 60 för att det ska bli rätt när vi sedan ska räkna ihop tiden och visa den i antal minuter.

$totalTime = round($readingTime + $imageTime);

Den ihopräknade lästiden och tiden för bilderna avrundat placeras i variablen $totalTime. Det vill säja lästiden + tiden vi uppskattat att det tar att titta på bilderna blir den totala tiden för inlägget eller sidan.

Gör tidsenheten dynamisk

Det var alla variabler. Och nu behöver vi egentligen bara se till att den totala lästiden som finns i variabeln $totalTime kommer ut där vi vill. Men innan vi gör det ska vi fixa en stilig sak till. Nämligen enheten.
Vi tar hela kodsnutten direkt.

if ($totalTime == 1) {
    $timeUnit = ' minut';
} else {
    $timeUnit = ' minuter';
} 

Det som händer här är att om den totala lästiden $totalTime är lika med 1 ska variabeln $timeUnit vara minut. Annars (else) ska $timeUnite vara minuter. I php använder man två likhetstecken efter varandra när man ska kolla något eller göra en jämförelse. Och ett likhetstecken om man ska definiera något.

Så nu när vi har en dynamisk variabel $timeUnit, som ändrar sej beroende på om lästiden är en minut eller mer, kan vi bygga ihop det som ska komma ut i vår mall-fil.
OBS mellanslaget före minut respektive minuter i koden ovan. Det vill vi ha för att skapa ett mellanslag mellan själva tiden och enheten.

Avslut av function

Till sist behöver vi ytterligare en rad i vår function för att något ska hända när vi sedan anropar den från mall-filen.

return $totalTime . $timeUnit;

Före den avslutande måsvingen ska raden ovan in. return som helt enkelt skickar in $totalTime den totala lästiden, och $timeUnit tidsenheten i mallen där vi anropar detta. Om den totala lästiden skulle vara 5 så skulle det helt enkelt skrivas ut ”5 minuter”.

Lästid 5 minuter

Men för att det ska hända behöver vi anropa function wp_readingTime() från mall-filen. Om du vill kika på och kopiera koden för denna function i sin helhet så finns den lite längre upp.

Anropa function wp_readingTime()

Nu ska vi inte längre vara i functions.php, utan i mall-filen. Och lite beroende på hur ditt tema är konstruerat och var du vill visa lästiden kan det variera. Det kan till exempel vara i single.php, page.php eller index.php. Eller någon helt annan. Där du vill visa den uppskattade lästiden, lägg till detta.

<?php echo wp_readingTime(); ?>

echo gör att vi visar det som följer i koden. Och det är inget mindre än namnet på vår function, wp_readingTime(). Och wp_readingTime() returnerar ju ett tal och en enhet. Till exempel ”5 minuter”. Och sådär, då är det klart!

Om du har läst ända hit hoppas jag att du tycker att du förstått och att jag förklarat på ett begripligt sätt. Har du använt koden ovan, eller själv lagt till ytterligare smarta funktioner till detta. Lämna gärna en kommentar och berätta!


Lämna en kommentar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *