Thủ thuật wordpress

Cách Code Thông Báo Bằng Sweet2 WordPress

Đăng vào Tháng 9 25, 2024Tháng 9 26, 2024 bởi admin

admin

25/09/2024

4 Phút đọc

123 Lượt xem

Đánh giá

4.5/5 - (100 bình chọn)

Để hiển thị thông báo bằng SweetAlert2 trong WordPress, bạn có thể làm theo các bước sau. Dưới đây là cách tích hợp SweetAlert2 vào WordPress và sử dụng nó để hiển thị thông báo khi người dùng truy cập trang web.

Cach Code Thong Bao Bang Sweet2 Wordpress Muathemewpgiare — Cách Code Thông Báo Bằng Sweet2 WordPress

1. Thêm SweetAlert2 vào WordPress

Trước tiên, bạn cần tải SweetAlert2 vào trang web của mình. Điều này có thể thực hiện thông qua việc enqueue script trong WordPress.

Mở file functions.php của theme (hoặc child theme) bạn đang sử dụng và thêm đoạn mã sau:

function enqueue_sweetalert2() {
    // Đăng ký SweetAlert2 từ CDN
    wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_sweetalert2');

function enqueue_sweetalert2() {

// Đăng ký SweetAlert2 từ CDN

wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array(), null, true);

}

add_action('wp_enqueue_scripts', 'enqueue_sweetalert2');

2. Hiển thị thông báo SweetAlert2

Sau khi đã tải SweetAlert2 thành công, bạn có thể thêm đoạn mã hiển thị thông báo vào trang web. Bạn có thể sử dụng JavaScript để gọi SweetAlert2.

Trong ví dụ này, mình sẽ sử dụng một đoạn JavaScript để hiển thị thông báo ngay khi người dùng truy cập trang chủ.

Cũng trong file functions.php, thêm đoạn mã sau để nhúng JavaScript hiển thị SweetAlert2:

function display_sweetalert_notification() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                title: 'Thông báo',
                text: 'Chào mừng bạn đến với trang web của chúng tôi!',
                icon: 'info',
                confirmButtonText: 'OK'
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'display_sweetalert_notification');

function display_sweetalert_notification() {

document.addEventListener('DOMContentLoaded', function() {

Swal.fire({

title: 'Thông báo',

text: 'Chào mừng bạn đến với trang web của chúng tôi!',

icon: 'info',

confirmButtonText: 'OK'

});

</script>

<?php

}

add_action('wp_footer', 'display_sweetalert_notification');

3. Cách hoạt động

Step 1: SweetAlert2 được tải thông qua wp_enqueue_script từ CDN.
Step 2: Khi người dùng truy cập vào trang web, JavaScript lắng nghe sự kiện DOMContentLoaded (sự kiện khi trang đã tải xong) và hiển thị thông báo bằng SweetAlert2.

4. Tùy chỉnh SweetAlert2

Bạn có thể tùy chỉnh thêm cho thông báo của SweetAlert2 như thay đổi tiêu đề, nội dung, icon (success, warning, error, info), nút bấm, và các tùy chọn khác theo tài liệu của SweetAlert2.

Ví dụ thêm một thông báo có thời gian đếm ngược và tự động đóng sau 3 giây:

function display_custom_sweetalert_notification() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                title: 'Đếm ngược!',
                text: 'Thông báo này sẽ tự động đóng sau 3 giây.',
                icon: 'success',
                timer: 3000,
                showConfirmButton: false
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'display_custom_sweetalert_notification');

function display_custom_sweetalert_notification() {

document.addEventListener('DOMContentLoaded', function() {

Swal.fire({

title: 'Đếm ngược!',

text: 'Thông báo này sẽ tự động đóng sau 3 giây.',

icon: 'success',

timer: 3000,

showConfirmButton: false

});

</script>

<?php

}

add_action('wp_footer', 'display_custom_sweetalert_notification');

Đoạn mã này sẽ hiển thị một thông báo thành công và tự động đóng sau 3 giây mà không cần người dùng nhấn nút “OK”.

Nếu bạn cần thông báo phức tạp hơn (như xác nhận từ người dùng hoặc tích hợp với các hành động khác), có thể điều chỉnh dựa trên yêu cầu cụ thể. Chúc bạn thành công.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Bật tính năng đánh giá sản phẩm WooCommerce chỉ với vài dòng code

Nếu bạn đang sử dụng WooCommerce để xây dựng website bán hàng và muốn bật tính năng đánh giá sản phẩm cho tất cả sản...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

Bạn muốn website WordPress của mình có một khu vực video nổi bật (Video Highlight) đẹp mắt, hiện đại, chuyên nghiệp như YouTube? Bài viết...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Mục Lục1. Thêm SweetAlert2 vào WordPress2. Hiển thị thông báo SweetAlert23. Cách hoạt động4. Tùy chỉnh SweetAlert2Phần 1. Ẩn tài khoản admin khỏi danh sách...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục Lục1. Thêm SweetAlert2 vào WordPress2. Hiển thị thông báo SweetAlert23. Cách hoạt động4. Tùy chỉnh SweetAlert2Phần 1: Hướng dẫn Code chức năng kiểm tra...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục Lục1. Thêm SweetAlert2 vào WordPress2. Hiển thị thông báo SweetAlert23. Cách hoạt động4. Tùy chỉnh SweetAlert21. Giới Thiệu Code Tự động Cập Nhật Giá...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...