Code thêm thanh tiến trình đọc bài viết trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm thanh tiến trình đọc bài viết trong Elementor nhé.

Thanh tiến trình là cái thanh mảnh nằm ở mép trên cùng của trang, nó chạy dài dần theo mức độ bạn cuộn xuống đọc bài, đọc hết bài thì thanh đầy 100%. Hiệu ứng nhỏ này giúp người đọc cảm thấy đang “tiến bộ” nên dễ đọc tới cuối bài hơn. Elementor mặc định không có tính năng này, muốn có thì bạn phải code thêm nhé.

Thêm code thanh tiến trình đọc bài viết

Bạn chỉ cần thêm code dưới vào 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.

// Thanh tiến trình đọc bài viết - Ngoc Nguyen
// Hiện thanh tiến trình ở mép trên cùng của trang bài viết
add_action('wp_body_open', 'nn_reading_progress_bar');
function nn_reading_progress_bar() {
    if (!is_single()) return;
    echo '<div class="nn-progress-wrap"><div class="nn-progress-bar" id="nnProgressBar"></div></div>';
}

// In CSS và JS cho thanh tiến trình ở cuối trang
add_action('wp_footer', 'nn_reading_progress_script');
function nn_reading_progress_script() {
    if (!is_single()) return;
    ?>
    <style>
    .nn-progress-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.08); z-index: 99999; }
    .nn-progress-bar { height: 100%; width: 0; background: #ee4d2d; }
    </style>
    <script>
    window.addEventListener('scroll', function() {
        var winScroll = document.documentElement.scrollTop || document.body.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
        document.getElementById('nnProgressBar').style.width = scrolled + '%';
    });
    </script>
    <?php
}

Code trên gồm 2 phần: hook wp_body_open in ra thanh tiến trình (chỉ ở trang bài viết nhờ điều kiện is_single), và hook wp_footer in CSS + đoạn JS tính phần trăm đã cuộn để kéo dài thanh theo. Vì code gắn ở tầng theme nên nó chạy với mọi template bài viết bạn dựng bằng Elementor, không cần sửa từng template.

Bạn muốn đổi màu thanh thì sửa mã màu #ee4d2d trong phần CSS thành màu thương hiệu của bạn, muốn thanh dày hơn thì tăng height 4px lên 5–6px là được. Kết quả sẽ như hình bên dưới: thanh màu cam chạy dọc mép trên màn hình, cuộn tới đâu thanh dài tới đó.

Lưu ý khi dùng

Nếu website của bạn có header cố định (sticky header) cao hơn bình thường, thanh tiến trình vẫn nằm trên cùng và nằm đè lên header — đó là chủ đích để người đọc luôn nhìn thấy. Trường hợp theme của bạn chưa hỗ trợ hook wp_body_open (theme quá cũ) thì thanh sẽ không hiện; lúc đó bạn cần cập nhật theme hoặc liên hệ mình để xử lý theo cách khác.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm được thanh tiến trình đọc bài viết trong Elementor rồi nhé. Tính năng này đi chung với bài code đếm số phút đọc bài viết trong Elementor là thành combo giữ chân người đọc khá tốt cho blog.

Nhưng dù sao thì code này vẫn chỉ là tính năng thêm vào, bạn cũng cần nắm rõ cơ bản và logic của Elementor thì mới làm thành thạo được. Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.