Tạo popup banner wordpress bằng code và plugin mới nhất

Contents

1 Hướng dẫn tạo popup cho website bằng plugin miễn phí của wordpress
2 Xem video hướng dẫn tại đây
3 Hướng dẫn tạo popup cho website bằng code cực nhanh
- 3.1 Bài viết liên quan

Hướng dẫn tạo popup cho website bằng plugin miễn phí của wordpress

Cài đặt plugin :

Tại trang quản trị của wordpress, bạn truy cập Plugin–> cài mới.
Tại ô tìm kiếm, bạn tìm kiếm từ khóa “popup”
Bạn tìm plugin tên ” Popup Maker”, bạn ấn “cài đặt”, đợi khoảng 30s để wordpress cài đặt sau đó bạn ấn nút “kích hoạt” để kích hoạt plugin trên website của bạn.
Thêm: Tích hợp live chat facebook vào website

Tạo popup mới

Sau khi kích hoạt Popup Maker, ở menu quản trị wordpress của bạn sẽ có thêm menu mới tên “Popup Maker”, bạn truy cập vào đây chọn ” Add Popup” để thêm popup mới.

Giao diện tạo popup mới cũng tương tự như thêm bài viết mới:

Bạn đặt tiêu đề cho popup(Popup Name)
Có thể bỏ qua phần tiêu đề của popup ( Popup Title)
Phần soạn thảo văn bản phía dưới chính là phần nội dung cho popup, bạn có thể chèn chữ, chèn ảnh, video, form liên hệ hay bất cứ thứ gì bạn muốn- tại ví dụ dưới mình chỉ chèn hình ảnh( rộng 600px) sau đó chèn link vào hình ảnh để các bạn dễ hiểu, dễ làm theo ???

Quy định hiển thị popup

Các bạn kéo xuống dưới phần soạn thảo văn bản, sẽ có phần “popup seting”.

1. Triggers : Để hiển thị bạn cần phải làm bước này, popup tự động hiển thị khi website load, bạn ấn nút “Add New Triggers” .

Bạn chuyển từ “Click To Open” thành “Time Delay/ Auto Open”
Tick chọn “Would you like to set up a cookie as well”, phía dưới chọn “On Popup Close” – mục đích của việc này là tạo cookie cho khách hàng, sau khi họ đóng popup của bạn, popup sẽ không hiển thị sau một thời gian( mà bạn quy định) với khách hàng đó.
Ấn ” Add”.

Tại cửa sổ tiếp theo, bạn quy định thời gian khi popup hiển thị sau khi website load xong ( Delay), ở đây mình điền 5000(ms), tương đương với 5s, bạn ấn “Add” 1 lần nữa để hoàn tất việc cài đặt Trigger cho Popup.
2.Targeting : Quy định popup hiển thị ở nội dung nào, nếu bạn muốn popup hiển thị trên toàn bộ website, bạn có thể bỏ qua bước này.

3. Display: Quy định hiển thị của Popup

Appearance: Chọn giao diện, bạn nên để mặc định cho bớt rối ?
Size: kích thước của popup, cái này cũng hơi rối để cài cho đúng , vì thế bạn cứ chọn “Auto”tại menu lựa chọn cho dễ
Animation: hiệu ứng khi popup xuất hiện, cái này không quan trong, bạn chọn cái nào cũng dc
Position: vị trí popup xuất hiện, chọn Location là ” Middle Center” để popup xuất hiện phía giữa màn hình
Close: bạn có thể thay chữ “close ” bằng chữ gì mà bạn muốn( “Đóng” “X”..)
Advanced: bạn có thể bỏ qua.

Giờ thì bạn có thể ấn nút “Đăng” để Popup chạy trên website, tuy nhiên popup hiển thị sẽ khá là… không đẹp, bạn sẽ cần chỉnh 1 chút chút nữa để hoàn thiện Popup này.

Tùy chỉnh Theme (giao diện) hiển thị của popup

Tại giao diện quản trị wordpress, bạn vào “Popup Maker” –> “Popup Themes”, Tìm “Default Theme” rồi chọn chỉnh sửa, bạn chú ý chọn những thông số sau:

(1) Trong ảnh là để vào chỉnh sửa các theme mẫu
(2) Trong ảnh là khi tạo popup mới thì chọn sử dụng mẫu mà bạn muốn sửa dụng

Xem video hướng dẫn tại đây

Hướng dẫn tạo popup cho website bằng code cực nhanh

Rất đơn giản và nhanh chóng, bạn chèn code sau và phần <head> của theme hoặc <footer.php> của theme là xong
Có 2 trường bạn cần quan tâm
link_image : Bạn sẽ nhập link hình ảnh vào đây, do là popup nên ảnh phải tách nền, đuôi file là .png thì mới hiển thị đẹp
link: là trang đích khi người dùng click vào hình ảnh này họ sẽ được dẫn tới.

<script>

var link_image = 'link_image';

var link = 'link';

var icon_close = ' https://kiot37.com/wp-content/uploads/2019/12/0-15.png';

function closePopupBeta(){document.getElementById("popup_banner_beta").remove(),setCookie("showPopupBannerBeta",1,1)}function setCookie(e,n,o){var t="";if(o){var i=new Date;i.setTime(i.getTime()+24*60*60*1000),t="; expires="+i.toUTCString()}document.cookie=e+"="+(n||"")+t+"; path=/"}function getCookie(e){for(var n=e+"=",o=document.cookie.split(";"),t=0;t<o.length;t++){for(var i=o[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(n))return i.substring(n.length,i.length)}return null}1!=getCookie("showPopupBannerBeta")&&(document.addEventListener("DOMContentLoaded", function(event) { var e='<div id="popup_banner_beta"><div onclick="closePopupBeta()" class="mask_popup_banner_beta"></div><div class="content_popup_banner_beta"><img src="'+icon_close+'" class="close_icon" onclick="closePopupBeta()" alt="Close Image"><a href="'+link+'"><img src="'+link_image+'" alt="Image Popup Banner"/></a></div></div>';setTimeout(function(){document.body.innerHTML+=e},3000)}));

</script>

<style>

#popup_banner_beta{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0}.mask_popup_banner_beta{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}.content_popup_banner_beta{position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.close_icon{position:absolute;top:-70px;right:-60px;width:70px;cursor:pointer}@media only screen and (max-width:480px){.content_popup_banner_beta{width:300px}.content_popup_banner_beta a img:nth-of-type(1){width:100%}.close_icon{top:-60px;right:-20px;width:50px}}

</style>

Đối với người dùng theme flatsome thì bạn chỉ cần thêm và mục Advanced > FOOTER SCRIPTS Hoặc HEAD SCRIPTS như sau