Hiện thị thông báo bằng Java và css trong wordpress 2024

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ị thông báo bằng Java và css trong wordpress

Cách Thực Hiện Hiện thị thông báo bằng Java và css 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.

Update WordPress 6.6 có gì mới ? – Hiện thị thông báo bằng Java và css trong wordpress

Để 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ịn cảnh báo 18 tuổi - flatsome.xyz
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');

// Code Hiện thịn cảnh báo 18 tuổi - flatsome.xyz

function add_custom_html_to_footer() {

<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>

</div>

</div>

</div>

(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é

2. 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;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

.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é

Demo cho anh em xem nhé https://vinawine36.vn/

Kết Luận Hiện thị thông báo bằng Java và css

Việc hiện thị thông báo bằng JavaScript và CSS trong WordPress không chỉ giúp cải thiện trải nghiệm người dùng mà còn dễ dàng tùy chỉnh theo nhu cầu của bạn. Bạn có thể thay đổi nội dung, kiểu dáng hoặc thời gian hiển thị của thông báo để phù hợp hơn với website của mình. Hãy thử nghiệm và sáng tạo để có những thông báo hấp dẫn nhất!

Cũng là 1 đoạn code nhỏ tuy nhiên muốn chia sẽ ít nhiều đến anh em, Chúc mọi người làm thành công nhé. Rất mong được mọi người ủng hộ ah