Innehåll

    Lästid på blogginlägg

    Vi har fått frågan hur vi lagt till vår estimerade lästid på våra guider. Idag kommer vi att dela med oss utav vår kod men även visa hur man kan göra detta med ett plugin. Vi rekommenderar alltid att använda sig utav child tema, se här hur man skapar ett child tema. Som du kan se nedan på bilden använder vi oss utav Font Awesome också för att få klock-ikonen innan tiden. Har du inte font awesome kan du integrera Font Awesome med WordPress, vi kommer att dela vår fulla kod nedan.

    Plugin för lästid

    Vi har valt Reading Time WP som är skapat utav Jason Yingling. Innan jag implementerade min egna kod använde jag detta plugin. Detta kommer med en bra uppsättning inställningar som gör det möjligt att placera tiden på olika ställen. Vill du inkludera lästiden via en shortcode går även detta. Nedan finner du en länk till pluginet, där finner du all information du behöver.

    Inkludera lästid i Child tema

    Att inkludera detta i ditt child tema är att rekommendera. Det ger dig fullt ägande över koden och du kan editera den enkelt. Nedan finner du funktionen som räknar ut lästiden, den kommer sedan att skriva ut det på följande vis: X minuter (X = antal minuter). Du lägger funktionen i din functions.php fil som du har i ditt child tema. Sedan för att skriva ut detta så rekommenderar jag att lägga det i din single.php fil på lämpligt ställe. Du skriver ut lästiden med denna kod: echo getEstimatedTime();.

    Fil: functions.php
    <?php /*
    * Returns the estimated time of the post.
    * Based on 180 words is one minute.
    */
    function getEstimatedTime() {
        global 
    $post;
        
    $post_data get_post($post->ID);
        
        
    $words str_word_countstrip_tags$post_data->post_content ) );
        
    $minutes floor$words 180 );
        
        
    $estimated_time $minutes ' minut' . ($minutes == '' 'er');
        
        return 
    $estimated_time;
    ?>

    BONUS: Klock ikon före tiden

    Vill du snygga till din estimerade lästid med en klock ikon eller annan ikon före tiden? Du kan se exempel på detta tidigare i denna guide. För att kunna gå vidare och slutföra denna del utav guide krävs det att du har Font Awesome på din sida. Har du inte font awesome redan följ då vår Integrera Font Awesome med WordPress guide.

    Om du installerat Font Awesome så är det inte mycket kvar för att få in klockan. Som tidigare sagt skriver du ut lästiden genom att skriva “echo getEstimatedTime();”, det enda du behöver lägga till är en wrapper runt “getEstimatedTime();”. Det ska se ut som följande <span class=”reading_time”><?php echo getEstimatedTime(); ?</span>. Sedan behöver du bara lägga till följande kod i din style.css för att addera in klockan till “reading_time” klassen.

    .reading_time:before {
    content: “\f017”;
    font-family: “Font Awesome 5 Free”;
    display: inline-block;
    width: 25px;
    height: 28px;
    color: #b8f7b1;
    vertical-align: middle;
    }