Code popup quảng cáo tự động xuất hiện

Đối với những người sử dụng WordPress đôi khi có những tính năng rất đơn giản, như hiển thị tự động 1 cái popup sau 1 khoảng thời gian nào đó để thông báo đến khách hàng chương trình mà mình đang có trong tháng, thì thường rất là phổ biến. Nhưng đôi khi đối với chúng ta thường sử dụng các plugin để tạo chúng, thì điều đó đôi khi không tốt, vì chúng ta không sử dụng hết được toàn bộ tính năng của plugin, mặt khác sẽ làm website của chúng ta nặng hơn và sẽ gây hại đến website nếu sử dụng các plugin Không an toàn. Thì nay mình xin chia sẽ đoạn code để giúp các bạn làm điều đó đơn giản hơn.

Chúng ta copy đoạn code sau bỏ vào file functions.php của theme.

Lưu ý: chúng ta nên tải jquery về website để tăng tốc độ load lên, ở đây mình có dẫn link về để tránh trường hợp 1 số bạn không biết dùng.

ở đây chỉ là 1 số đoạn code mà chúng là thường xuyên sử dụng và nhỏ, nên mình sẽ không viết thành plugin mà để shortcode để mọi người dễ sử dụng và nhẹ website hơn.

 // Popup Quang cáo
function popup_form() { ?>
    <style>
		.backPopup{
			display:none;
			z-index:9999999;
			position: fixed;
			top: 45%;
			right: 0;
			background-color: #269d63;
			padding: 10px;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}
i{
	cursor:pointer;
}
.backPopup i{
	cursor:pointer;
	font-size: 16px;
    color: #fff;
}
.popupContainer{
	    width: 350px;
    position: fixed;
    z-index: 999999;
    top: 25%;
    background-color: #269d63;
    right: -50%;
	opacity:0;
    padding: 5px;
	border-radius:4px;
}
.popupContainer .title{
	color:#ffffff;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	font-size:18px;
	margin-bottom:0;
	line-height: 1.3em;
}
.popupContainer .description{
	margin-bottom:10px;
	color:#ffffff;
	line-height: 1.3em;
	text-align:center;
}
.popupContainer input{
	border-radius:4px;
	background-color:#ffffff;
}
.popupContainer textarea{
		border-radius:4px;
	min-height: 70px;
}
.popupContainer textarea::placeholder, .popupContainer input::placeholder{
  color: #000000;
}

.popupContainer .wpcf7 input[type="submit"] {
	background-color:#ffffff !important;
	color:#000000;
}

.popupContainer .wpcf7 input[type="submit"]:hover {
	
	color:#dd3333 !important;
}
.popupClose{
	    display: block;
    position: absolute;
       top: 2px;
    left: 6px;
}
.popupClose i{
	font-size: 24px;
    color:  #269d63;
}</style>
    <div class="popupContainer" id="popupContainer">
        <div class="popupBox">
            <div class="popupClose" id="popupClose"><i class="fas fa-times"></i></div>
            
            <div class="formPopup">
                <a href="#">
					<img src="/wp-content/uploads/2020/09/lai-suat-cho-vay-mua-nha-1.jpg">
				</a>
            </div>
        </div>
        
    </div>
    <div class="backPopup" id="backPopup"><i class="fas fa-angle-double-left"></i></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
   
          $("#popupClose").click(function(){
            $("#popupContainer").animate({right:'-50%', opacity: '0.1',	visibility:'hidden'}, "slow");
            $("#backPopup").show("slow");
          });
           $("#backPopup").click(function(){
               $("#backPopup").hide();
            $("#popupContainer").animate({right:'0', opacity: '1', visibility:'visible'}, "slow");
            
          });
           setInterval(function(){  $("#popupContainer").animate({right:'0', opacity: '1', visibility:'visible'}, "slow"); $("#backPopup").hide();}, 15000);
        });

    </script>
<?php }
add_action( 'wp_footer', 'popup_form' );