Lại một mùa Noel nữa lại đến, để trang điểm cho blog của bạn nhân dịp Giáng sinh 2014, bài viết này mình sẽ hướng dẫn cho bạn cách thêm hiệu ứng tuyết rơi vào blog với jQuery Snowfall, cái này hoàn toàn miễn phí nên bạn có thể chèn vào blog tự do.
Để biết được công dụng của jQuery Snowfall, mời bạn ghé sang xem demo để thấy hiệu ứng tuyết rơi hoạt động như thế nào.
Đầu tiên, bạn ghé sang trang GitHub jQuery Snowfall để tải phiên bản mới nhất về máy tính. Sau khi tải về bạn giải nén và mở thư mục giao diện hiện tại lên. Bạn sao chép tập tin snowfall.jquery.min.js từ đường dẫn:
JQuery-Snowfall-master\dist\snowfall.jquery.min.js
Sau đó bạn bỏ vào thư mục gốc của giao diện hoặc tạo thư mục với tên js trong thư mục chính của giao diện, sau đó paste tập tin bạn vừa mới copy vào.
wp-content\themes\giao-dien\js\snowfall.jquery.min.js
Bây giờ bạn mở tập tin functions.php của giao diện lên và thêm vào dòng code bên dưới:
function sb_theme_load_jquery_snowfall() {
wp_enqueue_script('jquery-snowfall', get_template_directory_uri() . '/js/snowfall.jquery.min.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'sb_theme_load_jquery_snowfall');
Với đoạn code trên bạn đã load được thư viện jQuery Snowfall vào giao diện hiện tại. Việc bây giờ là bạn cấu hình để cho các bông tuyết hoạt động. Bạn tạo một tập tin javascript mới cũng trong thư mục js như bên trên, đặt tên là jquery-snowfall-config.js, nội dung thì bạn cho vào như bên dưới.
(function($){
$(document).snowfall();
})(jQuery);
Sau khi tạo xong tập tin và lưu lại với nội dung như bên trên thì bạn cũng dùng hàm wp_enqueue_script để load tập tin config bạn vừa mới tạo xong.
function sb_theme_load_jquery_snowfall() {
wp_enqueue_script('jquery-snowfall', get_template_directory_uri() . '/js/snowfall.jquery.min.js', array('jquery'), false, true);
wp_enqueue_script('jquery-snowfall-config', get_template_directory_uri() . '/js/jquery-snowfall-config.js', array('jquery-snowfall'), false, true);
}
add_action('wp_enqueue_scripts', 'sb_theme_load_jquery_snowfall');
Bây giờ đoạn code của bạn trong tập tin functions.php sẽ giống như trên. Nếu mọi thứ bạn làm đúng thì sau khi bạn ra ngoài giao diện, tải lại trang web bạn sẽ thấy các bông tuyết rơi.
Như vậy là bạn đã tạo được hiệu ứng tuyết rơi cho WordPress rồi đấy, chúc bạn có một mùa Giáng sinh an lành và ấm áp nhé. Qua bài viết này bạn cũng học được cách sử dụng các tập tin javascript trên WordPress, bằng cách sử dụng hàm wp_enqueue_script bạn sẽ load được các tập tin javascript lên giữa thẻ head hoặc trước khi kết thúc thẻ body, việc dùng hàm wp_enqueue_script sẽ làm giảm đi xung đột trong quá trình sử dụng javascript trên WordPress.
