Code hiển thị thời gian tương đối cho ngày đăng trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách hiển thị thời gian tương đối cho ngày đăng trong Elementor nhé.

Blog hay trang tin mà ngày đăng cứ hiện dạng “07/11/2026” thì người đọc khó cảm nhận bài mới hay cũ, trong khi kiểu “3 giờ trước” hay “2 ngày trước” thì nhìn là biết ngay độ mới của bài. Widget Ngày đăng của Elementor chỉ hiện ngày tháng tuyệt đối, không có kiểu hiển thị tương đối, muốn có thì bạn phải code thêm nhé.

Thêm code hiển thị thời gian tương đối

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ị thời gian tương đối ("3 ngày trước") cho ngày đăng
// Dùng shortcode [nn_ngay_tuong_doi] trong widget Văn bản hoặc Tiêu đề của Elementor
add_shortcode('nn_ngay_tuong_doi', 'nn_ngay_tuong_doi_shortcode');
function nn_ngay_tuong_doi_shortcode($atts) {
    $atts = shortcode_atts(array('id' => get_the_ID()), $atts, 'nn_ngay_tuong_doi');
    $id = absint($atts['id']);
    if (!$id) {
        return '';
    }
    $thoi_gian_dang = get_post_time('U', false, $id);
    if (!$thoi_gian_dang) {
        return '';
    }
    $chenh = current_time('timestamp') - $thoi_gian_dang;
    if ($chenh < 0) {
        $chenh = 0;
    }
    if ($chenh < 60) {
        return 'Vừa xong';
    }
    if ($chenh < 3600) {
        $phut = floor($chenh / 60);
        return $phut . ' phút trước';
    }
    if ($chenh < 86400) {
        $gio = floor($chenh / 3600);
        return $gio . ' giờ trước';
    }
    if ($chenh < 604800) {
        $ngay = floor($chenh / 86400);
        return $ngay . ' ngày trước';
    }
    if ($chenh < 2592000) {
        $tuan = floor($chenh / 604800);
        return $tuan . ' tuần trước';
    }
    if ($chenh < 31536000) {
        $thang = floor($chenh / 2592000);
        return $thang . ' tháng trước';
    }
    $nam = floor($chenh / 31536000);
    return $nam . ' năm trước';
}

Code trên đăng ký một shortcode [nn_ngay_tuong_doi] để hiện thời gian tương đối của bài đăng. Hàm lấy thời gian đăng bằng get_post_time() rồi so với thời gian hiện tại lấy bằng current_time(), nên mốc giờ theo đúng múi giờ bạn đã đặt trong Cài đặt → Tổng quan. Chênh lệch dưới 1 phút thì hiện “Vừa xong”, dưới 1 giờ thì tính theo phút, dưới 1 ngày tính theo giờ, dưới 1 tuần tính theo ngày, rồi tới tuần, tháng và năm. Shortcode có thuộc tính id nên bạn có thể truyền ID của bài khác nếu cần, ví dụ [nn_ngay_tuong_doi id=”123″].

Gắn shortcode vào mẫu bài đăng trong Elementor

Bạn mở mẫu Single Post trong Theme Builder (hoặc trang bài viết đang dựng bằng Elementor), kéo widget Văn bản (Text Editor) vào chỗ muốn hiện ngày đăng rồi nhập [nn_ngay_tuong_doi] là xong. Muốn hiện kèm nhãn thì bạn gõ chữ “Đăng ” trước shortcode, ví dụ “Đăng 3 ngày trước”. Shortcode cũng dùng được trong widget Tiêu đề hay bất cứ widget văn bản nào của Elementor, và dùng được cả trong bài viết Gutenberg.

Lưu ý khi dùng

Thời gian tương đối chỉ nên dùng cho blog hay trang tin đăng bài thường xuyên, với bài viết cũ trên 1 năm thì shortcode vẫn hiện dạng “2 năm trước” — nếu muốn bài cũ hiện ngày đầy đủ thì bạn cần sửa thêm ngưỡng trong code. Bài đăng hẹn giờ chưa tới giờ đăng thì shortcode hiện “Vừa xong” vì chênh lệch âm được chặn về 0. Shortcode chỉ hiện đúng khi đặt trong vòng lặp bài viết hoặc trang bài đăng, nếu đặt ngoài bài viết thì nó lấy ID của trang hiện tại.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã hiển thị thời gian tương đối cho ngày đăng 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 thêm hiệu ứng gõ chữ cho tiêu đề trong Elementor là thành combo làm trang blog thân thiện hơn khá nhiều.

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