Khi bạn đang phát triển một trang web WordPress, việc tương tác với người dùng là rất quan trọng để cải thiện trải nghiệm của họ. Một trong những cách hiệu quả để thu hút sự chú ý của người dùng là sử dụng các popup thông báo. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một popup SweetAlert2 xuất hiện khi người dùng nhấp vào một nút có class là muathemewpgiare
, yêu cầu họ đăng nhập để tiếp tục.

1. Tại Sao Nên Sử Dụng Popup SweetAlert2?
SweetAlert2 là một thư viện JavaScript mạnh mẽ cho phép bạn tạo ra các popup đẹp mắt và dễ sử dụng. Với thiết kế thân thiện và khả năng tùy chỉnh cao, SweetAlert2 giúp bạn:
- Tăng cường trải nghiệm người dùng bằng cách cung cấp thông tin một cách trực quan.
- Giảm thiểu sự rối mắt so với các popup truyền thống.
- Cải thiện tỷ lệ chuyển đổi bằng cách khuyến khích người dùng thực hiện các hành động cụ thể, chẳng hạn như đăng nhập hoặc đăng ký.
2. Cài Đặt SweetAlert2
Để sử dụng SweetAlert2, bạn cần phải thêm nó vào dự án WordPress của mình. Có thể thực hiện điều này bằng cách enqueue các tệp CSS và JS trong tệp functions.php
của theme hoặc plugin.
Bước 1: Thêm Mã vào functions.php
Mở tệp functions.php
của theme mà bạn đang sử dụng và thêm đoạn mã sau:
1 2 3 4 5 6 7 | function enqueue_sweetalert2() { // Thêm CSS của SweetAlert2 wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css'); // Thêm JavaScript của SweetAlert2 wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js', array(), null, true); } add_action('wp_enqueue_scripts', 'enqueue_sweetalert2'); |
Bước 2: Kiểm Tra Cài Đặt
Đảm bảo rằng SweetAlert2 đã được thêm thành công bằng cách mở trang web của bạn và kiểm tra xem có bất kỳ lỗi nào trong Console không (F12 trên trình duyệt).
3. Tạo Nút Gọi Popup
Tiếp theo, bạn cần tạo một nút với class là muathemewpgiare
. Nút này sẽ là điểm kích hoạt để hiển thị popup khi nhấp vào.
Thêm Nút vào Template
Mở tệp template mà bạn muốn thêm nút (chẳng hạn như header.php
, footer.php
, hoặc một tệp template nào đó) và chèn mã HTML sau:
1 | <button class="muathemewpgiare">Nhấp vào đây để đăng nhập</button> |
4. Thêm JavaScript để Hiển Thị Popup
Bây giờ, chúng ta sẽ thêm mã JavaScript để xử lý sự kiện nhấp chuột và hiển thị popup SweetAlert2.
Bước 1: Thêm Mã JavaScript
Trong cùng tệp functions.php
, bạn thêm mã JavaScript như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function add_custom_script() { ?> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { // Thêm sự kiện nhấp vào nút document.querySelectorAll('.muathemewpgiare').forEach(function(button) { button.addEventListener('click', function() { // Hiển thị SweetAlert2 popup Swal.fire({ title: 'Bạn có muốn đăng nhập?', text: "Vui lòng đăng nhập để tiếp tục.", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Đăng nhập', cancelButtonText: 'Hủy' }).then((result) => { if (result.isConfirmed) { // Thực hiện hành động đăng nhập window.location.href = '/duong-dan-dang-nhap'; // Thay đổi đường dẫn đến trang đăng nhập của bạn } }); }); }); }); </script> <?php } add_action('wp_footer', 'add_custom_script'); |
Bước 2: Chạy Mã JavaScript
Mã JavaScript trên sẽ thực hiện những chức năng sau:
- Khi người dùng nhấp vào nút, một popup SweetAlert2 sẽ hiển thị với tiêu đề và thông điệp yêu cầu đăng nhập.
- Nếu người dùng nhấn “Đăng nhập”, họ sẽ được chuyển hướng đến trang đăng nhập mà bạn đã chỉ định.
Với chỉ một vài bước đơn giản, bạn đã có thể tạo một popup SweetAlert2 yêu cầu người dùng đăng nhập trong WordPress. Điều này không chỉ giúp cải thiện trải nghiệm người dùng mà còn khuyến khích họ thực hiện các hành động mong muốn trên trang web của bạn.
Hãy thử nghiệm và tùy chỉnh thêm các yếu tố trong popup như hình ảnh, nút, và màu sắc để làm cho nó phù hợp hơn với phong cách của trang web bạn. Nếu bạn có bất kỳ câu hỏi nào hoặc cần hỗ trợ thêm, hãy để lại bình luận bên dưới!
6. Lưu Ý
- Kiểm tra Đường Dẫn: Đảm bảo đường dẫn trong
window.location.href
chính xác và dẫn đến trang đăng nhập của bạn. - Kiểm tra Trình Duyệt: Mở Console trong trình duyệt (F12) để theo dõi lỗi nếu popup không hoạt động như mong đợi.
- Tương Thích Plugin: Nếu bạn đang sử dụng nhiều plugin khác, hãy chắc chắn rằng không có xung đột nào gây ra sự cố với SweetAlert2.