Bạn có để ý thấy nhiều trang blog và tin tức lớn hiện nay thường hiển thị thời gian ước tính để đọc hết một bài viết không? Ví dụ như: “Thời gian đọc: 5 phút”.
Đây là một tính năng nhỏ nhưng cực kỳ hữu ích, giúp cải thiện trải nghiệm người dùng. Nó cho độc giả biết họ cần dành bao nhiêu thời gian cho bài viết, từ đó khuyến khích họ ở lại trang lâu hơn.
Hướng Dẫn Thêm “Thời Gian Đọc Bài Viết” Vào Website WordPress (Kèm Code)
Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách thêm tính năng này vào website WordPress của bạn một cách đơn giản chỉ với vài dòng code.
Nguyên tắc hoạt động
Ý tưởng rất đơn giản:
- Đếm tổng số từ trong nội dung bài viết.
- Chia tổng số từ cho tốc độ đọc trung bình của một người (khoảng 200 từ/phút).
- Hiển thị kết quả đã được làm tròn.
Cách thực hiện
Bạn chỉ cần sao chép đoạn mã PHP dưới đây và dán vào cuối tệp functions.php trong theme bạn đang sử dụng.
Lưu ý: Bạn nên sử dụng child theme (giao diện con) để tránh mất code khi cập nhật theme chính.
Sau khi thêm code, bạn có hai lựa chọn để hiển thị thời gian đọc:
Lựa chọn 1: Hiển thị thủ công với Shortcode
Cách này cho phép bạn toàn quyền quyết định vị trí hiển thị thời gian đọc bằng cách chèn một shortcode đơn giản.
Code cho functions.php:
/**
* Tính toán và trả về thời gian đọc bài viết.
*
* @param string $content Nội dung bài viết.
* @return string HTML hiển thị thời gian đọc.
*/
function LTWP_calculate_reading_time( $content ) {
// Đếm số từ trong nội dung, loại bỏ các thẻ HTML
$word_count = str_word_count( strip_tags( $content ) );// Tốc độ đọc trung bình (từ/phút) – có thể thay đổi số 200
$words_per_minute = 200;// Tính toán số phút và làm tròn lên
$reading_time = ceil( $word_count / $words_per_minute );// Tạo HTML để hiển thị, nếu dưới 1 phút vẫn hiện 1 phút
$total_reading_time = ‘<div class=”reading-time”>Thời gian đọc: ‘ . $reading_time . ‘ phút</div>’;return $total_reading_time;
}/**
* Tạo shortcode [reading_time] để hiển thị thời gian đọc.
*/
function LTWP_reading_time_shortcode() {
global $post;
if ( $post && is_object( $post ) ) {
return LTWP_calculate_reading_time( $post->post_content );
}
return ”;
}
add_shortcode( ‘reading_time’, ‘LTWP_reading_time_shortcode’ );
Cách sử dụng:
Sau khi lưu tệp functions.php, bạn chỉ cần vào trình soạn thảo bài viết và chèn shortcode sau vào bất kỳ vị trí nào bạn muốn:
[reading_time]
Lựa chọn 2: Tự động hiển thị ở đầu mỗi bài viết
Nếu bạn muốn tính năng này tự động xuất hiện ở đầu tất cả các bài viết mà không cần chèn thủ công, hãy sử dụng đoạn code sau.
Code cho functions.php:
/**
* Tự động thêm thời gian đọc vào đầu nội dung của mỗi bài viết.
*
* @param string $content Nội dung gốc của bài viết.
* @return string Nội dung mới đã bao gồm thời gian đọc.
*/
function LTWP_add_reading_time_to_content( $content ) {
// Chỉ thực hiện trên trang chi tiết bài viết và trong vòng lặp chính
if ( is_single() && in_the_loop() && is_main_query() ) {
// Đếm số từ
$word_count = str_word_count( strip_tags( $content ) );// Tốc độ đọc trung bình (từ/phút) – có thể thay đổi số 200
$words_per_minute = 200;// Tính toán và làm tròn
$reading_time = ceil( $word_count / $words_per_minute );// Tạo HTML hiển thị
$total_reading_time = ‘<div class=”reading-time”>Thời gian đọc: ‘ . $reading_time . ‘ phút</div>’;// Trả về thời gian đọc + nội dung bài viết gốc
return $total_reading_time . $content;
}// Trả về nội dung gốc nếu không phải trang bài viết chi tiết
return $content;
}
add_filter( ‘the_content’, ‘LTWP_add_reading_time_to_content’ );
Lưu ý quan trọng: Bạn chỉ nên chọn một trong hai cách trên. Việc sử dụng cả hai đoạn code cùng lúc có thể gây ra lỗi.
Tùy chỉnh thêm (CSS)
Để phần hiển thị trông đẹp mắt hơn, bạn có thể thêm một chút CSS. Vào Giao diện -> Tùy biến -> CSS bổ sung và dán đoạn mã sau:
.reading-time {
font-size: 14px; /* Cỡ chữ */
font-style: italic; /* Kiểu chữ nghiêng */
color: #555; /* Màu chữ xám tối */
margin-bottom: 20px; /* Khoảng cách với nội dung bên dưới */
border-left: 3px solid #0073aa; /* Thêm một đường kẻ trái để trang trí */
padding-left: 10px; /* Khoảng cách từ chữ đến đường kẻ */
}
Bạn hoàn toàn có thể thay đổi các giá trị trên để phù hợp với thiết kế website của mình.
Lời kết
Chỉ với một đoạn code ngắn, bạn đã có thể thêm một tính năng hữu ích giúp tăng tính chuyên nghiệp và cải thiện trải nghiệm người dùng trên trang của mình.
Chúc các bạn áp dụng thành công
