Trong WordPress, chức năng đổi mật khẩu mặc định có thể gây khó khăn cho người dùng khi phải truy cập khu vực quản trị để thực hiện thay đổi. Bài viết này sẽ hướng dẫn bạn cách tạo một trang đổi mật khẩu tùy chỉnh cho thành viên với các bước chi tiết, giúp người dùng tự đổi mật khẩu ngay trên giao diện trang web mà không cần truy cập vào trang quản trị. Đây là cách tối ưu hóa trải nghiệm người dùng, tăng tính chuyên nghiệp cho website và giúp bạn nâng cao khả năng SEO.
Hướng Dẫn Tạo Trang Chức Năng Đổi Mật Khẩu Tùy Chỉnh Cho Thành Viên WordPress

Bước 1: Kiểm Tra Trạng Thái Đăng Nhập và Lấy Thông Tin Thành Viên
Trước khi cho phép người dùng đổi mật khẩu, chúng ta cần xác nhận rằng người dùng đã đăng nhập vào hệ thống. Điều này đảm bảo tính bảo mật và tránh việc người dùng chưa đăng nhập có thể truy cập vào trang đổi mật khẩu. Dưới đây là đoạn mã để thực hiện kiểm tra trạng thái đăng nhập và lấy thông tin tài khoản:
1 2 3 4 5 6 | if (!is_user_logged_in()) { wp_redirect(home_url()); exit; } $current_user = wp_get_current_user(); |
Giải thích:
- Kiểm tra trạng thái đăng nhập: Hàm
is_user_logged_in()
sẽ xác định xem người dùng đã đăng nhập hay chưa. Nếu người dùng chưa đăng nhập, họ sẽ được chuyển hướng về trang chủ vớiwp_redirect(home_url());
. - Lấy thông tin tài khoản: Nếu người dùng đã đăng nhập, thông tin tài khoản của họ sẽ được lấy và lưu vào biến
$current_user
để dùng cho các bước tiếp theo.
Các bạn có thể xem thêm bài viết liên quan của mình tại: Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin)
Bước 2: Tạo Hàm Hiển Thị Form Đổi Mật Khẩu và Xử Lý Yêu Cầu
Tiếp theo, chúng ta sẽ tạo một hàm để hiển thị form đổi mật khẩu, bao gồm các trường nhập mật khẩu cũ, mật khẩu mới và xác nhận mật khẩu mới. Đoạn mã này sẽ được thêm vào tệp functions.php
của theme hiện tại. Đảm bảo thêm class và shortcode để tiện lợi cho việc tùy chỉnh và hiển thị form.
Mã PHP cho Form Đổi Mật Khẩu
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // Hàm hiển thị và xử lý yêu cầu đổi mật khẩu function muathemewpgiare_trangmk() { if (!is_user_logged_in()) { wp_redirect(home_url()); exit; } $current_user = wp_get_current_user(); // Xử lý yêu cầu đổi mật khẩu khi form được submit if (isset($_POST['update_password'])) { $old_password = $_POST['old_password']; $new_password = $_POST['new_password']; $confirm_password = $_POST['confirm_password']; // Kiểm tra mật khẩu hiện tại if (wp_check_password($old_password, $current_user->user_pass, $current_user->ID)) { // Xác minh mật khẩu mới và xác nhận lại if ($new_password === $confirm_password) { wp_set_password($new_password, $current_user->ID); echo '<div class="success-message">Mật khẩu đã được thay đổi thành công!</div>'; } else { echo '<div class="error-message">Mật khẩu mới không khớp!</div>'; } } else { echo '<div class="error-message">Mật khẩu hiện tại không đúng!</div>'; } } // Hiển thị form đổi mật khẩu ?> <div class="password-change-form"> <h2>Đổi Mật Khẩu</h2> <form method="post"> <label for="old_password">Mật khẩu hiện tại:</label> <input type="password" name="old_password" required> <label for="new_password">Mật khẩu mới:</label> <input type="password" name="new_password" required> <label for="confirm_password">Xác nhận mật khẩu mới:</label> <input type="password" name="confirm_password" required> <input type="submit" name="update_password" value="Đổi mật khẩu"> </form> </div> <?php } // Đăng ký shortcode để chèn form đổi mật khẩu vào trang add_shortcode('muathemewpgiare_trangmk', 'muathemewpgiare_trangmk'); |
Mô tả cách thức hoạt động của hàm muathemewpgiare_trangmk
:
- Kiểm tra đăng nhập: Đảm bảo chỉ người dùng đã đăng nhập mới có thể truy cập trang đổi mật khẩu.
- Xử lý yêu cầu đổi mật khẩu:
- Xác thực mật khẩu cũ: Kiểm tra mật khẩu hiện tại của người dùng với
wp_check_password
. - Xác nhận mật khẩu mới: Nếu mật khẩu mới và xác nhận mật khẩu trùng khớp, hệ thống sẽ cập nhật mật khẩu mới.
- Thông báo: Hiển thị các thông báo thành công hoặc lỗi giúp người dùng dễ dàng theo dõi quá trình.
- Xác thực mật khẩu cũ: Kiểm tra mật khẩu hiện tại của người dùng với
Các bạn có thể xem thêm bài viết liên quan của mình tại: Hướng Dẫn Tạo Popup SweetAlert2 Yêu Cầu Đăng Nhập Trong WordPress
Bước 3: Tạo Trang Đổi Mật Khẩu và Chèn Shortcode
Sau khi tạo xong shortcode [muathemewpgiare_trangmk]
, bạn có thể tạo một trang mới để chứa form đổi mật khẩu. Các bước thực hiện như sau:
- Tạo trang mới: Truy cập Trang > Thêm mới trong phần quản trị WordPress.
- Chèn shortcode: Trong phần nội dung trang, dán shortcode
[muathemewpgiare_trangmk]
. - Lưu trang: Sau khi lưu, trang đổi mật khẩu sẽ sẵn sàng cho người dùng truy cập và sử dụng.
Bước 4: Tùy Chỉnh Giao Diện Form Đổi Mật Khẩu Bằng CSS
Để form đổi mật khẩu trông chuyên nghiệp và thân thiện, bạn có thể thêm CSS tùy chỉnh để tạo giao diện tương tự các trang thương mại điện tử lớn như Shopee. Thêm CSS này vào tệp style.css
của theme hoặc vào phần Custom CSS trong giao diện quản trị.
CSS Tùy Chỉnh cho Form Đổi Mật Khẩu
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | /* CSS tùy chỉnh cho form đổi mật khẩu */ .password-change-form { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif; } .password-change-form h2 { text-align: center; font-size: 24px; color: #333; margin-bottom: 20px; } .password-change-form label { display: block; font-size: 14px; color: #555; margin-bottom: 6px; } .password-change-form input[type="password"] { width: 100%; padding: 10px; font-size: 16px; color: #333; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; margin-bottom: 15px; transition: border-color 0.3s ease; } .password-change-form input[type="password"]:focus { border-color: #f53d2d; outline: none; } .password-change-form input[type="submit"] { width: 100%; padding: 12px; font-size: 16px; color: #fff; background-color: #f53d2d; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .password-change-form input[type="submit"]:hover { background-color: #e02a1b; } .password-change-form .success-message, .password-change-form .error-message { font-size: 14px; color: #fff; padding: 10px; border-radius: 4px; text-align: center; margin-top: 15px; } .password-change-form .success-message { background-color: #28a745; } .password-change-form .error-message { background-color: #dc3545; } |
Kết Luận
Việc tạo trang đổi mật khẩu tùy chỉnh cho thành viên trong WordPress không chỉ giúp website trông chuyên nghiệp hơn mà còn nâng cao trải nghiệm người dùng. Với những bước hướng dẫn trên, bạn đã có thể tạo một trang đổi mật khẩu hoàn chỉnh, thiết kế hiện đại, thân thiện và dễ sử dụng.
Nếu có bất kỳ câu hỏi nào về quá trình này hoặc muốn tìm hiểu thêm về các tùy chỉnh khác cho WordPress, đừng ngần ngại để lại bình luận. Chúc bạn thành công nhé hehe…
Nếu có gì có thể liên hệ với mình để được hỗ trợ nhé. Nếu thấy bài viết hay và chất lượng có thể mời mình ly cafe qua MB BANK 0766734539 LE TRUNG HOANG nhé.