Thêm hiệu ứng bông tuyết rơi vào Website WordPress

				/**
 * Thêm hiệu ứng tuyết rơi Giáng sinh (Canvas/JS) vào chân trang.
 * Dùng action wp_footer để chèn code HTML/CSS/JS.
 */
function my_christmas_snow_effect() {
    // Bắt đầu khối HTML/CSS/JS (thoát khỏi PHP)
    ?&gt;<style>
    /* Vùng chứa tuyết: Cố định, phủ toàn màn hình, không chặn click */
    #snow-container-dom {
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        pointer-events: none; 
        z-index: 9997; 
        overflow: hidden;
    }
    .dom-snowflake {
        position: absolute;
        /* Màu Xanh Băng */
        color: #aaffff; 
        /* Không bóng đổ */
        user-select: none; 
        opacity: 0.8;
    }
</style>

<div id="snow-container-dom"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('snow-container-dom');
        if (!container) return;

        const SNOWFLAKE_SYMBOLS = ['❅', '❆', '❄', '*', '•'];
        const NUM_FLAKES = 40; // ĐÃ GIẢM: Số lượng bông tuyết từ 80 xuống 40

        let flakes = [];

        function createFlake() {
            const flake = document.createElement('div');
            flake.className = 'dom-snowflake';
            
            flake.innerHTML = SNOWFLAKE_SYMBOLS[Math.floor(Math.random() * SNOWFLAKE_SYMBOLS.length)];
            
            const size = Math.random() * 10 + 10;
            const speed = Math.random() * 3 + 1;
            const sway = Math.random() * 2 - 1;
            
            flake.style.fontSize = size + 'px';
            
            const initialX = Math.random() * window.innerWidth;
            const initialY = -size - Math.random() * window.innerHeight; 

            flake.style.left = initialX + 'px';
            flake.style.top = initialY + 'px';

            container.appendChild(flake);
            
            return {
                element: flake,
                x: initialX,
                y: initialY,
                speed: speed,
                sway: sway,
                angle: Math.random() * 360 
            };
        }

        for (let i = 0; i < NUM_FLAKES; i++) {
            flakes.push(createFlake());
        }

        function animateSnow() {
            flakes.forEach(flake => {
                // Rơi xuống
                flake.y += flake.speed * 0.5; 

                // Lắc lư ngang bằng hàm sin
                flake.x += flake.sway * Math.sin(flake.angle * 0.01); 
                flake.angle += 1;

                // Cập nhật vị trí DOM
                flake.element.style.top = flake.y + 'px';
                flake.element.style.left = flake.x + 'px';

                // Tái tạo lại nếu rơi xuống dưới đáy
                if (flake.y > window.innerHeight) {
                    flake.y = -20; 
                    flake.x = Math.random() * window.innerWidth; 
                    flake.speed = Math.random() * 3 + 1;
                }
            });

            requestAnimationFrame(animateSnow);
        }

        animateSnow();
    });
</script>
<?php
    // Kết thúc khối HTML/CSS/JS (trở lại PHP)
}
// Kích hoạt hàm trên hành động wp_footer để mã được chèn vào cuối trang
add_action( 'wp_footer', 'my_christmas_snow_effect' );
			

				/**
 * Thêm hiệu ứng tuyết rơi Giáng sinh (Canvas/JS) vào chân trang.
 * Dùng action wp_footer để chèn code HTML/CSS/JS.
 */
function my_christmas_snow_effect() {
    // Bắt đầu khối HTML/CSS/JS (thoát khỏi PHP)
    ?> 

<canvas id="snowCanvas"></canvas>

<style>
    #snowCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Cực kỳ quan trọng: Cho phép click xuyên qua lớp canvas */
        pointer-events: none; 
        /* Đảm bảo tuyết nằm trên hầu hết các thành phần */
        z-index: 9999; 
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const canvas = document.getElementById('snowCanvas');
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        
        function setCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        setCanvasSize(); 
        window.addEventListener('resize', setCanvasSize); 

        let snowflakes = [];
        const numberOfSnowflakes = 250; 

        function createSnowflake() {
            return {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 3 + 1,
                speed: Math.random() * 1.5 + 0.5,
                sway: Math.random() * 0.5 - 0.25,
                opacity: Math.random() * 0.6 + 0.3
            };
        }

        for (let i = 0; i < numberOfSnowflakes; i++) {
            snowflakes.push(createSnowflake());
        }

        function drawAndAnimate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < numberOfSnowflakes; i++) {
                const s = snowflakes[i];
                
                s.y += s.speed;
                s.x += s.sway * Math.sin(s.y * 0.01);

                ctx.beginPath();
                ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${s.opacity})`;
                ctx.fill();
                
                if (s.y > canvas.height) {
                    snowflakes[i] = createSnowflake(); 
                    snowflakes[i].y = -s.radius; 
                }
            }

            requestAnimationFrame(drawAndAnimate);
        }

        drawAndAnimate();
    });
</script>
<?php 
    // Kết thúc khối HTML/CSS/JS (trở lại PHP)
}
// Kích hoạt hàm trên hành động wp_footer để mã được chèn vào cuối trang
add_action( 'wp_footer', 'my_christmas_snow_effect' );