Banner Quảng Cáo 2 Bên Trái Và Phải Cho Wordpress

Dưới đây là cách tạo banner quảng cáo 2 bên trái và phải có nút tắt (X), và chỉ hiện ra khi người dùng kéo xuống 300px. Bạn cần chỉnh sửa tệp functions.php của theme đang sử dụng trong WordPress.

Hãy thực hiện các bước sau:

Banner quảng cáo 2 bên trái và phải cho WordPress

Thêm mã vào file functions.php:

Thêm đoạn mã sau vào cuối file functions.php để chèn script và style:

//Banner Left Right
function add_banner_ads_scripts() {
    ?>
    <div class="banner-ads left">
	    <button class="close-btn"><i class="fa-solid fa-xmark"></i></button>
	    <a href="https://tunlamweb.com" target="_blank" rel="nofollow">
	        <img src="http://demo.tunlamweb.com/wp-content/uploads/2024/12/banner-pv.png" alt="Left Ad">
	    </a>
	</div>

	<div class="banner-ads right">
	    <button class="close-btn"><i class="fa-solid fa-xmark"></i></button>
	    <a href="https://tunlamweb.com" target="_blank" rel="nofollow">
	        <img src="http://demo.tunlamweb.com/wp-content/uploads/2024/12/banner-pv.png" alt="Right Ad">
	    </a>
	</div>


    <style>
	    .banner-ads {
	        position: fixed;
	        width: 120px;
	        height: 300px;
	        top: 100px;
	        z-index: 9999;
	        transform: translateX(-150%); /* Trượt ra khỏi màn hình */
	        opacity: 0;
	        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	        pointer-events: none;
	    }
	    .banner-ads.left {
	        left: 10px;
	    }
	    .banner-ads.right {
	        right: 10px;
	        transform: translateX(150%); /* Trượt ra khỏi màn hình từ bên phải */
	    }
	    .banner-ads.visible {
	        transform: translateX(0); /* Trượt vào màn hình */
	        opacity: 1;
	        pointer-events: auto;
	    }
	    .banner-ads .close-btn {
    		position: absolute;
		    top: 0;
		    right: 0;
		    background: #ff0000;
		    color: #fff;
		    border: none;
		    cursor: pointer;
		    text-align: center;
		    font-size: 10px;
		    margin: 0;
		}
		.banner-ads.left .close-btn {
		    left: 0;
		    right: auto;
		}
    </style>
    <script>
	    document.addEventListener("DOMContentLoaded", function () {
	        const leftAd = document.querySelector(".banner-ads.left");
	        const rightAd = document.querySelector(".banner-ads.right");
	        const ads = [leftAd, rightAd];

	        // Lắng nghe sự kiện cuộn trang
	        window.addEventListener("scroll", function () {
	            if (window.scrollY > 300) {
	                ads.forEach(ad => ad.classList.add("visible")); // Thêm lớp để hiển thị banner
	            } else {
	                ads.forEach(ad => ad.classList.remove("visible")); // Loại bỏ lớp để ẩn banner
	            }
	        });

	        // Xử lý sự kiện nút đóng
	        ads.forEach(ad => {
	            const closeBtn = ad.querySelector(".close-btn");
	            closeBtn.addEventListener("click", function () {
	                ad.style.display = "none";
	            });
	        });
	    });
	</script>

    <?php
}
add_action('wp_footer', 'add_banner_ads_scripts');

//Banner Left Right

function add_banner_ads_scripts() {

</a>

</div>

</a>

</div>

<style>

.banner-ads {

position: fixed;

width: 120px;

height: 300px;

top: 100px;

z-index: 9999;

transform: translateX(-150%); /* Trượt ra khỏi màn hình */

opacity: 0;

transition: transform 0.5s ease-out, opacity 0.5s ease-out;

pointer-events: none;

}

.banner-ads.left {

left: 10px;

}

.banner-ads.right {

right: 10px;

transform: translateX(150%); /* Trượt ra khỏi màn hình từ bên phải */

}

.banner-ads.visible {

transform: translateX(0); /* Trượt vào màn hình */

opacity: 1;

pointer-events: auto;

}

.banner-ads .close-btn {

position: absolute;

top: 0;

right: 0;

background: #ff0000;

color: #fff;

border: none;

cursor: pointer;

text-align: center;

font-size: 10px;

margin: 0;

}

.banner-ads.left .close-btn {

left: 0;

right: auto;

}

</style>

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

const leftAd = document.querySelector(".banner-ads.left");

const rightAd = document.querySelector(".banner-ads.right");

const ads = [leftAd, rightAd];

// Lắng nghe sự kiện cuộn trang

window.addEventListener("scroll", function () {

if (window.scrollY > 300) {

ads.forEach(ad => ad.classList.add("visible")); // Thêm lớp để hiển thị banner

} else {

ads.forEach(ad => ad.classList.remove("visible")); // Loại bỏ lớp để ẩn banner

}

});

// Xử lý sự kiện nút đóng

ads.forEach(ad => {

const closeBtn = ad.querySelector(".close-btn");

closeBtn.addEventListener("click", function () {

ad.style.display = "none";

});

</script>

<?php

}

add_action('wp_footer', 'add_banner_ads_scripts');

Tùy chỉnh thêm:

CSS: Bạn có thể tùy chỉnh vị trí, kích thước, và giao diện banner theo ý muốn trong phần CSS.
Hình ảnh: Thay thế đường dẫn hình ảnh bằng URL của banner thực tế.
Đường dẫn: Thay https://example.com bằng URL quảng cáo.

Xem thêm: Gắn Banner ADS trên header và footer cho WordPress

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