Hiển thị cảnh báo 18 tuổi trong WordPress

Hiện thị thông báo bằng Java và css trong WordPress là một cách tuyệt vời để tương tác với người dùng, cung cấp thông tin quan trọng hoặc nhắc nhở về các sự kiện sắp tới. Việc sử dụng JavaScript và CSS để tạo các thông báo này giúp chúng trở nên sinh động và dễ dàng tùy chỉnh. Đặc biệt làm cảnh báo với những yêu đặc biệt yêu cầu người trên 18 tuổi, cảnh báo dịch vụ theo Bộ Công Thương yêu cầu đối với những dịch vụ Đặc biệt. Để biết cách làm vui lòng đọc hết bài này nhé

Hiện thị cảnh báo 18 tuổi trong WordPress

Theo yêu cầu 1 bảng cảnh báo hiện thị như hình, khi bấm dưới 18 Tuổi có thể load lại trang hoặc chuyển hướng. Còn Khi bấm đủ 18 tuổi thì sẽ Ẩn và không hiện lại nữa.

Để hiện thị thông báo bằng JavaScript và CSS trong WordPress, bạn có thể thực hiện theo các bước sau:

Bạn có thể vào theme chèn code này vào File Function.php của theme đang dùng

// Code Hiện thị cảnh báo 18 tuổi 
function add_custom_html_to_footer() {
?>
<div class="popup-custom popup-check">
<div class="overlay_popup"></div>
<div class="popup-content">
<h3>WELCOME TO Vinawinecellar </h3>
<p>Các Sản Phẩm Của Vina Wire 36 <br>Không Dành Cho Phụ Nữ Mang Thai <br>Và Người Dưới 18 Tuổi </p>
<div class="list-image">
<div class="img">
<div class="image-cover">
<img src="/wp-content/uploads/2024/06/age-women.png" alt="anh">
</div>
</div>
<div class="img">
<div class="image-cover">
<img src="/wp-content/uploads/2024/06/age-wine.png" alt="anh">
</div>
</div>
<div class="img">
<div class="image-cover">
<img src="/wp-content/uploads/2024/06/age-18.png" alt="anh">
</div>
</div>

</div>
<p class="age-gate-challenge">Vui Lòng Lựa Chọn</p>
<div class="btn-action">
<button class="age-gate-submit-yes">Đủ 18 tuổi</button>
<button class="age-gate-submit-no">Dưới 18 tuổi</button>
</div>
</div>
</div>
<script>
(function($) {
$(document).ready(function() {
if (localStorage.getItem('tuoi') !== '18') {
$('.popup-check').addClass('show');
}


$('.age-gate-submit-yes').on('click', function() {
localStorage.setItem('tuoi', '18');
$('.popup-check').removeClass('show');
});


$('.age-gate-submit-no').on('click', function() {
alert('Nội dung này không phù hợp với độ tuổi của bạn!');
});
})
})(jQuery)
</script>
<?php
}
add_action('wp_footer', 'add_custom_html_to_footer');

Giải thích code làm Hiện thị thông báo bằng Java và css: 

• Ở đoạn trện sẽ hook vào foot 1 bảng html và 1 đoạn java
• Đoạn code sẽ hoạt động được cần phải chèn code css bên dưới nhé

Thêm CSS cho Thông Báo

Chèn code CSS vào custom của theme đang dùng hoặc file (ví dụ file style.css của theme ) –  thêm mã sau:

popup-custom{
position: fixed;
width: 100%;
height: 100vh;
display: none;
justify-content: center;
align-items: center;
z-index: 9999999999;
top: 0;
left: 0;
}
.popup-custom.show {
display: flex;
}
.popup-custom .overlay_popup {
position: absolute;
top: 0;
left: 0;
background-color: #00000040;
width: 100%;
height: 100vh;
z-index: 999999999;
cursor: pointer;
}
.popup-custom .popup-content {
position: absolute;
z-index: 9999999999;
background-color: #fff;
border-radius: 0.4rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 550px;
height: auto;
text-align: center;
padding: 30px;
}
.popup-check .list-image{
display:flex;
justify-content: space-around;
margin-bottom: 15px;
}
.popup-check .popup-content h3{
color: #dd3333;
font-size: 30px;
margin-bottom: 6px;
}
.popup-check .popup-content p:first-of-type{
color:#3966f4;
font-size: 18px;
font-weight: 600;
}
.popup-check .list-image .img{
width: 120px;
}
.popup-check .age-gate-challenge{
color: #dd3333;
font-size: 22px;
font-weight: 600;
margin-bottom: 12px;
}
.popup-check .btn-action button{
margin: 0;
height: 52px;
display: inline-flex;
align-items: center;
padding: 0 24px;
font-size: 20px;
text-transform: none;
border-radius: 8px;
color: #fff;
font-weight: 500;
}
.popup-check .btn-action .age-gate-submit-yes{
background: #0047ff;
border: 2px solid #0047ff;
}
.popup-check .btn-action .age-gate-submit-no{
background: #dd3333;
border: 2px solid #dd3333;

}
.popup-check .btn-action{
display:flex;
justify-content:center;
gap:15px

}
.popup-check .btn-action .age-gate-submit-yes:hover{
background-color: #fff;
color: #0047ff;
}
.popup-check .btn-action .age-gate-submit-no:hover{
background: #fff;
color: #dd3333;

}

@media screen and (max-width: 767.98px) {
.popup-custom .popup-content {
padding: 20px 15px;
}
.popup-check .popup-content h3{
font-size: 20px;
}
.popup-check .popup-content p:first-of-type{
font-size:16px
}
.popup-check .age-gate-challenge{
font-size:18px;
}
.popup-check .btn-action button{
padding: 0 20px;
font-size: 16px;
height: 28px;
}
.popup-check .list-image .img{
width:100%
}
.popup-check .list-image{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 15px;
}
}

CSS này sẽ định dạng cho thông báo, làm cho nó nổi bật và dễ nhìn. Bắt buộc phải thêm css thì Form mới hoạt động nhé

Đến đây bạn chỉ việc lưu lại và test thôi, Form Hiện thị thông báo bằng Java và css có thể áp dụng cho những trang web bán Rượu hoặc những hàng hóa yêu cầu người trên 18 tuổi mới mua được, Và là điều kiện bắt buộc của Bộ Công Thương nhé