Bài Viết

Hướng dẫn code chức năng đăng xuất nhanh với SweetAlert2 trên WordPress

Q: 1. Tại sao nên sử dụng tính năng đăng xuất nhanh với SweetAlert2 trên WordPress?

Tính năng này giúp người dùng đăng xuất ngay lập tức chỉ với một cú nhấp chuột, không cần qua trang xác nhận. SweetAlert2 tạo trải nghiệm đăng xuất sinh động và thuận tiện hơn.

Q: 2. SweetAlert2 là gì?

SweetAlert2 là một thư viện JavaScript giúp tạo các thông báo popup đẹp mắt, chuyên nghiệp, dễ tùy chỉnh và được sử dụng rộng rãi trên các trang web.

Q: 3. Làm thế nào để tích hợp SweetAlert2 vào WordPress?

SweetAlert2 được tích hợp bằng cách thêm mã CSS và JavaScript vào footer của trang WordPress thông qua PHP. Trong đoạn mã, thư viện được liên kết từ CDN và hiển thị qua popup. Các bạn có thể xem qua một số bài viết hướng dẫn của MuathemeWPgiare dưới đây nhé: Hướng Dẫn Tạo Popup Đăng Nhập Thành Công Bằng SweetAlert2 Trong WordPress Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin) Hướng Dẫn Tạo Popup SweetAlert2 Yêu Cầu Đăng Nhập Trong WordPress

Q: 4. Tính năng đăng xuất nhanh hoạt động như thế nào?

Tính năng này sử dụng AJAX để gửi yêu cầu đăng xuất mà không cần tải lại trang. Sau đó, SweetAlert2 sẽ hiển thị thông báo đếm ngược và tự động đăng xuất khi hết thời gian.

Q: 5. Có thể tùy chỉnh thời gian đếm ngược không?

Có. Thời gian đếm ngược được thiết lập trong mã JavaScript và bạn có thể điều chỉnh theo ý muốn (ví dụ: tăng lên hoặc giảm xuống từ 10 giây).

Q: 6.Có thể thay đổi nội dung thông trong popup SweetAlert2 không?

Có, bạn có thể tùy chỉnh nội dung hiển thị trong SweetAlert2 như tiêu đề, thông điệp đếm ngược, hoặc thông báo đăng xuất thành công.

Q: 7.Tính năng này có ảnh hưởng đến bảo mật trang web không?

Không. Việc đăng xuất qua AJAX và SweetAlert2 chỉ đơn giản hóa quá trình đăng xuất mà không ảnh hưởng đến bảo mật, thậm chí còn giúp đăng xuất nhanh chóng để tránh rủi ro.

Đăng vào Tháng 10 29, 2024Tháng 10 29, 2024 bởi admin

admin

29/10/2024

7 Phút đọc

174 Lượt xem

Đánh giá

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

Đoạn mã dưới đây sẽ giúp bạn tạo một trải nghiệm đăng xuất nhanh với SweetAlert2 trên WordPress mà không cần chuyển đến trang xác nhận đăng xuất. Chức năng này mang lại sự thuận tiện cho người dùng khi có thể đăng xuất chỉ bằng một cú nhấp chuột. Đồng thời, nó sử dụng SweetAlert2 để hiển thị thông báo đếm ngược sinh động, tăng cường trải nghiệm người dùng.

Hướng dẫn code chức năng đăng xuất nhanh với SweetAlert2 trên WordPress

Tại sao nên sử dụng tính năng đăng xuất nhanh với SweetAlert2?

Khi trang web yêu cầu quá nhiều bước để đăng xuất, người dùng có thể cảm thấy khó chịu hoặc mất thời gian. Tính năng đăng xuất nhanh với SweetAlert2 giúp:

Tiết kiệm thời gian: Chỉ cần một cú nhấp chuột để thực hiện đăng xuất.
Trải nghiệm người dùng tốt hơn: Thông báo đếm ngược với SweetAlert2 giúp quá trình đăng xuất trở nên sinh động và chuyên nghiệp.
Bảo mật cao hơn: Đăng xuất tự động và không cần xác nhận giúp giảm thiểu các rủi ro bảo mật.

Bài viết về SweetAlert2: Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin)

Hướng dẫn chi tiết mã đăng xuất nhanh với SweetAlert2

1. Chức năng chính của đoạn mã

Đoạn mã này có hai phần:

Hàm ajax_logout: Đăng xuất người dùng ngay lập tức qua AJAX và trả về thông báo thành công.
Hàm add_logout_script: Thêm các thư viện cần thiết và JavaScript vào footer, giúp thực hiện đếm ngược và gọi AJAX để đăng xuất.

2. Chi tiết mã và cách thức hoạt động

Phần 1: Đăng xuất người dùng qua AJAX

function ajax_logout() {
    wp_logout(); // Thực hiện đăng xuất
    wp_send_json_success(array('message' => 'Đăng xuất thành công!')); // Trả về thông báo thành công
}
add_action('wp_ajax_nopriv_ajax_logout', 'ajax_logout');
add_action('wp_ajax_ajax_logout', 'ajax_logout');

function ajax_logout() {

wp_logout(); // Thực hiện đăng xuất

wp_send_json_success(array('message' => 'Đăng xuất thành công!')); // Trả về thông báo thành công

}

add_action('wp_ajax_nopriv_ajax_logout', 'ajax_logout');

add_action('wp_ajax_ajax_logout', 'ajax_logout');

Giải thích:

wp_logout(): Hàm đăng xuất người dùng trên WordPress.
wp_send_json_success(...): Gửi phản hồi thành công với định dạng JSON, chứa thông báo “Đăng xuất thành công!”.

Phần 2: Thêm SweetAlert2 và JavaScript để đăng xuất

function add_logout_script() {
    ?>
    <!-- Thư viện SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const logoutLinks = document.querySelectorAll('a[href*="customer-logout"]'); // Tìm link đăng xuất
        logoutLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault(); // Ngăn chặn hành động mặc định

                let countdown = 10; // Số giây đếm ngược

                Swal.fire({
                    title: 'Đang đăng xuất...',
                    html: 'Vui lòng chờ <b></b> giây...',
                    timer: countdown * 1000,
                    timerProgressBar: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b');
                        const timerInterval = setInterval(() => {
                            countdown--;
                            b.textContent = countdown;
                        }, 1000);
                        Swal.showLoading();
                    },
                    willClose: () => {
                        fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=ajax_logout', {
                            method: 'POST',
                            credentials: 'same-origin'
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Đăng xuất thành công!',
                                    showConfirmButton: false,
                                    timer: 2000
                                }).then(() => {
                                    window.location.href = '<?php echo home_url(); ?>'; // Chuyển hướng về trang chủ
                                });
                            }
                        })
                        .catch(error => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Có lỗi xảy ra!',
                                text: 'Không thể đăng xuất, vui lòng thử lại.'
                            });
                        });
                    }
                });
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_logout_script');

function add_logout_script() {

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

const logoutLinks = document.querySelectorAll('a[href*="customer-logout"]'); // Tìm link đăng xuất

logoutLinks.forEach(function(link) {

link.addEventListener('click', function(event) {

event.preventDefault(); // Ngăn chặn hành động mặc định

let countdown = 10; // Số giây đếm ngược

Swal.fire({

title: 'Đang đăng xuất...',

html: 'Vui lòng chờ <b></b> giây...',

timer: countdown * 1000,

timerProgressBar: true,

allowOutsideClick: false,

allowEscapeKey: false,

showConfirmButton: false,

didOpen: () => {

const b = Swal.getHtmlContainer().querySelector('b');

const timerInterval = setInterval(() => {

countdown--;

b.textContent = countdown;

}, 1000);

Swal.showLoading();

willClose: () => {

fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=ajax_logout', {

method: 'POST',

credentials: 'same-origin'

})

.then(response => response.json())

.then(data => {

if (data.success) {

Swal.fire({

icon: 'success',

title: 'Đăng xuất thành công!',

showConfirmButton: false,

timer: 2000

}).then(() => {

window.location.href = '<?php echo home_url(); ?>'; // Chuyển hướng về trang chủ

});

}

})

.catch(error => {

Swal.fire({

icon: 'error',

title: 'Có lỗi xảy ra!',

text: 'Không thể đăng xuất, vui lòng thử lại.'

});

}

});

</script>

<?php

}

add_action('wp_footer', 'add_logout_script');

Giải thích chi tiết:

Thêm thư viện SweetAlert2: CSS và JS của SweetAlert2 được thêm vào để tạo popup thông báo đẹp mắt.
Đếm ngược thời gian đăng xuất: Khi người dùng nhấn vào link đăng xuất, một popup đếm ngược 10 giây xuất hiện, tạo sự chuẩn bị cho người dùng trước khi đăng xuất.
Gọi AJAX để đăng xuất: Sau khi đếm ngược hoàn tất, AJAX được kích hoạt để gọi hàm ajax_logout, thực hiện đăng xuất.
Thông báo thành công: Sau khi đăng xuất thành công, SweetAlert2 hiển thị thông báo thành công và tự động chuyển hướng về trang chủ.

3. Lợi ích của đoạn mã này

Đăng xuất nhanh chóng, không cần xác nhận: Giúp người dùng thoát khỏi tài khoản mà không phải qua các bước xác nhận.
Tăng tính bảo mật: Đăng xuất tự động và không yêu cầu xác nhận, giúp ngăn ngừa truy cập trái phép từ người dùng khác.
Trải nghiệm người dùng mượt mà: Giao diện đếm ngược sinh động giúp quá trình đăng xuất trở nên chuyên nghiệp và thuận tiện.

Kết luận

Đoạn mã trên mang lại trải nghiệm đăng xuất tài khoản ngay lập tức không qua trang xác nhận nhanh chóng và thuận tiện cho người dùng WordPress. Khi tích hợp tính năng này vào trang web, bạn có thể cải thiện trải nghiệm người dùng, đặc biệt là khi trang web có yêu cầu bảo mật cao hoặc đối tượng người dùng lớn. Dưới đây là code hoàn chỉnh, các bạn chỉ cần bỏ vào funtion.php là xong nhé.

// Đăng xuất tài khoản ngay lập tức không qua trang xác nhận
function ajax_logout() {
    // Thực hiện đăng xuất
    wp_logout();
    // Trả về thông báo thành công
    wp_send_json_success(array('message' => 'Đăng xuất thành công!'));
}
add_action('wp_ajax_nopriv_ajax_logout', 'ajax_logout');
add_action('wp_ajax_ajax_logout', 'ajax_logout');

// Thêm SweetAlert2 và JavaScript vào footer
function add_logout_script() {
    ?>
    <!-- SweetAlert2 CSS và JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Lấy tất cả các link đăng xuất trên trang
        const logoutLinks = document.querySelectorAll('a[href*="customer-logout"]');

        logoutLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault(); // Ngăn chặn hành động mặc định của link

                let countdown = 10; // Số giây đếm ngược

                Swal.fire({
                    title: 'Đang đăng xuất...',
                    html: 'Vui lòng chờ <b></b> giây...',
                    timer: countdown * 1000,
                    timerProgressBar: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b');
                        const timerInterval = setInterval(() => {
                            countdown--;
                            b.textContent = countdown;
                        }, 1000);

                        // Khi thông báo đã mở, dừng đếm ngược khi hết thời gian
                        Swal.showLoading();
                    },
                    willClose: () => {
                        // Gửi yêu cầu AJAX để đăng xuất sau khi đếm ngược kết thúc
                        fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=ajax_logout', {
                            method: 'POST',
                            credentials: 'same-origin'
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Đăng xuất thành công!',
                                    showConfirmButton: false,
                                    timer: 2000
                                }).then(() => {
                                    // Sau khi hiển thị thông báo, chuyển hướng về trang chủ
                                    window.location.href = '<?php echo home_url(); ?>';
                                });
                            }
                        })
                        .catch(error => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Có lỗi xảy ra!',
                                text: 'Không thể đăng xuất, vui lòng thử lại.'
                            });
                        });
                    }
                });
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_logout_script');

// Đăng xuất tài khoản ngay lập tức không qua trang xác nhận

function ajax_logout() {

// Thực hiện đăng xuất

wp_logout();

// Trả về thông báo thành công

wp_send_json_success(array('message' => 'Đăng xuất thành công!'));

}

add_action('wp_ajax_nopriv_ajax_logout', 'ajax_logout');

add_action('wp_ajax_ajax_logout', 'ajax_logout');

// Thêm SweetAlert2 và JavaScript vào footer

function add_logout_script() {

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

// Lấy tất cả các link đăng xuất trên trang

const logoutLinks = document.querySelectorAll('a[href*="customer-logout"]');

logoutLinks.forEach(function(link) {

link.addEventListener('click', function(event) {

event.preventDefault(); // Ngăn chặn hành động mặc định của link

let countdown = 10; // Số giây đếm ngược

Swal.fire({

title: 'Đang đăng xuất...',

html: 'Vui lòng chờ <b></b> giây...',

timer: countdown * 1000,

timerProgressBar: true,

allowOutsideClick: false,

allowEscapeKey: false,

showConfirmButton: false,

didOpen: () => {

const b = Swal.getHtmlContainer().querySelector('b');

const timerInterval = setInterval(() => {

countdown--;

b.textContent = countdown;

}, 1000);

// Khi thông báo đã mở, dừng đếm ngược khi hết thời gian

Swal.showLoading();

willClose: () => {

// Gửi yêu cầu AJAX để đăng xuất sau khi đếm ngược kết thúc

fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=ajax_logout', {

method: 'POST',

credentials: 'same-origin'

})

.then(response => response.json())

.then(data => {

if (data.success) {

Swal.fire({

icon: 'success',

title: 'Đăng xuất thành công!',

showConfirmButton: false,

timer: 2000

}).then(() => {

// Sau khi hiển thị thông báo, chuyển hướng về trang chủ

window.location.href = '<?php echo home_url(); ?>';

});

}

})

.catch(error => {

Swal.fire({

icon: 'error',

title: 'Có lỗi xảy ra!',

text: 'Không thể đăng xuất, vui lòng thử lại.'

});

}

});

</script>

<?php

}

add_action('wp_footer', 'add_logout_script');

Hy vọng bài viết này đã giúp bạn hiểu rõ cách cài đặt và lợi ích của tính năng đăng xuất nhanh với SweetAlert2 trên WordPress. Hãy thử áp dụng ngay để nâng cao trải nghiệm cho khách hàng của mình!

Câu hỏi thường gặp

1. Tại sao nên sử dụng tính năng đăng xuất nhanh với SweetAlert2 trên WordPress?

Tính năng này giúp người dùng đăng xuất ngay lập tức chỉ với một cú nhấp chuột, không cần qua trang xác nhận. SweetAlert2 tạo trải nghiệm đăng xuất sinh động và thuận tiện hơn.

2. SweetAlert2 là gì?

SweetAlert2 là một thư viện JavaScript giúp tạo các thông báo popup đẹp mắt, chuyên nghiệp, dễ tùy chỉnh và được sử dụng rộng rãi trên các trang web.

3. Làm thế nào để tích hợp SweetAlert2 vào WordPress?

SweetAlert2 được tích hợp bằng cách thêm mã CSS và JavaScript vào footer của trang WordPress thông qua PHP. Trong đoạn mã, thư viện được liên kết từ CDN và hiển thị qua popup.

Các bạn có thể xem qua một số bài viết hướng dẫn của MuathemeWPgiare dưới đây nhé:

Hướng Dẫn Tạo Popup Đăng Nhập Thành Công Bằng SweetAlert2 Trong WordPress

Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin)

Hướng Dẫn Tạo Popup SweetAlert2 Yêu Cầu Đăng Nhập Trong WordPress

4. Tính năng đăng xuất nhanh hoạt động như thế nào?

Tính năng này sử dụng AJAX để gửi yêu cầu đăng xuất mà không cần tải lại trang. Sau đó, SweetAlert2 sẽ hiển thị thông báo đếm ngược và tự động đăng xuất khi hết thời gian.

5. Có thể tùy chỉnh thời gian đếm ngược không?

Có. Thời gian đếm ngược được thiết lập trong mã JavaScript và bạn có thể điều chỉnh theo ý muốn (ví dụ: tăng lên hoặc giảm xuống từ 10 giây).

6.Có thể thay đổi nội dung thông trong popup SweetAlert2 không?

Có, bạn có thể tùy chỉnh nội dung hiển thị trong SweetAlert2 như tiêu đề, thông điệp đếm ngược, hoặc thông báo đăng xuất thành công.

7.Tính năng này có ảnh hưởng đến bảo mật trang web không?

Không. Việc đăng xuất qua AJAX và SweetAlert2 chỉ đơn giản hóa quá trình đăng xuất mà không ảnh hưởng đến bảo mật, thậm chí còn giúp đăng xuất nhanh chóng để tránh rủi ro.

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!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Cách tách Product Tabs trong WooCommerce thành các section riêng biệt

Hãy tưởng tượng bạn đang lướt qua một trang sản phẩm trên một website WooCommerce, và bạn nhìn thấy các thông tin như mô tả,...
Widget là gì? Tất cả 100% kiến thức cần biết về Widget WordPress

Nếu bạn là một nhà thiết kế web hoặc đã từng làm việc với WordPress, chắc chắn bạn không còn xa lạ với thuật ngữ...
Cách Tạo Các Cuộc Thi Online Để Tăng Truy Cập Website Mới Nhất 2025

Trong thời đại số hóa hiện nay, việc tăng cường truy cập website trở nên cực kỳ quan trọng. Một trong những chiến lược hiệu...
Cách Đo Lường Hiệu Quả Chiến Dịch Marketing Nội Dung

Trong bối cảnh cạnh tranh ngày càng gay gắt, việc đo lường hiệu quả của các chiến dịch marketing nội dung trở thành yếu tố...
Cách Tạo Ra Một Trang Giới Thiệu Ấn Tượng WordPress

Trong bối cảnh cạnh tranh ngày càng gia tăng trên không gian trực tuyến, việc tạo ra một trang giới thiệu ấn tượng là vô...
Hướng Dẫn Xóa Tab WooCommerce Khỏi Trang Sản Phẩm Một Cách Dễ Dàng

Bạn đang sử dụng WooCommerce cho cửa hàng trực tuyến của mình và cảm thấy trang sản phẩm của mình có quá nhiều tab không...
Hướng Dẫn Chi Tiết Cách Sửa Lỗi WordPress Không Được Google Index

Chắc hẳn bạn đang gặp phải tình trạng website WordPress của mình không xuất hiện trên Google, phải không? Điều này không chỉ khiến bạn...
Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025

Trong thế giới số hóa hiện nay, việc tạo một biểu mẫu đăng ký đơn giản cho website là vô cùng cần thiết để thu...
[Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

Nếu bạn đang tìm cách tối ưu hóa giao diện mô tả sản phẩm trên website WordPress sử dụng Woocommerce, bài viết này sẽ cung...
Chương Trình Khuyến Mãi Mua Theme Tháng 01/2025

Chào đón năm mới 2025, Muathemewpgiare.com hân hạnh mang đến chương trình khuyến mãi mua theme wordpress đặc biệt trong suốt tháng 1 với nhiều...
Mua Website Có Sẵn Mới Nhất 2025

Với sự phát triển mạnh mẽ của internet và thương mại điện tử, việc sở hữu một website trở thành yếu tố then chốt giúp...
Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới

SEO (Search Engine Optimization) là một trong những chiến lược quan trọng nhất để đưa website của bạn lên vị trí cao trên Google. Đặc...
Cách Thiết Kế Website Bán Hàng Đạt Hiệu Quả Cao

Việc thiết kế website bán hàng chất lượng không chỉ giúp doanh nghiệp nâng cao uy tín thương hiệu mà còn hỗ trợ mở rộng...
Hướng Dẫn Chọn Mua Theme WordPress Giá Rẻ và Tối Ưu SEO Để Tăng Thứ Hạng Google

Khi xây dựng website trên nền tảng WordPress, một trong những yếu tố quan trọng nhất là lựa chọn theme WordPress giá rẻ phù hợp...
Mua Theme Giá Rẻ và Chọn Theme WordPress Bán Hàng Chuẩn SEO

Khi bạn bắt đầu xây dựng một website với WordPress, việc chọn đúng theme WordPress là yếu tố quan trọng giúp website của bạn không...
Mua Theme WordPress Giá Rẻ – Cập Nhật Các Plugin, Thủ Thuật và Tài Nguyên Shop Mới Nhất

Mục LụcTại sao nên sử dụng tính năng đăng xuất nhanh với SweetAlert2?Hướng dẫn chi tiết mã đăng xuất nhanh với SweetAlert21. Chức năng chính...