Hệ thống giải nghĩa tự động bằng tooltip – Từ điển thông minh trong WordPress

1. Chuẩn bị file từ điển JSON

Tạo file glossary.json trong thư mục theme:

{
  "SEO": "Tối ưu hóa công cụ tìm kiếm.",
  "REST": "Giao thức giao tiếp client-server thông qua HTTP.",
  "API": "Giao diện lập trình ứng dụng."
}

2. HTML nội dung bài viết (không cần gắn thủ công)

Ví dụ bạn viết bài như bình thường:

<p>
  Khi triển khai hệ thống REST, bạn nên cung cấp API rõ ràng và tuân thủ nguyên tắc của SEO hiện đại.
</p>

3. JavaScript tự động quét và chèn tooltip

<script>
document.addEventListener("DOMContentLoaded", async function () {
  const glossary = await fetch('/wp-content/themes/your-theme-name/glossary.json')
    .then(res => res.json());

  const content = document.querySelector('.entry-content'); // hoặc bài viết tùy vào theme
  if (!content) return;

  const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false);

  const terms = Object.keys(glossary);
  const regex = new RegExp('\\b(' + terms.join('|') + ')\\b', 'gi');

  while (walker.nextNode()) {
    const node = walker.currentNode;
    if (node.parentNode.closest('.glossary-tooltip')) continue; // tránh lồng tooltip

    if (regex.test(node.nodeValue)) {
      const replaced = node.nodeValue.replace(regex, match => {
        const def = glossary[match] || glossary[match.toUpperCase()];
        if (!def) return match;
        return `<span class="glossary-tooltip" uk-tooltip="title: ${def}">${match}</span>`;
      });

      const span = document.createElement('span');
      span.innerHTML = replaced;
      node.replaceWith(span);
    }
  }
});
</script>

4. CSS hỗ trợ giao diện

<style>
.glossary-tooltip {
  border-bottom: 1px dashed #999;
  cursor: help;
  white-space: nowrap;
  background: inherit;
  color: inherit;
}
</style>

5. Ưu điểm của hệ thống này

• Không cần chèn thủ công từng từ vào HTML bài viết.
• Dễ bảo trì, dễ mở rộng – chỉ cần cập nhật file glossary.json.
• Không ảnh hưởng SEO vì giữ nguyên nội dung.
• Không cần plugin, chạy hoàn toàn trên frontend.

Lưu ý: Chỉ nên áp dụng tự động với nội dung không quá dài, hoặc giới hạn số lần thay mỗi từ (có thể thêm bộ đếm vào JS nếu cần).