2 cách thêm animated background vào WordPress

1 tuần ago, Hướng dẫn WordPress, Views

Giới thiệu

Animated background, hay còn gọi là hình nền động, là một cách tuyệt vời để làm cho trang web WordPress của bạn trở nên sống động và hấp dẫn hơn. Thay vì chỉ có một hình ảnh tĩnh, hình nền động có thể thu hút sự chú ý của khách truy cập và tạo ra trải nghiệm người dùng đáng nhớ. Bài viết này sẽ hướng dẫn bạn hai cách đơn giản để thêm animated background vào trang web WordPress của bạn, phù hợp cho cả người mới bắt đầu.

Cách 1: Sử dụng Plugin WordPress

Đây là cách dễ dàng nhất để thêm animated background, đặc biệt nếu bạn không quen thuộc với việc viết code. Có rất nhiều plugin WordPress miễn phí và trả phí có thể giúp bạn thực hiện việc này một cách nhanh chóng.

Chọn Plugin Phù Hợp

Trước khi bắt đầu, hãy nghiên cứu và chọn một plugin phù hợp với nhu cầu của bạn. Một số plugin phổ biến bao gồm:

Animated Backgrounds
Wow Backgrounds
PageLayer

Mỗi plugin có các tính năng và tùy chọn khác nhau. Hãy đọc các đánh giá và xem các ví dụ để đảm bảo rằng plugin bạn chọn đáp ứng được yêu cầu về hình nền động mà bạn muốn.

Cài đặt và Kích hoạt Plugin

Sau khi chọn được plugin, hãy cài đặt và kích hoạt nó:

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi tới “Plugins” -> “Add New”.
Tìm kiếm plugin bạn đã chọn.
Nhấp vào “Install Now” và sau đó nhấp vào “Activate”.

Cấu hình Plugin

Sau khi kích hoạt plugin, bạn cần cấu hình nó để thêm hình nền động vào trang web của mình. Cách cấu hình sẽ khác nhau tùy thuộc vào plugin bạn đã chọn, nhưng thường bạn sẽ cần làm theo các bước sau:

Đi đến trang cài đặt của plugin (thường nằm trong phần “Settings” hoặc phần “Appearance” của bảng điều khiển WordPress).
Chọn loại hình nền động bạn muốn sử dụng (ví dụ: gradient, video, hình ảnh động).
Tải lên hình ảnh hoặc video của bạn (nếu cần).
Điều chỉnh các cài đặt khác, chẳng hạn như tốc độ, màu sắc và độ trong suốt.

Ví dụ sử dụng Plugin “Animated Backgrounds”

Giả sử bạn đã cài đặt và kích hoạt plugin “Animated Backgrounds”. Bạn có thể làm theo các bước sau để thêm hình nền động:

Đi tới “Animated Backgrounds” trong bảng điều khiển WordPress.
Chọn một preset background hoặc tạo một background tùy chỉnh.
Chọn trang hoặc bài viết mà bạn muốn áp dụng hình nền động.
Nhấp vào “Save Changes”.

Cách 2: Thêm Code CSS và JavaScript Tùy Chỉnh

Cách này phức tạp hơn một chút, nhưng nó cho phép bạn kiểm soát hoàn toàn hình nền động của mình. Bạn cần có kiến thức cơ bản về HTML, CSS và JavaScript để thực hiện phương pháp này.

Chuẩn bị Hình Ảnh hoặc Video

Đầu tiên, bạn cần chuẩn bị hình ảnh hoặc video mà bạn muốn sử dụng làm hình nền động. Đảm bảo rằng hình ảnh hoặc video có kích thước phù hợp và được tối ưu hóa để tải nhanh.

Thêm CSS vào Theme

Tiếp theo, bạn cần thêm CSS để đặt hình ảnh hoặc video làm hình nền cho trang web của bạn. Bạn có thể thêm CSS vào tệp style.css của theme WordPress của bạn hoặc sử dụng một plugin CSS tùy chỉnh.

Ví dụ:

body {
  background-image: url("path/to/your/image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  animation: pan 10s infinite alternate linear;
}

@keyframes pan {
  100% {
    background-position: 100%;
  }
}

Đoạn code trên sẽ thêm hình ảnh image.jpg làm hình nền cho toàn bộ trang web. Thuộc tính background-size: cover; sẽ đảm bảo rằng hình ảnh bao phủ toàn bộ màn hình. Thuộc tính animation: pan 10s infinite alternate linear; sẽ tạo hiệu ứng di chuyển hình nền ngang qua màn hình.

Thêm JavaScript để Tạo Hiệu Ứng Động Phức Tạp

Nếu bạn muốn tạo hiệu ứng động phức tạp hơn, bạn có thể sử dụng JavaScript. Ví dụ, bạn có thể sử dụng JavaScript để tạo hiệu ứng parallax hoặc hiệu ứng hạt (particle effect).

Ví dụ tạo hiệu ứng hạt:

Tạo một tệp JavaScript (ví dụ: particles.js) và thêm code sau:

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

const particlesArray = [];
const numberOfParticles = 100;

class Particle {
  constructor(){
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 5 + 1;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
    this.color = 'rgba(255, 255, 255, 0.8)';
  }
  update(){
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x  canvas.width){
      this.speedX = -this.speedX;
    }
    if (this.y  canvas.height){
      this.speedY = -this.speedY;
    }
  }
  draw(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
}

function init(){
  for (let i = 0; i < numberOfParticles; i++){
    particlesArray.push(new Particle());
  }
}

init();

function animate(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particlesArray.length; i++){
    particlesArray[i].update();
    particlesArray[i].draw();
  }
  requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', function(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});

Thêm code sau vào tệp functions.php của theme WordPress của bạn để tải tệp JavaScript:

function load_custom_scripts() {
  wp_enqueue_script( 'particles', get_template_directory_uri() . '/js/particles.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );

Đảm bảo rằng bạn đã tạo một thư mục js trong thư mục theme của bạn và đặt tệp particles.js vào đó.

Lưu ý quan trọng khi sử dụng code tùy chỉnh:

Luôn sao lưu website của bạn trước khi thực hiện bất kỳ thay đổi nào đối với code.
Kiểm tra kỹ code trước khi thêm vào website của bạn để tránh lỗi.
Tối ưu hóa code để đảm bảo hiệu suất của website.

Ưu và Nhược điểm của từng Phương Pháp

Sử dụng Plugin:

Ưu điểm: Dễ dàng cài đặt và sử dụng, không yêu cầu kiến thức về code.
Nhược điểm: Có thể làm chậm trang web nếu plugin không được tối ưu hóa tốt, ít tùy biến hơn so với việc sử dụng code tùy chỉnh.

Sử dụng Code Tùy Chỉnh:

Ưu điểm: Kiểm soát hoàn toàn hình nền động, có thể tạo hiệu ứng phức tạp và tùy chỉnh.
Nhược điểm: Yêu cầu kiến thức về HTML, CSS và JavaScript, có thể gây ra lỗi nếu code không được viết đúng cách.

Kết luận

Việc thêm animated background vào WordPress có thể giúp trang web của bạn trở nên hấp dẫn và thu hút hơn. Bạn có thể sử dụng plugin hoặc code tùy chỉnh để thực hiện việc này. Hãy chọn phương pháp phù hợp nhất với trình độ kỹ năng và nhu cầu của bạn. Chúc bạn thành công!

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa