Gắn Banner ADS Trên Header Và Footer Cho Wordpress

Để gắn Banner ADS trên header và footer (banner dưới sẽ cố định và cuộn theo màn hình) trong WordPress, bạn có thể làm theo các bước sau:

Gắn Banner ADS trên header và footer cho WordPress

Thêm HTML banner vào Header

Sử dụng hook wp_head để chèn đoạn HTML vào file fuctions.php hoặc gắn trực tiếp trên header.php:

// Thêm banner vào header
function add_header_banner() {
    ?>
    <div class="header-banner">
        <button class="close-banner" onclick="closeHeaderBanner()"><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-ads.png" alt="Quảng cáo">
        </a>
    </div>
    <style>
		.header-banner {
		    position: relative;
		    text-align: center;
		    width: 100%;
		}
        .header-banner img {
            width: 100%;
            height: auto;
        }
		.header-banner .close-banner {
		    position: absolute;
		    background-color: #ff0000;
		    color: #fff;
		    border: none;
		    top: 0;
		    right: 0;
		    font-size: 10px;
		    cursor: pointer;
		    z-index: 1000;
		    margin: 0;
		}
    </style>
<script>
    function closeHeaderBanner() {
        const banner = document.querySelector(".header-banner");
        if (banner) {
            banner.style.display = "none";
            localStorage.setItem("hideHeaderBanner", "true"); // Lưu trạng thái
        }
        // Mở link trong tab mới
        window.open("https://tunlamweb.com", "_blank"); // Link cần chuyển
    }

    document.addEventListener("DOMContentLoaded", function () {
        if (localStorage.getItem("hideHeaderBanner") === "true") {
            const banner = document.querySelector(".header-banner");
            if (banner) {
                banner.style.display = "none";
            }
        }
    });
</script>
    <?php
}
add_action('wp_head', 'add_header_banner');

// Thêm banner vào header

function add_header_banner() {

</a>

</div>

<style>

.header-banner {

position: relative;

text-align: center;

width: 100%;

}

.header-banner img {

width: 100%;

height: auto;

}

.header-banner .close-banner {

position: absolute;

background-color: #ff0000;

color: #fff;

border: none;

top: 0;

right: 0;

font-size: 10px;

cursor: pointer;

z-index: 1000;

margin: 0;

}

</style>

function closeHeaderBanner() {

const banner = document.querySelector(".header-banner");

if (banner) {

banner.style.display = "none";

localStorage.setItem("hideHeaderBanner", "true"); // Lưu trạng thái

}

// Mở link trong tab mới

window.open("https://tunlamweb.com", "_blank"); // Link cần chuyển

}

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

if (localStorage.getItem("hideHeaderBanner") === "true") {

const banner = document.querySelector(".header-banner");

if (banner) {

banner.style.display = "none";

}

});

</script>

<?php

}

add_action('wp_head', 'add_header_banner');

Thêm HTML banner vào Footer

Sử dụng hook wp_footer để chèn đoạn HTML vào file fuctions.php hoặc gắn trực tiếp trên header.php:

// Thêm banner vào footer
function add_footer_banner() {
    ?>
    <div class="footer-banner">
        <button class="close-banner" onclick="closeFooterBanner()"><i class="fa-solid fa-xmark"></i></button>
        <a href="https://link-quang-cao-cua-ban.com" target="_blank">
            <img src="https://duong-dan-den-banner-gif-cua-ban.gif" alt="Quảng cáo">
        </a>
    </div>
    <style>
        .footer-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            text-align: center;
            padding: 5px 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
        }
        .footer-banner img {
            max-width: 100%;
            height: auto;
        }
        .footer-banner .close-banner {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #ff0000;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 14px;
            cursor: pointer;
            z-index: 1000;
        }
    </style>
    <script>
        function closeFooterBanner() {
            const banner = document.querySelector(".footer-banner");
            if (banner) {
                banner.style.display = "none";
                localStorage.setItem("hideFooterBanner", "true"); // Lưu trạng thái
            }
        }
        document.addEventListener("DOMContentLoaded", function () {
            if (localStorage.getItem("hideFooterBanner") === "true") {
                const banner = document.querySelector(".footer-banner");
                if (banner) {
                    banner.style.display = "none";
                }
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_footer_banner');

// Thêm banner vào footer

function add_footer_banner() {

</a>

</div>

<style>

.footer-banner {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

background: rgba(255, 255, 255, 0.9);

z-index: 9999;

text-align: center;

padding: 5px 0;

box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);

}

.footer-banner img {

max-width: 100%;

height: auto;

}

.footer-banner .close-banner {

position: absolute;

top: 5px;

right: 5px;

background-color: #ff0000;

color: #fff;

border: none;

border-radius: 50%;

width: 20px;

height: 20px;

font-size: 14px;

cursor: pointer;

z-index: 1000;

}

</style>

function closeFooterBanner() {

const banner = document.querySelector(".footer-banner");

if (banner) {

banner.style.display = "none";

localStorage.setItem("hideFooterBanner", "true"); // Lưu trạng thái

}

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

if (localStorage.getItem("hideFooterBanner") === "true") {

const banner = document.querySelector(".footer-banner");

if (banner) {

banner.style.display = "none";

}

});

</script>

<?php

}

add_action('wp_footer', 'add_footer_banner');

Lưu ý

localStorage được sử dụng để lưu trạng thái tắt banner trên trình duyệt. Nếu người dùng nhấn “X”, banner sẽ không hiển thị lại cho đến khi làm mới localStorage hoặc chuyển trình duyệt.
Các đoạn mã CSS và JavaScript được nhúng trực tiếp cùng với HTML để đảm bảo hoạt động trơn tru.

Xem thêm: HTML/CSS 2 Robot bay lên bay xuống cho banner

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