Hướng Dẫn Sử Dụng SweetAlert2 Để Tạo Thông Báo Đẹp Trong WordPress: Chi Tiết

Trong thế giới thiết kế web WordPress, việc hiển thị thông báo (alert, confirmation, toast) đẹp mắt và chuyên nghiệp là yếu tố quan trọng để nâng cao trải nghiệm người dùng (UX). Thay vì dùng alert() mặc định của JavaScript – thô sơ và kém responsive – SweetAlert2 là lựa chọn hàng đầu: đẹp, tùy chỉnh cao, hỗ trợ animation, icon, input, và hoàn toàn miễn phí (MIT license).

SweetAlert2 phiên bản mới nhất (11.26.17 tính đến tháng 12/2025) hỗ trợ theme built-in (dark, minimal, bootstrap, wordpress-admin,…), toast notification, và accessible (WAI-ARIA). Nó được hơn 2.000 dự án sử dụng trên npm và tích hợp dễ dàng với WordPress (Flatsome, Elementor, WooCommerce).

Bài viết này hướng dẫn 2 cách tạo thông báo SweetAlert2:

1. Code thuần (không dùng plugin) – Linh hoạt, nhẹ, kiểm soát 100%.
2. Dùng plugin – Nhanh chóng, dành cho form (Contact Form 7, Elementor).

(Minh họa: Các ví dụ popup SweetAlert2 – alert success, confirmation, input modal.)

Lý Do Nên Dùng SweetAlert2 Trong WordPress

• Đẹp hơn alert mặc định 10 lần.
• Responsive 100% trên mobile.
• Hỗ trợ toast (thông báo nhỏ góc màn hình).
• Tùy chỉnh icon, button, timer, HTML content.
• Không phụ thuộc jQuery (phiên bản mới).
• Tích hợp dễ với WooCommerce (thêm giỏ hàng thành công), login, delete post,…

Cách 1: Code Thuần – Enqueue SweetAlert2 Qua Child Theme (Không Plugin)

Phương pháp này nhẹ nhất, không tăng số lượng plugin, và bạn kiểm soát phiên bản.

Bước 1: Tạo Child Theme (Nếu Chưa Có)

• Tạo thư mục wp-content/themes/yourtheme-child.
• File style.css và functions.php cơ bản.

Bước 2: Enqueue SweetAlert2 Từ CDN

Dán code sau vào functions.php của Child Theme:

PHP function enqueue_sweetalert2() { // Enqueue CSS wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.min.css', array(), '11.26.17'); // Enqueue JS wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.all.min.js', array(), '11.26.17', true); } add_action('wp_enqueue_scripts', 'enqueue_sweetalert2'); // Optional: Enqueue cho admin dashboard // add_action('admin_enqueue_scripts', 'enqueue_sweetalert2'); 1234567891011 function enqueue_sweetalert2() {    // Enqueue CSS    wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.min.css', array(), '11.26.17');     // Enqueue JS    wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.26.17/dist/sweetalert2.all.min.js', array(), '11.26.17', true);}add_action('wp_enqueue_scripts', 'enqueue_sweetalert2'); // Optional: Enqueue cho admin dashboard// add_action('admin_enqueue_scripts', 'enqueue_sweetalert2');

(Minh họa: Ví dụ enqueue script trong functions.php và admin dashboard WordPress.)

Bước 3: Sử Dụng SweetAlert2 Trong Code

• Thông báo đơn giản (thêm vào file JS hoặc inline script):

JavaScript Swal.fire({ title: 'Thành công!', text: 'Sản phẩm đã thêm vào giỏ hàng.', icon: 'success', confirmButtonText: 'OK', timer: 3000, timerProgressBar: true }); 12345678 Swal.fire({    title: 'Thành công!',    text: 'Sản phẩm đã thêm vào giỏ hàng.',    icon: 'success',    confirmButtonText: 'OK',    timer: 3000,    timerProgressBar: true});

• Confirmation trước khi xóa (ví dụ nút delete):

HTML <button>Xóa</button> <script> document.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', function() { Swal.fire({ title: 'Bạn chắc chắn?', text: 'Không thể khôi phục!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Xóa', cancelButtonText: 'Hủy' }).then((result) => { if (result.isConfirmed) { // Thực hiện xóa (AJAX hoặc submit form) Swal.fire('Đã xóa!', '', 'success'); } }); }); }); </script> 123456789101112131415161718192021 <button>Xóa</button> <script>document.querySelectorAll('.delete-btn').forEach(btn => {    btn.addEventListener('click', function() {        Swal.fire({            title: 'Bạn chắc chắn?',            text: 'Không thể khôi phục!',            icon: 'warning',            showCancelButton: true,            confirmButtonText: 'Xóa',            cancelButtonText: 'Hủy'        }).then((result) => {            if (result.isConfirmed) {                // Thực hiện xóa (AJAX hoặc submit form)                Swal.fire('Đã xóa!', '', 'success');            }        });    });});</script>

• Toast notification (thông báo nhỏ góc màn hình):

JavaScript const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true }); Toast.fire({ icon: 'info', title: 'Đăng nhập thành công!' }); 123456789101112 const Toast = Swal.mixin({    toast: true,    position: 'top-end',    showConfirmButton: false,    timer: 3000,    timerProgressBar: true}); Toast.fire({    icon: 'info',    title: 'Đăng nhập thành công!'});

• Theme WordPress Admin (nếu dùng trong backend):

JavaScript Swal.fire({ title: 'Cập nhật thành công', icon: 'success', customClass: { container: 'swal2-wordpress-admin' } }); 1234567 Swal.fire({    title: 'Cập nhật thành công',    icon: 'success',    customClass: {        container: 'swal2-wordpress-admin'    }});

Thêm CSS theme nếu cần: @sweetalert2/theme-wordpress-admin.

Ưu điểm: Nhẹ (chỉ ~50KB), cập nhật tự động qua CDN, không conflict.

Cách 2: Sử Dụng Plugin SweetAlert2 (Nhanh Chóng Cho Form)

Nếu bạn cần tích hợp nhanh với form (Contact Form 7, Elementor Forms), dùng plugin chuyên dụng.

Plugin Khuyến Nghị (Cập Nhật 2026)

• Add-on SweetAlert Contact Form 7 (miễn phí, >10.000 install): Thay thông báo CF7 mặc định bằng SweetAlert2 popup. Chỉ activate → tự động hoạt động. Tùy chỉnh title, duration.
• Add SweetAlert to Elementor Form (miễn phí): Tương tự cho Elementor Pro Forms.
• WP Sweet Alert hoặc SweetAlert2 for Gravity Forms (nếu dùng Gravity).

Hướng Dẫn Cài Đặt & Sử Dụng (Ví Dụ CF7)

1. Vào Plugins > Add New > Tìm “Add-on SweetAlert Contact Form 7”.
2. Install & Activate.
3. Vào Contact > SweetAlert CF7 Settings (nếu có) → set custom title như “Gửi thành công!”, duration 5000ms.
4. Test form → thông báo sẽ hiện đẹp với SweetAlert2 (success/error).

Plugin tự enqueue SweetAlert2, override submission AJAX của CF7.

Ưu điểm: Không code, setup 2 phút. Nhược điểm: Chỉ dùng cho form cụ thể, thêm 1 plugin (có thể nặng hơn).

Nếu không dùng CF7/Elementor, cách 1 vẫn tốt hơn.

Các Ví Dụ Thực Tế Ứng Dụng Trong WordPress

• WooCommerce: Thông báo “Thêm giỏ thành công” với toast.
• Login/Register: Confirmation trước logout.
• Admin: Xóa post/user với confirm đẹp.
• Custom button: Click → input modal lấy dữ liệu.

FAQ – Câu Hỏi Thường Gặp

Q: SweetAlert2 có miễn phí không? A: Có, MIT license, dùng thương mại thoải mái.

Q: Conflict với theme Flatsome? A: Không, enqueue đúng cách là ổn.

Q: Làm sao dùng theme dark? A: Thêm Swal.fire({ theme: ‘dark’ }) (built-in từ v11).

Q: Cập nhật phiên bản mới? A: Chỉ thay số version trong CDN link.

Q: Dùng trong Gutenberg block? A: Enqueue script trong block register.

Kết Luận: Chọn Cách Phù Hợp Với Dự Án

• Dự án lớn, tùy chỉnh nhiều: Dùng cách 1 (code thuần) – nhẹ, linh hoạt.
• Site đơn giản, chỉ cần form đẹp: Dùng plugin – nhanh gọn.

SweetAlert2 giúp site WordPress của bạn chuyên nghiệp hơn chỉ trong 10 phút setup. Hãy thử ngay và thấy sự khác biệt!

Chúc bạn thành công! FTechX Solutions – chuyên cung cấp dịch vụ thiết kế website và marketing chuyên nghiệp.