Cách hiển thị thời gian đọc bài viết trên website

Lợi ích của việc hiển thị thời gian đọc bài viết trên WordPress

Khi bắt đầu một blog mới, mục tiêu quan trọng là thu hút nhiều lượt truy cập. Tuy nhiên, giữ chân độc giả trở nên cần thiết hơn. Khi độc giả dành nhiều thời gian trên trang, họ dễ nhớ đến thương hiệu, đăng ký nhận bản tin, thực hiện mua hàng và quay lại website.

Vì lý do đó, nhiều website nổi tiếng thường hiển thị thanh tiến trình đọc khi người dùng cuộn trang. Thanh này chỉ ra phần đã đọc và phần còn lại của bài viết. Một chiến lược khác để khuyến khích độc giả là thông báo trước thời lượng đọc bài. Điều này giúp họ đánh giá xem có đủ thời gian để tiếp tục hay không.

Hiển thị thời gian đọc bài viết trên website mang lại những lợi ích sau:

1. Nâng cao trải nghiệm người dùng: Độc giả có thể dự đoán được thời lượng cần dành cho bài viết, từ đó sắp xếp thời gian một cách hiệu quả.
2. Tăng tỷ lệ hoàn thành đọc bài: Khi biết rõ thời lượng đọc, độc giả có thể cam kết hoàn thành bài viết dễ dàng hơn.
3. Tăng tỷ lệ tương tác: Độc giả có khả năng tương tác cao hơn với bài viết khi họ biết trước được yêu cầu về thời gian.
4. Nâng cao uy tín và chuyên nghiệp: Việc cung cấp thông tin minh bạch về thời gian đọc thể hiện sự chuyên nghiệp và tôn trọng thời gian của độc giả.

Tóm lại, hiển thị thời gian đọc bài viết là một tính năng hữu ích, giúp cải thiện trải nghiệm người dùng và tăng tương tác trên website của bạn.

Cách hiển thị thời gian đọc ước tính trong bài viết WordPress

Để hiển thị thời gian đọc ước tính cho bài viết trên WordPress mà không cần cài đặt plugin, bạn có thể sử dụng một đoạn mã PHP. Đoạn mã này sẽ tính toán thời gian đọc dựa trên số lượng từ và hiển thị nó trong nội dung bài viết.

Bạn cần chỉnh sửa file single.php trong theme WordPress của bạn và thêm đoạn mã sau vào vị trí mà bạn muốn hiển thị thời gian đọc ước tính:

<?php
/**
 * Hàm tính toán thời gian đọc ước tính dựa trên số lượng từ
 * Giả định người đọc có tốc độ đọc trung bình là 200 từ/phút
 *
 * @param  string $content Nội dung bài viết
 * @return string          Thời gian đọc ước tính
 */
function calculate_estimated_reading_time( $content ) {
    $word_count = str_word_count( strip_tags( $content ) );
    $reading_time = ceil( $word_count / 200 );
    $time_string = sprintf( _n( '%s minute', '%s minutes', $reading_time, 'your-text-domain' ), number_format_i18n( $reading_time ) );
    return $time_string;
}

$post_content = get_the_content();
$estimated_reading_time = calculate_estimated_reading_time( $post_content );
?>

<div class="estimated-reading-time">
    <span><?php printf( esc_html__( 'Estimated reading time: %s', 'your-text-domain' ), $estimated_reading_time ); ?></span>
</div>

Đoạn mã trên bao gồm một hàm calculate_estimated_reading_time() để tính toán thời gian đọc ước tính dựa trên số lượng từ trong nội dung bài viết. Hàm này giả định rằng người đọc có tốc độ đọc trung bình là 200 từ/phút.

Sau khi tính toán, thời gian đọc ước tính sẽ được hiển thị bên trong một div có class estimated-reading-time. Bạn có thể điều chỉnh phần hiển thị này theo nhu cầu của mình.

Lưu ý:

• Thay thế 'your-text-domain' bằng text domain của theme WordPress của bạn để đảm bảo rằng chuỗi dịch đúng cách.
• Bạn có thể điều chỉnh giá trị 200 trong đoạn mã để phù hợp với tốc độ đọc mong muốn (số lượng từ đọc được trong một phút).

Sau khi thêm đoạn mã này vào file single.php, thời gian đọc ước tính sẽ được hiển thị trong mỗi bài viết đơn lẻ mà không cần cài đặt plugin bổ sung.

Cách thêm thời gian đọc ước tính vào bài viết blogspot

Đăng nhập trang quản trị Blogger > Chủ đề > Chỉnh sửa HTML.

Chèn đoạn code sau vào trước thẻ </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
    var txt = $(".post-full-content")[0].textContent,
    wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
    var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;
    var readingTimeAsString = readingTimeInMinutes + " phút đọc";
    $('article .reading-time').html(readingTimeAsString);
});
</script>

Xem thêm: Tạo khung chứa code chuyên nghiệp cho blogspot

Thêm đoạn CSS trước ]]></b:skin>

.reading-time:before {
  content: 'Thời gian đọc:';
  margin-right: 3px;}

Chèn đoạn code bên dưới nơi bạn muốn hiển thị thời gian đọc.

<div class="reading-time"></div>

Lưu lại Template và xem kết quả. Có thể canh chỉnh lại một số CSS cho phù hợp với blog của bạn.

Lời kết

An Trần Digital hy vọng bài viết này đã giúp bạn tìm hiểu cách hiển thị thời gian đọc bài viết trên website.

Chúc các bạn thành công !!!