Xây hệ thống đếm lượt xem kiểu headless với Init View Count

1. Kích hoạt các endpoint REST API

Init View Count cung cấp 2 endpoint:

• POST /wp-json/initvico/v1/count: Tăng lượt xem cho một bài viết
• GET /wp-json/initvico/v1/top: Lấy danh sách bài viết có lượt xem cao nhất

Hãy đảm bảo permalink đã bật và REST API của WordPress hoạt động bình thường.

2. Gửi lượt xem từ frontend

Khi người dùng truy cập trang bài viết, hãy gửi yêu cầu REST để tăng lượt xem. Nên trì hoãn việc đếm cho đến khi người dùng thật sự bắt đầu đọc.

// Giả sử "postId" là ID của bài viết hiện tại
setTimeout(() => {
  if (!postId) return;

  fetch('https://yourdomain.com/wp-json/initvico/v1/count', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ post_id: postId })
  });
}, 3000); // Đếm sau 3 giây

Bạn có thể cải tiến bằng cách kết hợp với cuộn chuột hoặc tương tác người dùng.

3. Hiển thị số lượt xem ở frontend

Để hiển thị số lượt xem trên trang bài viết, bạn có thể gọi API /top và lọc theo post_id, hoặc tự tạo endpoint riêng.

async function getViews(postId) {
  const res = await fetch('https://yourdomain.com/wp-json/initvico/v1/top?fields=full&number=1&post_type=post');
  const data = await res.json();
  const post = data.find(item => item.id === postId);
  return post ? post.views : 0;
}

Một cách khác là tạo endpoint REST tuỳ chỉnh chỉ để trả về lượt xem của 1 bài viết.

4. Tuỳ chọn: Hiển thị “Đăng X ngày trước”

Nếu muốn hiển thị thời gian đăng (ví dụ: “3 ngày trước”), bạn có thể xử lý trực tiếp ở frontend bằng dữ liệu date trả về từ API.

function timeAgo(dateString) {
  const date = new Date(dateString);
  const now = new Date();
  const diff = Math.floor((now - date) / 1000);
  if (diff < 60) return `${diff} giây trước`;
  if (diff < 3600) return `${Math.floor(diff / 60)} phút trước`;
  if (diff < 86400) return `${Math.floor(diff / 3600)} giờ trước`;
  return `${Math.floor(diff / 86400)} ngày trước`;
}

5. Gợi ý cải tiến

• Dùng sessionStorage hoặc localStorage để tránh gửi request nhiều lần
• Đếm sau khi người dùng scroll hoặc có tương tác thật
• Sử dụng SWR hoặc TanStack Query để cache dữ liệu view

6. Tổng kết

Plugin Init View Count có thể hoạt động hoàn toàn độc lập với giao diện WordPress, rất phù hợp cho các dự án headless hoặc SPA. Việc đếm và hiển thị lượt xem thông qua REST API giúp bạn kiểm soát toàn bộ luồng dữ liệu mà vẫn đảm bảo độ chính xác cao.