Cách tạo trang đăng ký và chỉnh sửa thông tin tài khoản cho user ở Frontend trong WordPress

WordPress cho phép bạn tạo thêm người dùng mới và quản lý tài khoản trên website của bạn, nhưng đó là trong backend. Nếu bạn muốn cho phép người dùng bất kỳ tự đăng ký tài khoản và quản lý tài khoản đó từ frontend, thì bạn cần tạo các trang đăng ký, đăng nhập, và trang tài khoản ở frontend cho họ. Tất nhiên là trên các trang đó phải có các trường thông tin để người điền thông tin cá nhân vào. Nếu bạn đang sử dụng plugin Meta Box thì tin vui cho bạn là nó có thể giúp bạn tạo các trường thông tin này rất dễ dàng.

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo các trang trên và cho phép người dùng chỉnh sửa thông tin tài khoản từ frontend bằng cách sử dụng Meta Box. Cùng theo dõi nhé.

Chuẩn bị

Để thực hiện được 03 trang trên, bạn cần các công cụ sau:

  • Meta Box: đây là framework để bạn tạo các custom field. Plugin này miễn phí và bạn có thể tải trực tiếp từ wordpress.org.
  • MB User Profile: đây là một extension (plugin mở rộng) của Meta Box. Plugin này sẽ cho phép bạn tạo các trang đăng ký, đăng nhập và chỉnh sửa thông tin user ở frontend dễ dàng. Đây là một trong số các extension cao cấp của Meta Box, bạn có thể chọn mua riêng 1 mình extension này với giá $49 hoặc là mua các gói extension của Meta Box để tiết kiệm hơn và sử dụng cho nhiều mục đích khác nữa nhé.

Tạo trang đăng ký tài khoản

Với Meta Box và MB User Profile, việc tạo một trang đăng ký tài khoản ngoài frontend khá dễ dàng.

Nhưng trước khi tạo trang đăng ký, bạn cần vào mục Settings và tích vào ô Anyone can register ở mục Membership nhé.

Tạo trang đăng ký tài khoản

Tạo trang đăng ký tài khoản với các trường thông tin mặc định

MB User Profile đã tự tạo sẵn các trường thông tin cơ bản bao gồm: Username, Email, Password, và Confirm Password. Nếu bạn không cần thông tin thêm từ người dùng, thì bạn chỉ cần thao tác như sau:

Trong admin dashboard, tìm tới menu Page > Add New.

Bạn đặt tên trang này là Đăng ký tài khoản và thêm đoạn shortcode sau vào nội dung của trang:

[mb_user_profile_register label_submit="Đăng ký" confirmation="Bạn đã đăng ký tài khoản thành công!"]

Tạo trang đăng ký tài khoản với các trường thông tin mặc định

Trong đó:

  • label_submit=”Đăng ký": có nghĩa là bạn đặt tên cho nút submit để đăng ký tài khoản là “Đăng ký”.
  • confirmation=”Bạn đã đăng ký tài khoản thành công!": có nghĩa là bạn đặt thông báo xác nhận sau khi người dung đăng ký tài khoản là “Bạn đã đăng ký tài khoản thành công!”.

Bạn có thể xem thêm các attribute khác mà MB User Profile có hỗ trợ như sau:

Tên Mô tả
id Meta Box ID(s), phân cách bởi các dấu phẩy (,). Tất cả các field có trong các meta box được liệt kê ID ở đây sẽ đều được hiển thị trong form đăng ký. Nếu không chỉ định ID nào ở đây, thì form đăng ký sẽ tự động hiển thị form mặc định
redirect URL bạn muốn dẫn người dùng đến sau khi họ đã đăng ký thành công
form_id ID (HTML attribute) của form
id_username ID (HTML attribute) của trường username
id_email ID (HTML attribute) của trường email
id_password ID (HTML attribute) của trường password (mật khẩu)
id_password2 ID (HTML attribute) của trường xác nhận lại mật khẩu
id_submit ID (HTML attribute) của nút đăng ký
label_username Nhãn tên của trường username
label_email Nhãn tên của trường email
label_password Nhãn tên của trường password (mật khẩu)
label_password2 Nhãn tên của trường xác nhận lại password (mật khẩu)
label_submit Nhãn tên của nút đăng ký
confirmation Thông báo xác nhận sau thi đăng ký tài khoản thành công
password_strength Đặt mức độ yêu cầu độ mạnh của mật khẩu, có các lựa chọn sẵn có như sau: strong, medium, weak, very-weak hoặc false. false có nghĩa là bạn không yêu cầu độ mạnh của mật khẩu và ẩn phần đo độ mạnh yếu này đi
email_as_username Sử dụng email thay cho username. Nếu thông số này là true, thì trường username sẽ bị ẩn đi

Như vậy, ở đây, mình không gọi ID của meta box nào, nên form đăng ký sẽ chỉ hiển thị các trường mặc định như ảnh dưới đây:

các trường mặc định của form đăng ký

Nếu bạn muốn đổi tên các field trên thì bạn sử dụng các attribute label_username, label_email, label_password, label_password2 nhé.

Thêm các trường thông tin khác vào form đăng ký tài khoản

Trường hợp bạn muốn yêu cầu user nhập thêm các thông tin cá nhân khác khi đăng ký, thì bạn cần tạo một hoặc nhiều meta box (field group) chứa các field bạn cần, sau đó lấy ID của meta box đó và đặt vào đoạn shortcode trên.

Mình có một field group có ID là: user-profile-default-fields với các field như sau:

Thêm các trường thông tin khác vào form đăng ký tài khoản

Mình sẽ đưa ID của meta box này vào đoạn shortcode ở trên:

[mb_user_profile_register id="user-profile-default-fields" label_submit="Đăng ký" confirmation="Bạn đã đăng ký tài khoản thành công!"]

Lúc này, trang đăng ký của bạn sẽ hiển thị thêm các trường thông tin mới:

Hiển thị các trường thông tin mới

Tạo trang đăng nhập tài khoản

Trang đăng nhập tài khoản thường chỉ cần 2 trường thông tin là Username (hoặc Email) và Password. Cả hai trường này đều được MB User Profile tự tạo mặc định rồi, nên bạn chỉ cần dùng shortcode sau để đưa các field này hiển thị lên trang Đăng nhập là được.

[mb_user_profile_login label_submit="Đăng nhập" label_remember="Lưu đăng nhập cho lần sau" label_lost_password="Quên mật khẩu?"]

Tạo trang đăng nhập tài khoản

Trang đăng nhập tài khoản lúc này sẽ có các trường thông tin như sau:

Các trường thông tin của Trang đăng nhập tài khoản 4

Tạo trang chỉnh sửa thông tin tài khoản

Với một trang thông tin tài khoản thông thường, mình chia thành 3 nhóm thông tin như sau:

  • Mật khẩu
  • Các trường thông tin tài khoản mặc định mà WordPress có
  • Các trường thông tin thêm mới (bạn tự thêm theo nhu cầu riêng của website)

Để thêm các trường thông tin như trên vào trang thông tin tài khoản, bạn sẽ dùng một shortcode có cấu trúc như sau:

[mb_user_profile_info id="field-group-1, field-group-2, field-group-3"]

Trong đó field-group-1, field-group-2, field-group-3 là ID của các meta box chứa các field mà ta cần hiển thị lên trang này. Các ID đặt cách nhau bằng dấu phẩy (,).

Hiển thị trường thay đổi mật khẩu

Trường thay đổi mật khẩu được MB User Profile hỗ trợ tạo sẵn, nên bạn chỉ cần đặt ID này rwmb-user-info vào đoạn shortcode trên là được.

Tuy nhiên, theo logic sử dụng của người dùng, thì mình thấy nên tách riêng phần thay đổi mật khẩu sang một trang khác (không nằm trong phần tài khoản). Vì vậy, mình đã tạo một trang mới cho việc này. Trong trang thay đổi thông tin tài khoản, mình sẽ dẫn link đến trang đổi mật khẩu.

Ở trang đổi mật khẩu, mình vẫn sử dụng đoạn shortcode có cấu trúc như ở trang thông tin tài khoản và đặt vào phần nội dung:

Hiển thị trường thay đổi mật khẩu

Các field để đổi mật khẩu sẽ hiển thị như sau:

Các field để đổi mật khẩu

Cuối cùng, trong trang thông tin tài khoản, bạn đặt link dẫn đến trang đổi mật khẩu như sau hoặc đặt vào một nút tuỳ theo giao diện website của bạn.

đặt link dẫn đến trang đổi mật khẩu

Hiển thị các trường thông tin tài khoản mặc định của WordPress

Trong WordPress, các tài khoản người dùng đã được hỗ trợ sẵn một số trường thông tin như sau:

Hiển thị các trường thông tin tài khoản mặc định của WordPress

Để hiển thị các field này lên trang thông tin tài khoản ngoài frontend, bạn sẽ cần thao tác như sau:

  • Sử dụng Meta Box để tạo các custom field mới tương ứng với các field bạn cần. Tức là, nếu bạn muốn hiển thị 3 trường thông tin là First Name, Last Name, Biographical Info ra trang thông tin tài khoản thì bạn cần tạo 3 custom field tương ứng như vậy.
  • Hiển thị các field mới tạo ra frontend bằng shortcode.

Cụ thể cách làm như sau:

Bước 1: Tạo các field tương ứng với các field mặc định

Nếu bạn chỉ sử dụng Meta Box (miễn phí) thì bạn có thể tự code, hoặc dùng Online Generator (UI) của Meta Box để tạo field.

Sử dụng Online Generator để tạo custom fields
Sử dụng Online Generator để tạo custom fields

Bạn lưu ý là ID của field bạn tạo cần phải khớp với ID mà WordPress đặt cho field tương ứng. Như ở đây, WordPress đặt ID cho field First Name là first_name, nên field mình tạo cũng phải có ID là first_name.

Kết quả bạn sẽ có một đoạn code như dưới đây và đặt vào file functions.php:

function your_prefix_get_meta_box( $meta_boxes ) {
    $prefix = 'prefix-';

    $meta_boxes[] = array(
        'id' => 'user-profile-default-fields',
        'title' => esc_html__( 'User Profile Default Fields', 'metabox-online-generator' ),
        'post_types' => array('post', 'page' ),
        'context' => 'advanced',
        'priority' => 'default',
        'autosave' => 'true',
        'fields' => array(
            array(
                'id' => $prefix . 'first_name',
                'type' => 'text',
                'name' => esc_html__( 'First Name', 'metabox-online-generator' ),
            ),
            array(
                'id' => $prefix . 'last_name',
                'type' => 'text',
                'name' => esc_html__( 'Last Name', 'metabox-online-generator' ),
           ),
           array(
                'id' => $prefix . 'biography',
                'type' => 'textarea',
                'name' => esc_html__( 'Textarea', 'metabox-online-generator' ),
           ),
       ),
    );

    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'your_prefix_get_meta_box' );

Ngoài ra, nếu bạn có Meta Box Builder (một extension khác Meta Box) thì bạn sẽ có sẵn UI để tạo field ngay trong admin dashboard như mình:

Tạo các field tương ứng với các field mặc định

Sử dụng Meta Box Builder để tạo custom fields ngay trong admin dashboard

Bước 2: Hiển thị các field mặc định lên trang thông tin tài khoản

Cuối cùng bạn lấy ID của meta box hay còn gọi là field group chứa các field mặc định bạn vừa tạo và đặt vào đoạn shortcode trên trang thông tin tài khoản.

Ở đây, ID meta box của mình là user-profile-default-field.

Xem ID của meta box trên giao diện Online Generator
Xem ID của meta box trên giao diện Online Generator
Đặt ID vào đoạn shortcode trên trang thông tin tài khoản
Đặt ID vào đoạn shortcode trên trang thông tin tài khoản

Lúc này bạn sẽ thấy trang thông tin tài khoản hiển thị thêm các field như sau:

Hiển thị các field mặc định lên trang thông tin tài khoản

Bạn có thể nhập thử thông tin vào các trường này.

Nếu bạn đặt ID của các field ở bước 1 đúng, thì các thông tin mà bạn nhập vào frontend sẽ được lưu vào đúng các trường tương ứng trong phần quản lý tài khoản ở backend.

Tạo và hiển thị các trường thông tin khác

Nếu bạn muốn thêm các trường thông tin khác với những trường mà WordPress đã có sẵn cho User, thì bạn có thể tự tạo thêm.

Cách làm cũng tương tự như với các trường thông tin mặc định ở trên, vẫn là:

  • Tạo field
  • Lấy ID của meta box chứa field
  • Đặt ID vào shortcode trên trang thông tin tài khoản

Tuy nhiên, ở bước tạo field, các bạn có thể đặt ID cho các field tuỳ ý.

Ví dụ như mình đã tạo một meta box với ID là user-profile-additional-fields như sau:

Tạo và hiển thị các trường thông tin khác

Mình đặt ID của meta box này vào trang thông tin tài khoản:

ID của meta box này vào trang thông tin tài khoản

Sau đó, các field thêm mới sẽ hiển thị trên trang thông tin tài khoản như sau:

các field thêm mới

Vậy là bạn đã hoàn thành trang thông tin tài khoản rồi đó.

Lời cuối

Để hoàn thiện các form đăng ký, đăng nhập và trang thông tin tài khoản, bạn nên dùng thêm các attribute mà Meta Box cung cấp ở đây. Ngoài ra, bạn cũng nên style các field để chúng hiển thị được đẹp mắt hơn. Bạn có thể dùng CSS theo hướng dẫn ở bài này để style cho các field.

Với công cụ Meta Box và MB User Profile này, bạn hoàn toàn có thể thêm/bớt các loại field theo ý muốn. Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *