Hướng dẫn popup thông báo html

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

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 .

×
Thông Báo!
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

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 .

function wsupopup[]{
document.getElemenwsu-yId["wsu-popup-1"].classList.toggle["active"];
}

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 [] { ?>
    
    
    function wsupopup[]{
    document.getElemenwsu-yId["wsu-popup-1"].classList.toggle["active"];
    }