Tổng cộng:
Wordpress Popup Tạo Quảng Cáo Tặng Quà Không Cần Dùng Plugin
Đăng bởi
Thuấn Luviet
vào lúc
22/10/2024
Popup quảng cáo là một công cụ mạnh mẽ giúp thu hút sự chú ý của khách hàng, đồng thời tăng tỷ lệ chuyển đổi trên trang web. Trong bài viết này, Luviet sẽ hướng dẫn các bạn cách tạo một popup quảng cáo tặng quà trên Website WordPress sử dụng Theme Flatsome, mà không cần dùng plugin.
Popup này sẽ xuất hiện sau 3 giây khi khách hàng vào trang hoặc khi họ cuộn 50% xuống trang. Bạn cũng có thể dễ dàng tùy chỉnh popup theo nhu cầu cá nhân.
Lợi Ích Khi Tạo Popup Không Dùng Plugin
Tối ưu hiệu suất: Không cần cài thêm plugin giúp giảm tải trên website, giữ trang web của bạn nhanh và mượt mà.
Kiểm soát linh hoạt: Bạn có thể dễ dàng tùy chỉnh giao diện popup bằng UX Builder và thêm các tính năng tùy biến qua JavaScript.
Tăng tương tác: Popup này có thể giúp bạn tăng cường sự tương tác của khách hàng với trang web, từ đó tăng tỷ lệ chuyển đổi.
Hướng Dẫn Chi Tiết Cách Tạo Popup Tự Động Hiện Thị Cho Wordpress Không Dùng Plugin
Chú ý: Trong bài này tôi dùng theme flatsome, với các theme khác thì bạn cần tìm ra header và footer của web nhé.
Bước 1: Tạo UX Block Cho Popup
Đầu tiên, chúng ta sẽ sử dụng tính năng UX Blocks của theme Flatsome để tạo nội dung cho popup.
1. Tạo UX Block Mới:
- Vào WordPress Dashboard > UX Blocks > Add New.
- Đặt tên cho block, ví dụ: Popup Khuyến Mãi Tặng Quà.
- Thiết kế Block bằng Ux-Builder
- Lưu lại block sau khi thiết kế xong.
2. Lấy ID của UX Block:
- Khi chỉnh sửa block, bạn sẽ thấy ID của block trong URL. Ví dụ:
post=123. Ghi nhớ ID này để sử dụng sau.
Bước 2: Chèn Code Popup Vào Website
Chúng ta sẽ thêm một đoạn HTML và shortcode để chèn UX Block vào popup.
1. Thêm jquery.min.js vào Header Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3. Chèn code popup đầy đủ vào Footer Scripts:
Vào WordPress Dashboard > Giao diện > Tùy chỉnh > Tiện ích > Footer Scripts và dán đoạn mã HTML sau:<div id="popup-ux-block" class="popup-ux" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffd700; padding: 5px; z-index: 9999; width: 500px;">
<button id="close-popup" style="position: absolute; top: 5px; right: 0px; background: none; border: none; font-size: 18px; cursor: pointer;z-index: 9999;">×</button>
[block id="popup-tang-mau-nha"]
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// Kiểm tra xem jQuery đã tải chưa
if (typeof jQuery !== 'undefined') {
// Hiển thị popup sau 3 giây
setTimeout(function () {
jQuery('#popup-ux-block').fadeIn(); // Sử dụng fadeIn để hiển thị popup
}, 3000); // 3000ms = 3 giây
// Hiển thị popup khi cuộn 50% trang
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop(),
docHeight = jQuery(document).height(),
winHeight = jQuery(window).height(),
scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
if (scrollPercent > 50) {
jQuery('#popup-ux-block').fadeIn(); // Hiển thị popup khi cuộn qua 50% trang
}
});
// Đóng popup khi nhấn vào nút close
jQuery('#close-popup').click(function () {
jQuery('#popup-ux-block').fadeOut(); // Ẩn popup khi nút close được nhấn
});
} else {
console.error("jQuery chưa được tải. Vui lòng kiểm tra.");
}
});
</script>
Bước 3: Lưu lại và kiểm tra
Video Tạo Popup Quảng Cáo Tặng Quà Không Dùng Plugin
Cập Nhật Tính Năng Hiện Thị Popup 1 Ngày 1 Lần
Bước 1: Thêm Đoạn Mã JavaScript Với Cookies
Chỉnh sửa đoạn mã JavaScript để thiết lập cookies lưu trạng thái hiển thị popup. Mã mới sẽ kiểm tra xem cookie đã được đặt hay chưa trước khi hiển thị popup.
<script type="text/javascript">
// Hàm thiết lập cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Hàm lấy cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
document.addEventListener('DOMContentLoaded', function () {
if (typeof jQuery !== 'undefined') {
// Kiểm tra nếu cookie popup_shown chưa được đặt
if (!getCookie('popup_shown')) {
// Hiển thị popup sau 3 giây
setTimeout(function () {
jQuery('#popup-ux-block').fadeIn();
}, 3000);
// Hiển thị popup khi cuộn 50% trang
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop(),
docHeight = jQuery(document).height(),
winHeight = jQuery(window).height(),
scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
if (scrollPercent > 50) {
jQuery('#popup-ux-block').fadeIn();
}
});
// Đóng popup khi nhấn vào nút close và đặt cookie
jQuery('#close-popup').click(function () {
jQuery('#popup-ux-block').fadeOut();
setCookie('popup_shown', 'yes', 1); // Đặt cookie trong 1 ngày
});
}
} else {
console.error("jQuery chưa được tải. Vui lòng kiểm tra.");
}
});
</script>
Giải thích Mã
setCookie() và getCookie(): Đây là hai hàm để thiết lập và lấy cookie.
Kiểm tra cookie: Khi trang được tải, JavaScript sẽ kiểm tra xem có cookie tên "popup_shown" hay chưa:
Nếu cookie này chưa có, popup sẽ hiển thị.
Khi popup được đóng, mã sẽ thiết lập cookie "popup_shown" với giá trị "yes" trong 1 ngày.
Hiển thị một lần mỗi ngày: Sau khi cookie được đặt, popup sẽ không hiển thị lại cho đến khi cookie hết hạn (sau 1 ngày).
Bước 2: Kiểm Tra Popup
Lần đầu tiên: Khi bạn tải trang lần đầu tiên trong ngày, popup sẽ hiển thị.
Sau khi đóng popup: Popup sẽ không xuất hiện nữa trong cùng ngày.
Hãy đăng ký kênh và chia sẻ bài viết này lên trang của bạn để dễ dàng tìm kiếm và ủng hộ admin nhé.
Nhận xét
Đăng nhận xét