Bạn đang dùng theme Flatsome và muốn hiển thị ngày đăng bài viết, số lượt xem và ngày cập nhật gần nhất – ngay trong mỗi bài viết – mà không cần biết code, không đụng vào file gốc, không lo lỗi vặt?

Vậy thì bài viết này là dành cho bạn

Nội dung chính:

Hướng dẫn đơn giản để hiển thị Ngày đăng, Ngày cập nhật và Lượt xem trong Flatsome (không cần biết code)

Sau hướng dẫn này, bạn sẽ:

✅ Hiển thị ngày đăng + lượt xem ngay dưới tiêu đề

✅ Tự động hiển thị ngày cập nhật gần nhất nếu bài viết được sửa

✅ Gộp phần Chia sẻ + Cập nhật gần nhất lại gọn gàng – hiển thị đẹp trên cả desktop và điện thoại

BƯỚC 1: CÀI PLUGIN “CODE SNIPPETS”

Để thêm các đoạn mã vào website mà không cần sửa code theme.

Vào Gói mở rộng → Cài mới
Tìm plugin tên: Code Snippets
Cài và kích hoạt

BƯỚC 2: THÊM CODE VÀO CODE SNIPPETS

Vào Snippet → Thêm mới, dán toàn bộ đoạn dưới đây:

✅ Chọn loại PHP Snippet khi tạo mới (không chọn HTML, CSS hay JS)

Toàn bộ code cần dùng:

// ✅ Hiển thị ngày đăng + lượt xem
if ( !function_exists('flatsome_posted_on_custom') ) {
    function flatsome_posted_on_custom() {
        $published_time = get_the_time('U');
        $time_string = sprintf(
            '<time class="entry-date published" datetime="%1$s">%2$s</time>',
            esc_attr(date('c', $published_time)),
            esc_html(date('d/m/Y', $published_time))
        );

        $posted_on = sprintf(
            esc_html_x('Ngày đăng: %s', 'post date', 'flatsome'),
            '<a href="' . esc_url(get_permalink()) . '" rel="bookmark">' . $time_string . '</a>'
        );

        $views = get_post_meta(get_the_ID(), 'post_views', true);
        $views_text = $views ? sprintf(
            _n('%s lượt xem', '%s lượt xem', $views, 'flatsome'),
            number_format_i18n($views)
        ) : esc_html__('Chưa có lượt xem', 'flatsome');

        echo '<div class="post-meta-custom">
            <span class="posted-on"><i class="fa fa-calendar"></i> ' . $posted_on . '</span>
            <span class="post-views"><i class="fas fa-eye"></i> ' . $views_text . '</span>
        </div>';
    }
}

// ✅ Đếm lượt xem
function count_post_views() {
    if (is_single()) {
        $post_id = get_the_ID();
        $views = get_post_meta($post_id, 'post_views', true);
        $views = $views ? $views + 1 : 1;
        update_post_meta($post_id, 'post_views', $views);
    }
}
add_action('wp_head', 'count_post_views');

// ✅ Hiển thị ngày cập nhật gần nhất
if ( !function_exists('show_last_updated_date') ) {
    function show_last_updated_date() {
        $modified_time = get_the_modified_time('U');
        $modified_date = get_the_modified_date('d/m/Y');
        $published_time = get_the_time('U');

        if ($modified_time > $published_time) {
            echo '<div class="last-updated-container">
                <div class="last-updated"><i class="fa fa-sync-alt"></i> Cập nhật gần nhất: ' . $modified_date . '</div>
            </div>';
        }
    }
}

// ✅ Tạo shortcode ngày cập nhật gần nhất
function shortcode_last_updated_date() {
    ob_start();
    show_last_updated_date();
    return ob_get_clean();
}
add_shortcode('last_updated_date', 'shortcode_last_updated_date');

// ✅ Gộp chia sẻ + cập nhật
function shortcode_share_and_update() {
    ob_start();
    ?>
    <div class="meta-flex-container">
        <div class="meta-share"><?php echo do_shortcode('[nut_chia_se.]'); ?></div> // bỏ dấu . sau chữ _se
        <div class="meta-updated"><?php echo do_shortcode('[last_updated_date]'); ?></div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('meta_info_group', 'shortcode_share_and_update');

Sau khi dán → đặt tên Snippet: Hiển thị ngày + lượt xem + cập nhật
Kéo xuống, chọn Chạy ở mọi nơi (Run snippet everywhere)
Bấm Lưu và kích hoạt ✅

BƯỚC 3: THÊM CSS VÀO WEBSITE

Cách làm:

Vào Giao diện → Tùy biến → CSS bổ sung
Dán đoạn sau:

/* Style cho phần Ngày đăng + lượt xem */
.post-meta-custom {
  margin-top: -45px !important;
  margin-bottom: 30px;
  font-size: 14px;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}
.post-meta-custom i {
  margin-right: 5px;
  color: #999;
}
.post-meta-custom a {
  color: #333;
  text-decoration: none;
}
.post-meta-custom a:hover {
  color: #0073aa;
}
.single-post h1.entry-title {
  margin-bottom: 5px !important;
}

/* Style chia sẻ + cập nhật */
.meta-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  gap: 10px;
  font-size: 14px;
  color: #555;
}
.meta-share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.meta-share .share-button.facebook {
  background-color: #3b5998 !important;
  color: white !important;
}
.meta-share .share-button.email {
  background-color: #dd4b39 !important;
  color: white !important;
}
.meta-updated {
  display: flex;
  align-items: center;
  color: #555;
}
.meta-share .share-button {
  margin-right: 10px;
  padding: 8px 18px !important;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.meta-share .share-button:last-child {
  margin-right: 0;
}
.meta-share .share-button i {
  margin-right: 8px;
  font-size: 1.1em;
  line-height: 1;
}
@media (max-width: 600px) {
  .meta-flex-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .meta-updated {
    margin-top: 10px;
  }
}

BƯỚC 4: CHÈN VÀO GIAO DIỆN BÀI VIẾT

1. Chèn Ngày đăng + lượt xem (ngay sau tiêu đề bài viết)

Mở file template-parts/posts/content-single.php
Tìm đoạn bắt đầu như sau:

<?php
/**
 * Posts content single.
 *
 * @package Flatsome\Templates
 */
?>
<div class="entry-content single-page">

Chèn đoạn này ngay sau tiêu đề bài viết hoặc sau dòng <?php the_title(); ?> hoặc the_title() nếu có:

<?php flatsome_posted_on_custom(); ?>

Một số theme tùy chỉnh có thể không theo đúng cấu trúc này, bạn có thể thử chèn ở:

Trước <div class="entry-content">
Hoặc sau bất kỳ đoạn nào bạn thấy tiêu đề xuất hiện

2. Chèn dòng [Chia sẻ + Ngày cập nhật]

Cách 1: Dùng UX Builder → Add Text → Dán shortcode:

[meta_info_group]

=> Ưu điểm: bạn chủ động chọn vị trí (trên, dưới, giữa nội dung tùy ý)

Cách 2 (nâng cao): Tự động chèn vào cuối nội dung bài viết

Thêm đoạn sau vào cuối file functions.php hoặc Snippet PHP:

add_filter('the_content', 'append_share_update_to_content');
function append_share_update_to_content($content) {
    if (is_single()) {
        $content .= do_shortcode('[meta_info_group]');
    }
    return $content;
}

✅ Vậy là xong! Giao diện sẽ hiển thị: