Thủ thuật Theme Flatsome, Thủ thuật wordpress

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

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

admin

29/09/2024

4 Phút đọc

253 Lượt xem

Đánh giá

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

1. Giới thiệu

Trong việc tối ưu trải nghiệm người dùng trên website, việc hiển thị thông báo đăng nhập thành công là rất quan trọng. Với SweetAlert2, bạn có thể tạo ra popup đăng nhập hấp dẫn và chuyên nghiệp hơn. Bài viết này sẽ hướng dẫn bạn cách sử dụng SweetAlert2 để tạo popup thông báo đăng nhập thành công trong WordPress một cách đơn giản và hiệu quả.

2. Các Bước Cài Đặt SweetAlert2 Cho WordPress

Để bắt đầu, bạn cần tải và kích hoạt SweetAlert2 vào website WordPress thông qua mã code dưới đây. Mã này sẽ giúp tải thư viện JavaScript và CSS của SweetAlert2 để sử dụng trong trang web.

function enqueue_sweetalert_script() {
    // Tải SweetAlert2 JS và CSS
    wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array('jquery'), null, true);
    wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_sweetalert_script');

function enqueue_sweetalert_script() {

// Tải SweetAlert2 JS và CSS

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

wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css', array(), null);

}

add_action('wp_enqueue_scripts', 'enqueue_sweetalert_script');

3. Thiết Lập Cookie Đăng Nhập Thành Công

Tiếp theo, khi người dùng đăng nhập thành công, bạn cần tạo một cookie lưu lại thông tin đăng nhập bao gồm tên người dùng và thời gian đăng nhập. Cookie này sẽ được sử dụng để hiển thị thông báo trên trang sau khi người dùng đăng nhập thành công.

function set_login_success_cookie($user_login, $user) {
    // Đặt locale tiếng Việt
    setlocale(LC_TIME, 'vi_VN');
    // Định dạng thời gian theo tiếng Việt
    $login_time = strftime('%A, ngày %d tháng %m năm %Y, %H:%M:%S');
    setcookie('login_success', $user_login . '|' . $login_time, time() + 3600, COOKIEPATH, COOKIE_DOMAIN, false);
}
add_action('wp_login', 'set_login_success_cookie', 10, 2);

function set_login_success_cookie($user_login, $user) {

// Đặt locale tiếng Việt

setlocale(LC_TIME, 'vi_VN');

// Định dạng thời gian theo tiếng Việt

$login_time = strftime('%A, ngày %d tháng %m năm %Y, %H:%M:%S');

setcookie('login_success', $user_login . '|' . $login_time, time() + 3600, COOKIEPATH, COOKIE_DOMAIN, false);

}

add_action('wp_login', 'set_login_success_cookie', 10, 2);

4. Hiển Thị Popup Thông Báo Đăng Nhập Thành Công

Phần cuối cùng là việc sử dụng SweetAlert2 để hiển thị popup thông báo khi người dùng đã đăng nhập thành công. Đoạn mã dưới đây sẽ kiểm tra sự tồn tại của cookie, sau đó hiển thị popup với thông tin tên người dùng và thời gian đăng nhập.

function show_login_success_popup() {
    // Kiểm tra nếu cookie 'login_success' tồn tại và người dùng đã đăng nhập
    if (is_user_logged_in() && isset($_COOKIE['login_success'])) {
        // Tách tên người dùng và thời gian đăng nhập từ cookie
        list($user_login, $login_time) = explode('|', $_COOKIE['login_success']);
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                Swal.fire({
                    title: 'Đăng nhập thành công!',
                    html: '<strong>Chào mừng <?php echo esc_js($user_login); ?> đã trở lại!</strong><br>Thời gian đăng nhập: <span style="color: red;"><?php echo esc_js($login_time); ?></span>',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    timer: 5000, // Popup tự động đóng sau 5 giây
                    timerProgressBar: true // Hiển thị thanh tiến trình
                }).then(function() {
                    // Sau khi popup được đóng, xóa cookie và reload trang
                    document.cookie = "login_success=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
                    location.reload(); // Tự động tải lại trang
                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'show_login_success_popup');

function show_login_success_popup() {

// Kiểm tra nếu cookie 'login_success' tồn tại và người dùng đã đăng nhập

if (is_user_logged_in() && isset($_COOKIE['login_success'])) {

// Tách tên người dùng và thời gian đăng nhập từ cookie

list($user_login, $login_time) = explode('|', $_COOKIE['login_success']);

jQuery(document).ready(function($) {

Swal.fire({

title: 'Đăng nhập thành công!',

html: '<strong>Chào mừng <?php echo esc_js($user_login); ?> đã trở lại!</strong><br>Thời gian đăng nhập: <span style="color: red;"><?php echo esc_js($login_time); ?></span>',

icon: 'success',

confirmButtonText: 'OK',

timer: 5000, // Popup tự động đóng sau 5 giây

timerProgressBar: true // Hiển thị thanh tiến trình

}).then(function() {

// Sau khi popup được đóng, xóa cookie và reload trang

document.cookie = "login_success=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

location.reload(); // Tự động tải lại trang

});

</script>

<?php

}

add_action('wp_footer', 'show_login_success_popup');

Sử dụng SweetAlert2 để tạo popup thông báo đăng nhập thành công không chỉ giúp tăng cường trải nghiệm người dùng mà còn mang lại cảm giác chuyên nghiệp cho website WordPress của bạn. Với các bước hướng dẫn chi tiết trong bài viết này, hy vọng bạn có thể dễ dàng tích hợp tính năng này vào trang web của mình. Chúc cá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!

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

Share code Header top đơn giản

Share code Header top đơn giản dành cho các bạn mới nhé. Code header này để dùng hiển thị các thông tin như liên hệ,...
Cách chèn thêm sản phẩm vào trong bài viết wordpress giống levantoan

Tại Sao Nên Sử Dụng Mẫu Website Nổi Bật? Khi bạn đến với muathemewpgiare.com, chắc hẳn bạn đã nghe nhiều về các mẫu website chuẩn...
Sharecode cách Chuyển 0đ hoặc không điền thành chữ “Liên hệ”

Nếu bạn đang quản lý một cửa hàng trực tuyến với WooCommerce và muốn thay thế giá trị “0đ” bằng chữ “Liên hệ” cho những...
Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...
Hướng dẫn và chia sẻ code thêm nút xóa và tăng giảm số lượng sản phẩm trong trang thanh toán WooCommerce cho Flatsome

Khi xây dựng website WooCommerce với theme Flatsome, một trong những yêu cầu phổ biến từ khách hàng là thêm các tính năng như nút...
Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Flash Sale Countdown & Sản phẩm đã bán Trên Website WooCommerce

Bạn có phải là một tín đồ của flash sale? Hay bạn muốn tăng cường tỷ lệ chuyển đổi cho sản phẩm giảm giá trên...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản

Thêm Cột Ngày Đăng Nhập Gần Nhất và Ngày Đăng Ký Tài Khoản trong WordPress Mục đích: Chức năng này giúp quản trị viên WordPress...
Sharecode HTML và CSS Bảng Báo Giá

DEMO: Thiết kế Website Cơ bản 5,000,000đ Thiết kế website chuẩn SEO Giao diện responsive Tích hợp cơ bản (Form liên hệ, Bản đồ) Tư...
Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin

Khi xây dựng một website WordPress, việc cung cấp công cụ tìm kiếm hiệu quả cho người dùng là rất quan trọng, đặc biệt là...
Sharecode slider sản phẩm đã xem wordpress

Tại sao nên thêm slider sản phẩm đã xem? 1. Tăng thời gian người dùng ở lại website Khi khách truy cập thấy lại những...
Tự Động Cập Nhật Hình Đại Diện Cho Bài Viết Trong WordPress

Hình đại diện (thumbnail) cho bài viết trong WordPress là yếu tố quan trọng giúp tăng tính thẩm mỹ và tạo điểm nhấn trực quan...