Vòng tròn tiến trình: biết mình đi được bao xa
Nằm gọn trong thanh điều khiển đọc nổi ở góc màn hình, vòng tròn tiến trình là một SVG ring tinh tế theo dõi tiến độ đọc dựa trên các tiêu đề (H2, H3) trong bài viết. Khi độc giả cuộn xuống, vòng cung màu theme dần lấp đầy vòng tròn — không cần thanh progress dài chiếm chỗ, chỉ một vòng tròn nhỏ xinh, đủ để biết “đã đọc được 67%”.
Tooltip hiển thị phần trăm chính xác khi hover, và aria-label cập nhật real-time cho trình đọc màn hình. Thiết kế này vừa tiết kiệm không gian, vừa đảm bảo accessibility.
Mục lục dropdown: bản đồ toàn bộ bài viết trong một click
Click vào vòng tròn tiến trình, một dropdown mục lục xổ ra liệt kê toàn bộ cấu trúc bài viết — từng phần, từng tiểu mục, phân cấp rõ ràng bằng indent. Độc giả click bất kỳ mục nào là cuộn mượt ngay đến đúng đoạn đó nhờ UIkit scroll.
Điểm đặc biệt: phần đang đọc được highlight theo thời gian thực. Khi cuộn trang, mục lục tự động cập nhật — dot indicator chuyển màu, mục active được scrollIntoView nếu nằm ngoài vùng nhìn. Độc giả không bao giờ lạc giữa bài viết 5.000 từ.
Hoàn toàn client-side: nhanh, nhẹ, không phụ thuộc server
Toàn bộ vòng tròn tiến trình và dropdown mục lục được tạo và chạy 100% bằng JavaScript phía client, không render PHP. Điều này có nghĩa:
- Không tăng tải server — mọi tính toán diễn ra trên trình duyệt độc giả
- Không làm chậm TTFB — HTML gốc không chứa thêm markup thừa
- Phản hồi tức thì — không cần chờ AJAX, mọi thao tác là native
Dropdown sử dụng component uk-dropdown của UIkit với flip và boundary, tự động điều chỉnh vị trí để không bị tràn khỏi viewport dù độc giả dùng màn hình nhỏ hay tablet xoay ngang.
Chèn vào DOM không gây layout shift
Để tránh hiện tượng Cumulative Layout Shift (CLS) — một chỉ số Core Web Vitital quan trọng — phiên bản 1.2.7 sử dụng placeholder data-init-toc="1" trong thanh điều khiển đọc. Module JS thay thế placeholder này bằng vòng tròn thực tế sau khi DOM ready, đảm bảo không gian đã được đặt trước, tránh nội dung nhảy loạn khi load.
Kiểm soát linh hoạt trong Theme Settings
Admin có hai công tắc mới trong Theme Settings → Post Settings:
init_press_enable_toc_progress— Bật/tắt toàn bộ tính năng vòng tròn tiến trình & mục lục dropdown. Mặc định bật.init_press_enable_inline_toc— Bật/tắt mục lục inline hiện có ở đầu nội dung bài viết. Trước đây mục lục này luôn bật và không thể tắt, giờ đây admin có toàn quyền kiểm soát.
Hai tùy chọn độc lập cho phép kết hợp linh hoạt: chỉ dùng vòng tròn, chỉ dùng mục lục inline, dùng cả hai, hoặc tắt hết nếu bạn theo đuổi phong cách tối giản.
Đa ngôn ngữ & Accessibility
Toàn bộ chuỗi giao diện — từ tiêu đề dropdown “Mục lục” đến thông báo “Không có mục lục” — đã được quốc tế hóa đầy đủ theo chuẩn WordPress i18n. Bản dịch tiếng Việt đi kèm sẵn. Các thuộc tính ARIA như aria-expanded, aria-haspopup, role="list" được thiết lập chuẩn chỉnh, đảm bảo trải nghiệm mượt mà cho người dùng trình đọc màn hình.
Tổng kết
Init Press 1.2.7 biến mỗi bài viết dài từ một bức tường text khó nhằn thành một tài liệu có cấu trúc, dễ điều hướng. Độc giả biết mình đang ở đâu, còn bao nhiêu phần trăm, và có thể nhảy đến bất kỳ phần nào chỉ trong một click. Cập nhật ngay để mang trải nghiệm đọc chuyên nghiệp này đến audience của bạn.
Bình luận