Code đếm số phút đọc bài viết trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách để thêm chức năng đếm số phút đọc bài viết trong Elementor nhé.

Các widget post của Elementor mặc định sẽ không có trường Meta này, bình thường nó chỉ có các meta như thời gian đăng, ngày đăng, tác giả, danh mục, thẻ …. Vậy nên muốn có tính năng này thì bạn phải code thêm nhé.

Thêm code đếm số phút đọc bài viết

Đầu tiên bạn chỉ cần thêm code dưới vào file functions.php của child theme nhé.

// Ước tính thời gian đọc bài viết - Ngoc Nguyen
function get_reading_time($postID = null) {
    if (!$postID) {
        $postID = get_the_ID();
    }

    $content = get_post_field('post_content', $postID);
    $word_count = str_word_count(strip_tags($content));

    // tốc độ đọc trung bình (200 từ / phút)
    $reading_time = ceil($word_count / 200);

    return $reading_time . ' phút đọc';
}

// Shortcode để dùng trong Elementor - Ngoc Nguyen
function shortcode_reading_time($atts){
    global $post;
    $atts = shortcode_atts( array(
        'id' => '', // có thể truyền id nếu muốn
    ), $atts, 'reading_time' );

    $postID = $atts['id'] ? $atts['id'] : $post->ID;

    return get_reading_time($postID);
}
add_shortcode('reading_time', 'shortcode_reading_time');

Ở funtions trên chúng ta thấy nó có thêm 1 shortcode [reading_time] để khi trên web, bạn muốn hiện phần đếm thời gian ở đâu thì chỉ cần bỏ shortcode đó vào là được.

Thêm shortcode vào template của elementor

Tiếp theo nếu bạn muốn hiển thị tính năng đếm thời gian đọc này trong trang chi tiết bài viết, thì bạn chỉ cần vào single post template -> Tạo thêm 1 widget Post Info (nếu đã dựng sẵn rồi thì không cần tạo).

Ở mục layout bạn thêm 1 phần tử với type là Custom. Sau đó chỉ cần bỏ shortcode bên trên vào phần Shortcode của phần tử là được. kết quả sẽ như hình bên dưới.

Nếu muốn hiện tính năng này ra post grid ở các trang danh mục thì bạn cần tạo thêm 1 loop item để dựng 1 grid mới cho phần thể hiện danh sách bài viết. Rồi trong loop item đó bạn cũng thêm widget post info và làm tương tự như trên là được.

Kết luận

Vậy là với đoạn code trên bạn có thể dễ dàng thêm tính năng đếm số phút đọc bài viết trong Elementor rồi nhé.

Nhưng dù sao thì code này vẫn chỉ là tính năng thêm vào, bạn cũng cần nên học để năm rõ cơ bản và logic của Elementor thì mới làm thành thạo được. Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.