Tạo hiệu ứng chuyển trang mượt mà không cần plugin (Page Transition)

1. Thêm hiệu ứng CSS

Đầu tiên, tạo lớp hiệu ứng mờ dần (fade out):

/* transition.css */
html.is-transitioning main {
    opacity: 0;
    transition: opacity 0.4s ease;
}

main {
    transition: opacity 0.4s ease;
}

Gợi ý: Bạn nên đặt hiệu ứng trên phần chính (ví dụ <main>) để không ảnh hưởng đến toàn bộ layout (header/footer vẫn giữ nguyên).

2. Thêm JavaScript để xử lý chuyển hướng

<script>
document.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll('a[href]:not([target="_blank"]):not([href^="#"]):not(.no-transition)');

    links.forEach(link => {
        link.addEventListener("click", function (e) {
            const href = link.getAttribute("href");
            const current = window.location.href;

            if (href && href !== "#" && href !== current) {
                e.preventDefault();
                document.documentElement.classList.add("is-transitioning");
                setTimeout(() => {
                    window.location.href = href;
                }, 400); // Thời gian trùng với CSS
            }
        });
    });
});
</script>

Thêm script này vào footer hoặc gói gọn bằng wp_enqueue_script() nếu dùng WordPress.

3. Đảm bảo CSS đã load sẵn

Nếu dùng WordPress, hãy enqueue file CSS ở phần frontend:

function enqueue_page_transition_css() {
    wp_enqueue_style('page-transition', get_template_directory_uri() . '/transition.css', [], null);
}
add_action('wp_enqueue_scripts', 'enqueue_page_transition_css');

4. Loại trừ liên kết đặc biệt

Các liên kết như mailto:, tel:, hoặc có thuộc tính target="_blank" đều đã được loại khỏi đoạn JS. Nếu bạn muốn loại trừ thêm, chỉ cần thêm class .no-transition vào bất kỳ thẻ <a> nào.

Kết luận

Chỉ với vài dòng CSS và JavaScript, bạn đã có thể tạo hiệu ứng chuyển trang mượt mà như các trang dùng framework hiện đại (SPA, Nuxt, v.v…). Giải pháp này gọn nhẹ, không phụ thuộc plugin, và dễ tích hợp vào mọi website WordPress.