Code hiển thị bài viết đã xem gần đây trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách hiển thị bài viết đã xem gần đây trong Elementor nhé.

Khách đọc xong một bài viết trên blog của bạn rồi muốn quay lại bài vừa đọc trước đó thì thường phải bấm nút Back của trình duyệt hoặc mò lại trong menu, rất dễ bỏ lỡ những bài hay họ mới xem qua. Elementor mặc định không có widget nào ghi nhớ và liệt kê các bài viết khách vừa xem, muốn có khối “Bài viết bạn đã xem gần đây” ở cuối bài viết thì bạn phải code thêm nhé.

Thêm code hiển thị bài viết đã xem gần đây

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Hiển thị danh sách bài viết khách vừa xem gần đây bằng shortcode [nn_bai_da_xem]
// Đặt shortcode vào widget Văn bản (Text Editor) của Elementor ở cuối bài viết hoặc sidebar
// Mỗi lần khách mở một bài viết, ID bài đó được lưu vào cookie nn_bai_da_xem (giữ 30 ngày, tối đa 6 bài)
add_action('template_redirect', 'nn_luu_bai_da_xem');
function nn_luu_bai_da_xem() {
    if (!is_singular('post')) {
        return;
    }
    $id_hien_tai = get_the_ID();
    $da_xem = array();
    if (isset($_COOKIE['nn_bai_da_xem']) && '' !== $_COOKIE['nn_bai_da_xem']) {
        $da_xem = array_map('absint', explode(',', sanitize_text_field(wp_unslash($_COOKIE['nn_bai_da_xem']))));
    }
    $da_xem = array_diff($da_xem, array($id_hien_tai));
    array_unshift($da_xem, $id_hien_tai);
    $da_xem = array_slice(array_values($da_xem), 0, 6);
    setcookie('nn_bai_da_xem', implode(',', $da_xem), time() + 30 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
}

add_shortcode('nn_bai_da_xem', 'nn_bai_da_xem_shortcode');
function nn_bai_da_xem_shortcode($atts) {
    $atts = shortcode_atts(array('so_luong' => 5), $atts, 'nn_bai_da_xem');
    if (!isset($_COOKIE['nn_bai_da_xem']) || '' === $_COOKIE['nn_bai_da_xem']) {
        return '';
    }
    $da_xem = array_map('absint', explode(',', sanitize_text_field(wp_unslash($_COOKIE['nn_bai_da_xem']))));
    $da_xem = array_diff($da_xem, array(get_the_ID()));
    $da_xem = array_slice(array_values($da_xem), 0, (int) $atts['so_luong']);
    if (empty($da_xem)) {
        return '';
    }
    $truy_van = new WP_Query(array(
        'post_type' => 'post',
        'post__in' => $da_xem,
        'orderby' => 'post__in',
        'posts_per_page' => count($da_xem),
    ));
    if (!$truy_van->have_posts()) {
        return '';
    }
    $html = '<div class="nn-bai-da-xem"><h3>Bài viết bạn đã xem gần đây</h3><ul>';
    while ($truy_van->have_posts()) {
        $truy_van->the_post();
        $html .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    $html .= '</ul></div>';
    wp_reset_postdata();
    return $html;
}

Code trên có hai phần. Phần đầu móc vào template_redirect để ghi lại ID của bài viết khách vừa mở vào cookie nn_bai_da_xem, bài mới nhất luôn đứng đầu danh sách, bài đang đọc được loại ra khỏi danh sách để khỏi tự liệt kê chính nó, cookie giữ tối đa 6 bài trong 30 ngày. Phần sau đăng ký shortcode [nn_bai_da_xem], đọc cookie rồi dùng WP_Query với post__in và orderby là post__in để lấy đúng các bài đó theo đúng thứ tự vừa xem, in ra thành danh sách link. Khách chưa xem bài nào thì shortcode không in gì cả nên trang không bị thừa một khối trống.

Gắn shortcode vào bài viết trong Elementor

Bạn mở mẫu bài viết (single post template) đang dựng bằng Elementor, kéo widget Văn bản (Text Editor) vào cuối bài viết rồi nhập shortcode [nn_bai_da_xem]. Muốn hiện ít bài hơn thì thêm thuộc tính số lượng, ví dụ [nn_bai_da_xem so_luong=”3″]. Mở thử 2–3 bài viết khác nhau rồi quay lại một bài bất kỳ, cuối bài sẽ hiện khối “Bài viết bạn đã xem gần đây” với đúng các bài bạn vừa mở, bài đang đọc không nằm trong danh sách.

Lưu ý khi dùng

Danh sách này là của riêng từng khách vì nó đọc từ cookie trên trình duyệt của họ, nên trang nào có gắn shortcode thì bạn cần loại trang đó khỏi cache toàn trang, nếu không khách sẽ thấy danh sách đã xem của người khác bị cache lại. Code chỉ theo dõi bài viết thuộc loại post, trang sản phẩm hay trang tĩnh không được ghi vào danh sách. Nếu muốn theo dõi cả trang sản phẩm thì bạn đổi is_singular(‘post’) thành is_singular(array(‘post’, ‘product’)) và đổi post_type trong WP_Query tương ứng.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã hiển thị bài viết đã xem gần đây trong Elementor rồi nhé. Tính năng này đi chung với bài code thêm nút sao chép link bài viết trong Elementor và bài code hiển thị thời gian tương đối cho ngày đăng trong Elementor là thành combo giữ chân người đọc ở lại blog lâu hơn khá tốt.

Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.