Khi sử dụng củng như quản trị một website đến các ngày lễ lớn trong năm, các dịp khuyến mãi lớn trong năm hoặc khi chúng ta đang cần hiển thị 1 thông báo bằng chữ hoặc bằng hình ảnh cho website của bạn để giúp cho người dùng có thể dễ dàng nhận được những thông báo cực kỳ quan trọng mà không phải bỏ lỡ. Sau đây mình xin chia sẻ cách để tạo ra một bảng thông báo popup đơn giãn và cực kỳ nhẹ nhàng mà không cần sử dụng đến plugin.
Sử dụng dành riêng cho website WordPress
Bước 1
Đầu tiên các bạn cần mở file header.php trong thư mục theme mà bạn đang sử dụng lên.
Tìm tới thẻ mở <body> các bạn thêm vào cho mình đoạn code
onload="wsupopup()"
và lúc này thẻ mở body của bạn sẽ
<body onload="wsupopup()">
Bước 2
Mở file footer.php trong thư mục theme mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới, ngay trên thẻ đóng </body>.
<!-- Popup Thong Bao --> <div class="wsu-popup" id="wsu-popup-1"> <div class="wsu-overlay"></div> <div class="wsu-content"> <div class="wsu-close-btn" onclick="wsupopup()">×</div> <div style="font-size:30px;font-weight:bold">Thông Báo!</div> <p>Xin Chào! Cảm ơn bạn đã ghé thăm website WebStartup.net, chúc bạn một ngày tốt lành</p> <img src="https://webstartup.net/wp-content/uploads/2018/03/du-an-da-thuc-hien-webstarup.jpg">
Chú ý: với đoạn code ở trên, bạn hãy thay đổi nội dung Popup thông báo theo nhu cầu của mình nhé.
Tiếp tục thêm đoạn code bên dưới, ngay dưới thẻ đóng </body>.
<!-- js popup -->
<script>
function wsupopup(){
document.getElemenwsu-yId("wsu-popup-1").classList.toggle("active");
}
</script>
Hoặc để dể quản lý code tránh khi Update Themes bị mất code mình thường sử viết code trong file functions.php
add_action( 'wp_footer', function () { ?>
<!-- js popup -->
<script>
function wsupopup(){
document.getElemenwsu-yId("wsu-popup-1").classList.toggle("active");
}
</script>
<?php } );
Lưu ý làm theo hình thì nên sẽ gọi hàm PopupPage ở file footer.php cú pháp như sau:
<?php PopupPage(); ?>
Bước 3
Cuối cùng bạn mở file CSS style.css trong thư mục theme (hoặc child theme) mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới.
/***Css Popup***/
.wsu-popup .wsu-overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.wsu-popup .wsu-content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
max-width:500px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
border-radius:20px;
display: block;
position: fixed;
box-shadow:0px 0px 10px #111;
}
@media (max-width: 700px) {
.wsu-popup .wsu-content {width:90%;}
}
.wsu-popup .wsu-close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:35px;
height:35px;
color:#ff4444;
font-size:30px;
font-weight:600;
line-height:35px;
text-align:center;
border-radius:50%;
}
.wsu-popup.active .wsu-overlay {
display:block;
}
.wsu-popup.active .wsu-content {
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
.wsu-buttom{background:#00cc00;color:#fff}
Và sau khi đã thêm 3 bước như trên, xóa cache của Các Plugin tạo Cache WordPress nếu bạn có sử dụng, nhấn CTRL + F5 để trình duyệt tải lại trang web của bạn và xem kết quả nhé!
Lưu ý quan trọng:
Với cách làm này thì popup thông báo sẽ xuất hiện ở tất cả các trang trên trang web của bạn. Nếu bạn chỉ muốn popup chỉ hiển thị duy nhất ở trang chủ, thì thêm đoạn code ở Bước 2 vào trong thẻ if bên dưới.
<?php if( is_home() ) { ?> .. code .. <?php } ?>
Code sau khi thêm vào sẽ có dạng như sau:
<?php if( is_home() ) { ?>
<div class="wsu-popup" id="wsu-popup-1">
<div class="wsu-overlay"></div>
<div class="wsu-content">
<div class="wsu-close-btn" onclick="wsupopup()">×</div>
<div style="font-size:30px;font-weight:bold">Xin chào</div>
<p>Cảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!</p>
</div>
</div>
<?php } ?>
Như vậy là mình đã hướng dẫn xong các bạn cách để thêm một popup thông báo vào website WordPress một cách đơn giản nhất . Chúc bạn thành công!
