Tạo hiệu ứng tuyết rơi cho WordPress không cần plugin

Tạo hiệu ứng tuyết rơi cho WordPress không cần plugin

Noel sắp đến và chủ website thường tạo hiệu ứng tuyệt rơi để website trở nên sinh động hơn, nếu bạn tìm kiếm điều này thì có thể đọc qua bài viết sau để tích hợp hiệu ứng tuyết rơi vào trang web của bạn chỉ trong vài phút.

Tạo hiệu ứng tuyết trong WordPress không cần plugin

Lưu ý rằng hiệu ứng tuyết sẽ không xuất hiện trên các trang có nền trắng và bạn nên tiêu dùng nó trên các trang có nền màu.

Thêm đoạn mã sau vào file functions.php

Trong bảng điều khiển WordPress, Bạn click vào Giao diện ➡ Trình chỉnh sửa tệp chủ đề và sao chép đoạn mã phía dưới và dán vào file functions.php

Bạn phải tạo một chủ đề con trước khi thực hiện bất kỳ thay đổi nào đối với tệp tin functions.php. Nếu không, những thay đổi được vận dụng sẽ bị mất sau mỗi lần cập nhật theme.

Để hiểu rõ hơn về Child theme bạn có thể xem qua bài viết WordPress child theme là gì? Tại sao phải luôn tiêu dùng chúng

add_action( 'wp_footer', function () { if (!is_admin()) { ?><style>canvas#canvas{  position: absolute;  left: 0;  top: 0;  z-index: 99;  pointer-events: none;  width: 100%;}</style><script>document.addEventListener("DOMContentLoaded", function(){setTimeout(function() {var canv = `<canvas id="canvas"></canvas>`;document.body.insertAdjacentHTML("beforeend", canv);    var body = document.body,htmlElement = document.documentElement;var height = body.offsetHeight ;document.querySelector("#canvas").style.height = height + "px"function startAnimation() {  const CANVAS_WIDTH = window.innerWidth;  const CANVAS_HEIGHT = height;  const MIN = 0;  const MAX = CANVAS_WIDTH;  const canvas = document.querySelector("#canvas");  const ctx = canvas.getContext("2d");  canvas.width = CANVAS_WIDTH;  canvas.height = CANVAS_HEIGHT;  function clamp(number, min = MIN, max = MAX) {    return Math.max(min, Math.min(number, max));  }  function random(factor = 1) {    return Math.random() * factor;  }  function degreeToRadian(deg) {    return deg * (Math.PI / 180);  }  class Circle {    radius = 0;    x = 0;    y = 0;    vx = 0;    vy = 0;    constructor(ctx) {      this.ctx = ctx;      this.reset();    }    draw() {      this.ctx.beginPath();      this.ctx.fillStyle = "rgba(255,255,255,0.8)";      this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);      this.ctx.fill();      this.ctx.closePath();    }    reset() {      this.radius = random(2.5);      this.x = random(CANVAS_WIDTH);      this.y = this.y ? 0 : random(CANVAS_HEIGHT);      this.vx = clamp((Math.random() - 0.5) * 0.4, -0.4, 0.4);      this.vy = clamp(random(1.5), 0.1, 0.8) * this.radius * 0.5;    }  }  let circles = [];  for (let i = 0; i < 300; i++) {    circles.push(new Circle(ctx));  }  function clearCanvas() {    ctx.clearRect(0, 0, canvas.width, canvas.height);  }  let canvasOffset = {    x0: ctx.canvas.offsetLeft,    y0: ctx.canvas.offsetTop,    x1: ctx.canvas.offsetLeft + ctx.canvas.width,    y1: ctx.canvas.offsetTop + ctx.canvas.height  };  function animate() {    clearCanvas();    circles.forEach((e) => {      if (        e.x <= canvasOffset.x0 ||        e.x >= canvasOffset.x1 ||        e.y <= canvasOffset.y0 ||        e.y >= canvasOffset.y1      ) {        e.reset();      }      e.x = e.x + e.vx;      e.y = e.y + e.vy;      e.draw();    });    requestAnimationFrame(animate);  }  animate();}startAnimation();window.addEventListener("resize", startAnimation);}, 500);	});</script><?php } });

Xong! Bây giờ bạn sẽ thấy hiệu ứng tuyết trên website của bạn.

Nếu bạn muốn hiển thị hiệu ứng tuyết trên một số trang nhất định thì bạn có thể đặt điều kiện hiển thị như sau:

Ví dụ: Để hiển thị hiệu ứng tuyết trên các trang có ID 4 và 5, chỉ cần thay thế dòng đầu tiên của mã bằng mã sau:

add_action('wp_footer', function () { if (!is_admin() && is_page([4, 5]) ) { ?>

Bạn có thể xem qua demo tại đây

Ngoài ra nếu bạn muốn tiêu dùng plugin thì có thể tham khảo cài plugin art-snowfall này là được

Chúc giáng sinh an lành!