Hướng Dẫn Code Random Background Website Wordpress

Bài viết này tôi sẽ hướng dẫn bạn chức năng thay đổi random background bằng JS. Để tạo chức năng thay đổi random background cho một section trên website WordPress, bạn có thể làm theo các bước sau:

Hướng dẫn Code Random Background website WordPress

Bước 1: Thêm mã JavaScript vào website của bạn

Đầu tiên, tạo một mảng chứa các URL của ảnh nền

Bạn có thể thêm mã JavaScript này vào file footer.php hoặc thêm thông qua Theme Customizer hoặc Theme Options nếu theme của bạn có hỗ trợ. Mã này sẽ giúp thay đổi ngẫu nhiên hình nền ở section với class là .st_banner .section-bg . Nếu banner dùng UX Banner .st_banner .banner-bg

document.addEventListener("DOMContentLoaded", function() {

// Tạo mảng chứa các URL của ảnh nền

var backgrounds = [

'url("https://demo.tunlamweb.com/wp-content/uploads/2024/10/bg-banner-1.webp")',

'url("http://demo.tunlamweb.com/wp-content/uploads/2024/11/bg-home-2.webp")',

'url("http://demo.tunlamweb.com/wp-content/uploads/2024/11/bg-home-1.webp")'

// thêm URL ảnh khác nếu cần

];

// Chọn ngẫu nhiên một ảnh từ mảng

var randomBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)];

// Áp dụng ảnh nền ngẫu nhiên cho section có class là .random-background-section

var section = document.querySelector('.st_banner .banner-bg');

if (section) {

section.style.backgroundImage = randomBackground;

}

});

</script>

Xem thêm bài viết khác

Bước 2: Sử dụng class Random Background cho section mong muốn

Trong phần HTML của website, thêm class .st_banner vào section mà bạn muốn áp dụng background ngẫu nhiên. Ví dụ:

</div>

</section>

Nó sẽ hiện style là đúng

Lưu ý

Thay đổi URL ảnh: Hãy thay thế /bg-banner-1.webp, /bg-banner-2.webp, /bg-banner-3.webp bằng đường dẫn thực tế của ảnh bạn muốn sử dụng.
Định dạng đường dẫn ảnh: Nếu ảnh đã được tải lên WordPress, bạn có thể lấy đường dẫn từ thư viện phương tiện (Media Library).

Bây giờ, mỗi lần trang được tải, section sẽ hiển thị một ảnh nền ngẫu nhiên từ danh sách đã cho.

Theo dỗi mình thêm qua Fanpage Tunlamweb.com

Chúc bạn thành công.