Hiệu ứng tuyết rơi cho website wordpress không sử dụng Plugin

Giáng sinh đang đến gần, và bạn đã chuẩn bị gì cho website wordpress để đón giáng sinh ? Đây chính là cơ hội để tạo ấn tượng mạnh mẽ với độc giả, hãy để trang web của bạn tỏa sáng với chủ đề mới lấy cảm hứng từ không khí tràn ngập niềm vui và sự ấm áp của mùa Giáng sinh.

Đừng quên tích hợp những tính năng đặc biệt, như hiệu ứng tuyết rơi sẽ làm cho trang web của bạn trở nên sống động, độc đáo và chắc chắn sẽ để lại ấn tượng sâu sắc trong lòng độc giả.

Hiệu ứng tuyết rơi cho wordpress không sử dụng Plugin

Có rất nhiều plugin tạo hiệu ứng tuyết rơi cho wordpress có thể giúp bạn làm điều này. Tuy nhiên cá nhân mình không thích cài quá nhiều plugin lên website và mình tin nhiều bạn có cùng trường phái hạn chế plugin cũng như mình.

Mặc dù các plugin tạo hiệu ứng tuyết rơi giúp các bạn không am hiểu về code tích hợp dễ dàng đơn giản, nhưng cũng có một số nhược điểm như: Khả năng tương thích (với các theme hoặc plugin khác), hiệu ứng đơn giản, không có khả năng tùy biến theo ý thích…

>> Tham khảo:

• Roll back Plugin, Theme WordPress về phiên bản trước
• Một số code khung viền trang trí cho WordPress

Code hiệu ứng tuyết rơi

<script>
var snowmax=68;
var snowcolor=new Array("#b8e1fd","#b8e1fd","#b8e1fd","#b8e1fd","#b8e1fd");
var snowtype=new Array("Times","Arial","Times","Verdana");var snowletter="❄︎";var sinkspeed=0.6;var snowmaxsize=50;var snowminsize=8;var snowingzone=1;var snow=new Array();var marginbottom;var marginright;var timer;var i_snow=0;var x_mv=new Array();var crds=new Array();var lftrght=new Array();var browserinfos=navigator.userAgent;var ie5=document.all&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;document.getElementById&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;!browserinfos.match(/Opera/);var ns6=document.getElementById&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;!document.all;var opera=browserinfos.match(/Opera/);var browserok=ie5||ns6||opera;function randommaker(range){rand=Math.floor(range*Math.random());return rand}function initsnow(){if(ie5||opera){marginbottom=document.body.scrollHeight;marginright=document.body.clientWidth-15}else if(ns6){marginbottom=document.body.scrollHeight;marginright=window.innerWidth-15}var snowsizerange=snowmaxsize-snowminsize;for(i=0;i&amp;amp;amp;amp;amp;lt;=snowmax;i++){crds[i]=0;lftrght[i]=Math.random()*15;x_mv[i]=0.03+Math.random()/10;snow[i]=document.getElementById("s"+i);snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)];snow[i].size=randommaker(snowsizerange)+snowminsize;snow[i].style.fontSize=snow[i].size+'px';snow[i].style.color=snowcolor[randommaker(snowcolor.length)];snow[i].style.zIndex=1000;snow[i].sink=sinkspeed*snow[i].size/5;if(snowingzone==1){snow[i].posx=randommaker(marginright-snow[i].size)}if(snowingzone==2){snow[i].posx=randommaker(marginright/2-snow[i].size)}if(snowingzone==3){snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}if(snowingzone==4){snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);snow[i].style.left=snow[i].posx+'px';snow[i].style.top=snow[i].posy+'px'}movesnow()}function movesnow(){for(i=0;i&amp;amp;amp;amp;amp;lt;=snowmax;i++){crds[i]+=x_mv[i];snow[i].posy+=snow[i].sink;snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';snow[i].style.top=snow[i].posy+'px';if(snow[i].posy&amp;amp;amp;amp;amp;gt;=marginbottom-2*snow[i].size||parseInt(snow[i].style.left)&amp;amp;amp;amp;amp;gt;(marginright-3*lftrght[i])){if(snowingzone==1){snow[i].posx=randommaker(marginright-snow[i].size)}if(snowingzone==2){snow[i].posx=randommaker(marginright/2-snow[i].size)}if(snowingzone==3){snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}if(snowingzone==4){snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}snow[i].posy=0}}var timer=setTimeout("movesnow()",30)}for(i=0;i&amp;amp;amp;amp;amp;lt;=snowmax;i++){document.write("&amp;amp;amp;amp;amp;lt;span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'&amp;amp;amp;amp;amp;gt;"+snowletter+"&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt;")}if(browserok){window.onload=initsnow}
</script>

Tuỳ chỉnh mặc định:

• Thay đổi số lượng: snowmax=68
• Thay đổi màu tuyết: snowcolor=new Array("#b8e1fd","#b8e1fd","#b8e1fd","#b8e1fd","#b8e1fd") // mình đang để mặc định là màu xanh nhạt vì đa số nền web là màu trắng, các bạn thay đổi thành màu trắng #ffffff nếu nền web của bạn có màu hoặc kết hợp nhiều màu
• Thay đổi biểu tượng: var snowletter=”❄︎” // một số biểu tượng hình bông tuyết khác ❅ ❆ ❄️
• Thay đổi tốc độ: sinkspeed=0.6
• Size lớn nhất: snowmaxsize=50
• Size nhỏ nhất: snowmaxsize=8

Tích hợp code vào website

Cách 1: Mở cấu hình Themes (theme options) ==> Custom scripts ==> Paste vào trước thẻ </head> và lưu lại

Phần này mỗi theme sẽ khác nhau chút xíu nhé, như hình theme mình sử dụng có hỗ trợ nhúng Javascript code nên mình bỏ thẻ <script> đi

Lưu lại và mở trang chủ ra xoá cache và tận hưởng thành quả 😉

Cách 2: Nhúng trực tiếp vào file header.php bằng cách vào bằng phần mềm FTP như FileZilla hoặc qua hệ thống quản lý file của Cpanel host ==> wp-content ==> themes ==> theme của web ==> header.php sau đó chèn đoạn mã trên vào trước thẻ </head> lưu lại

Lưu ý: Nếu bạn nhúng code trực tiếp trong mã nguồn khi theme được cập nhật code sẽ bị mất nhé

Hy vọng bài viết này đã giúp các bạn thêm được hiệu ứng bông tuyết rơi vào WordPress. Chúc bạn và gia đình một mùa Giáng Sinh ấm áp.