Cách tạo hiệu ứng tuyết rơi giáng sinh cho Web WordPress

Mùa Giáng sinh đang đến gần, và không gì tuyệt vời hơn việc thêm hiệu ứng tuyết rơi lãng mạn cho website WordPress của bạn. Trong bài viết này, ToanWeb sẽ hướng dẫn bạn cách tạo hiệu ứng tuyết rơi giáng sinh cho Web WordPress chuyên nghiệp bằng JavaScript thuần, không cần plugin, chỉ cần copy code vào file functions.php.

Tại Sao Nên Tạo Hiệu Ứng Tuyết Bằng JavaScript Thuần?

Sử dụng JavaScript thuần mang lại nhiều lợi ích vượt trội so với việc cài đặt plugin:

Hiệu suất tối ưu: Không phải tải thêm plugin nặng nề, code được tối ưu hóa cho từng website cụ thể.

Kiểm soát hoàn toàn: Bạn có thể tùy chỉnh mọi chi tiết từ số lượng bông tuyết, kích thước, tốc độ rơi đến màu sắc.

Không phụ thuộc bên thứ ba: Không lo plugin ngừng cập nhật hoặc xung đột với các plugin khác.

Hướng Dẫn Chi Tiết Tạo Hiệu Ứng Tuyết Rơi

Bước 1: Backup Website

Trước khi thực hiện bất kỳ thay đổi nào với file functions.php, hãy backup toàn bộ website. Bạn có thể sử dụng plugin backup như UpdraftPlus hoặc tải file về máy qua FTP.

Bước 2: Truy Cập File Functions.php

Có hai cách để truy cập file functions.php:

Cách 1 – Qua Dashboard WordPress:

• Vào Appearance > Theme File Editor
• Chọn file functions.php ở cột bên phải
• Lưu ý: Một số hosting có thể tắt tính năng này vì lý do bảo mật

Cách 2 – Qua FTP/File Manager:

• Truy cập hosting qua FTP hoặc File Manager trong cPanel
• Điều hướng đến wp-content/themes/[tên-theme-của-bạn]/
• Mở file functions.php

Bước 3: Copy Code Vào Functions.php

Sao chép toàn bộ đoạn code sau và dán vào cuối file functions.php (trước thẻ đóng ?> nếu có):

function toanweb_snow_effect_css() {
    // Chỉ hiển thị ở frontend, không hiển thị trong admin
    if (is_admin()) {
        return;
    }
    
    // Tùy chọn: Chỉ hiển thị trong tháng 12 và tháng 1
    $current_month = date('n');
    if ($current_month != 12 && $current_month != 1) {
        return;
    }
    
    ?>
    <style id="toanweb-snow-css">
        /* Container tuyết */
        .toanweb-snowflakes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }
        
        /* Hidden state */
        .toanweb-snowflakes.hidden {
            display: none;
        }
        
        /* Bông tuyết - Hình tròn trắng */
        .toanweb-snowflake {
            position: absolute;
            top: -10px;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            opacity: 0.8;
            animation: toanweb-fall linear infinite;
            will-change: transform;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        
        /* Animation rơi */
        @keyframes toanweb-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
            }
        }
        
        /* Tắt trên mobile để tối ưu */
        @media (max-width: 768px) {
            .toanweb-snowflakes {
                display: none;
            }
        }
        
        /* Toggle button */
        .toanweb-snow-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 10000;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            font-size: 20px;
            transition: transform 0.3s ease;
        }
        
        .toanweb-snow-toggle:hover {
            transform: scale(1.1);
        }
        
        @media (max-width: 768px) {
            .toanweb-snow-toggle {
                display: none;
            }
        }
    </style>
    
    <script>
    (function() {
        'use strict';
        
        // Cấu hình
        const CONFIG = {
            snowflakeCount: 50, // Số lượng bông tuyết
            minSize: 2,  // Kích thước nhỏ nhất (px)
            maxSize: 6,  // Kích thước lớn nhất (px)
            minDuration: 10, // Thời gian rơi nhanh nhất (giây)
            maxDuration: 20  // Thời gian rơi chậm nhất (giây)
        };
        
        // Kiểm tra localStorage
        const isSnowHidden = localStorage.getItem('toanwebSnowHidden') === 'true';
        
        // Tạo container
        const container = document.createElement('div');
        container.className = 'toanweb-snowflakes' + (isSnowHidden ? ' hidden' : '');
        
        // Tạo bông tuyết
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.className = 'toanweb-snowflake';
            
            // Random vị trí và thuộc tính
            const size = CONFIG.minSize + Math.random() * (CONFIG.maxSize - CONFIG.minSize);
            const duration = CONFIG.minDuration + Math.random() * (CONFIG.maxDuration - CONFIG.minDuration);
            const delay = Math.random() * duration;
            const left = Math.random() * 100;
            const opacity = 0.5 + Math.random() * 0.5; // Random opacity 0.5-1
            
            snowflake.style.left = left + '%';
            snowflake.style.width = size + 'px';
            snowflake.style.height = size + 'px';
            snowflake.style.opacity = opacity;
            snowflake.style.animationDuration = duration + 's';
            snowflake.style.animationDelay = -delay + 's';
            
            return snowflake;
        }
        
        // Thêm bông tuyết vào container
        for (let i = 0; i < CONFIG.snowflakeCount; i++) {
            container.appendChild(createSnowflake());
        }
        
        // Tạo toggle button
        const toggleBtn = document.createElement('button');
        toggleBtn.className = 'toanweb-snow-toggle';
        toggleBtn.innerHTML = isSnowHidden ? '❄️' : '🚫';
        toggleBtn.setAttribute('aria-label', 'Toggle snow effect');
        toggleBtn.title = isSnowHidden ? 'Bật tuyết rơi' : 'Tắt tuyết rơi';
        
        toggleBtn.addEventListener('click', function() {
            const isHidden = container.classList.toggle('hidden');
            localStorage.setItem('toanwebSnowHidden', isHidden);
            this.innerHTML = isHidden ? '❄️' : '🚫';
            this.title = isHidden ? 'Bật tuyết rơi' : 'Tắt tuyết rơi';
        });
        
        // Thêm vào DOM khi trang load xong
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                document.body.appendChild(container);
                document.body.appendChild(toggleBtn);
            });
        } else {
            document.body.appendChild(container);
            document.body.appendChild(toggleBtn);
        }
    })();
    </script>
    <?php
}
add_action('wp_footer', 'toanweb_snow_effect_css', 100);

Câu Hỏi Thường Gặp (FAQ)

Kết Luận

Hiệu ứng tuyết rơi là cách tuyệt vời để tạo không khí Giáng sinh cho website WordPress của bạn. Với code JavaScript thuần được tối ưu hóa, bạn có thể dễ dàng tạo hiệu ứng chuyên nghiệp mà không cần cài đặt plugin nặng nề.

Nếu bạn có nhu cầu làm Website hãy liên hệ với ToanWeb để được tư vấn miễn phí