Tạo Popup “Click – Open” trong WordPress

Cập nhật: 18/06/2019

Popup “Click – Open” là gì?

Là khi ai đó bấm chuột vào một vị trí nhất định trên website, popup thông báo, đăng ký thông tin, tải ebook,….sẽ bật ra 🙂

Hướng dẫn tạo Popup “Click – Open” trong WordPress

Popup sẽ cho phép ta tạo một điều kiện, rồi ta gắn điều kiện này vào một vị trí cố định trên website. Khi ai đó bấm chuột vào đó, Popup sẽ bật ra Popup đã tạo sẵn.

Nói theo kĩ thuật thì Popup cho phép tạo một Popup với CSS Class. Bạn cần gắn Class này vào vị trí bạn muốn trên website. Khi ai đó bấm chuột vào Element HTML chứa Class. Popup Maker sẽ chạy hàm để bật ra Popup.

1. Tạo Popup

Đầu tiên bạn cần tạo một Popup cho WordPress bằng Popup Maker trước đã. Nhớ không thiết lập Trigger nhé!

2. Tạo Trigger

Kéo xuống phía dưới Popup đang tạo, bấm Triggers > Add New Trigger

Chọn Click Open > Add

Điền vào Extra CSS Selectors, điền .click-open hoặc từ gì cũng được, nhưng chú ý điều bên dưới

Nhớ điền chữ không dấu, chữ cái, có thể ngăn cách nhau bằng dấu gạch ngang. Và nhớ là có dấu chấm ở đầu tiên.

Bấm Add.

3. Điền Extra CSS Selector vào vị trí được chỉ định

Tiếp theo ta cần điền Extra CSS Selector đã tạo ở trên, vào vị trí nào đó trên web. Để khi ai đó bấm vào vị trí này, Popup sẽ bật ra.

Mình sẽ lấy ví dụ cho cách chèn vào Menu và Sidebar

3.1. Menu

Truy cập vào Menu, và tạo một Menu ItemLiên kết tự tạo với URL#Tên đường dẫn là Đăng ký

Nhìn lên góc phải phía trên và chọn Tùy chọn hiển thị > Đánh dấu vào Lớp CSS (hoặc CSS Class)

Bạn sẽ thấy mục Lớp CSS (hoặc CSS Class) xuất hiện. Điền vào

Nhớ không điền dấu chấm phía trước nhá! Hơi khác tí so với phía trên.

Nếu bạn biết CSS thì sẽ lý giải điều này. Nếu bạn không biết CSS, cũng không cần quan tâm đâu.

Rồi, lưu lại Menu, và ra ngoài website và thử bấm vào Menu đăng ký đi. Popup sẽ bật ra luôn :).

3.2. Sidebar

Để ai đó bấm vào Sidebar và bật ra Popup, bạn chèn một Widget là HTML tùy chỉnh vào Sidebar.

Sau đó điền dòng code tương tự bên dưới vào.

Bạn điền gì cũng được, nhưng nhớ phải có class=”click-open”

Kết quả bạn sẽ được một Popup như này.

Thử bấm vào đi. Popup sẽ bật ra.

Bài ngày khá ngắn gọn. Nếu bạn biết CSS, bạn sẽ hiểu ngay bài viết.

Trường hợp bạn đọc mà không hiểu, hãy tham gia nhóm WordPress cho Newbie, đăng bài, và mình sẽ hỗ trợ nhé!