Thêm trường tùy chỉnh đăng ký WordPress

4 giờ ago, WordPress Plugin, Views

Giới thiệu về Trường Tùy Chỉnh Đăng Ký WordPress

WordPress, một nền tảng quản lý nội dung (CMS) mạnh mẽ, cho phép người dùng tạo và quản lý trang web một cách dễ dàng. Một trong những tính năng quan trọng của WordPress là khả năng tùy chỉnh, cho phép bạn điều chỉnh trang web của mình để đáp ứng nhu cầu cụ thể. Thêm trường tùy chỉnh vào biểu mẫu đăng ký WordPress là một cách tuyệt vời để thu thập thông tin chi tiết hơn từ người dùng của bạn khi họ đăng ký tài khoản trên trang web của bạn.

Ví dụ, bạn có thể muốn thu thập thông tin như:

Địa chỉ
Số điện thoại
Sở thích
Nghề nghiệp

Việc thêm các trường này có thể giúp bạn hiểu rõ hơn về đối tượng của mình và cung cấp trải nghiệm cá nhân hóa hơn. Bài viết này sẽ hướng dẫn bạn cách thêm trường tùy chỉnh vào biểu mẫu đăng ký WordPress bằng nhiều phương pháp khác nhau.

Tại sao cần thêm Trường Tùy Chỉnh vào Biểu Mẫu Đăng Ký?

Việc thêm trường tùy chỉnh vào biểu mẫu đăng ký WordPress mang lại nhiều lợi ích:

Thu thập thông tin chi tiết hơn: Bạn có thể thu thập thông tin cụ thể mà bạn cần từ người dùng của mình.
Cải thiện trải nghiệm người dùng: Dựa trên thông tin thu thập được, bạn có thể cá nhân hóa trải nghiệm người dùng trên trang web của mình.
Phân đoạn người dùng: Bạn có thể phân đoạn người dùng dựa trên các trường tùy chỉnh để thực hiện các chiến dịch marketing mục tiêu.
Cải thiện quản lý dữ liệu: Dữ liệu người dùng được thu thập một cách có cấu trúc, giúp bạn quản lý và phân tích dễ dàng hơn.

Việc quyết định những trường nào cần thêm là quan trọng. Hãy suy nghĩ về những thông tin nào sẽ giúp bạn cải thiện trang web của mình và cung cấp giá trị cho người dùng.

Các Phương Pháp Thêm Trường Tùy Chỉnh Đăng Ký

Có nhiều phương pháp để thêm trường tùy chỉnh vào biểu mẫu đăng ký WordPress. Dưới đây là một số phương pháp phổ biến nhất:

Sử dụng Plugin: Đây là phương pháp đơn giản và phổ biến nhất, đặc biệt đối với người dùng không có nhiều kinh nghiệm lập trình.
Thêm Code vào functions.php: Phương pháp này yêu cầu kiến thức về PHP và WordPress.
Sử dụng Child Theme: Sử dụng child theme là một cách an toàn để thêm code vào trang web của bạn mà không ảnh hưởng đến theme gốc.

Chúng ta sẽ đi sâu vào từng phương pháp này.

Sử dụng Plugin để Thêm Trường Tùy Chỉnh

Đây là phương pháp dễ nhất và được khuyến khích cho người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress Repository cho phép bạn dễ dàng thêm trường tùy chỉnh vào biểu mẫu đăng ký.

Các plugin phổ biến bao gồm:

Profile Builder: Một plugin mạnh mẽ cho phép bạn tạo biểu mẫu đăng ký và chỉnh sửa hồ sơ tùy chỉnh.
User Registration: Một plugin đơn giản và dễ sử dụng để thêm trường tùy chỉnh.
Ultimate Member: Một plugin cộng đồng mạnh mẽ với nhiều tính năng, bao gồm khả năng thêm trường tùy chỉnh.

Hướng dẫn sử dụng Profile Builder (ví dụ):

Cài đặt và kích hoạt plugin Profile Builder.
Truy cập Profile Builder > Form Fields.
Nhấp vào “Add New Field” để thêm một trường tùy chỉnh mới.
Chọn loại trường (ví dụ: text, email, checkbox, select).
Nhập nhãn, mô tả và các tùy chọn khác cho trường.
Kéo và thả các trường vào biểu mẫu đăng ký của bạn.
Lưu các thay đổi.

Các plugin khác hoạt động tương tự, cung cấp giao diện trực quan để tạo và quản lý các trường tùy chỉnh.

Thêm Code vào functions.php (hoặc Child Theme)

Phương pháp này đòi hỏi kiến thức về PHP và WordPress. Bạn cần thêm code vào file functions.php của theme hoặc tốt hơn là của child theme của bạn. Sử dụng child theme đảm bảo rằng các thay đổi của bạn sẽ không bị mất khi theme được cập nhật.

Ví dụ code:


<?php
/**
 * Thêm trường số điện thoại vào biểu mẫu đăng ký
 */
function them_truong_so_dien_thoai() {
  ?>
    <p>
        <label for="phone"><?php _e( 'Số điện thoại', 'mydomain' ) ?><br />
            <input type="text" name="phone" id="phone" class="input" value="<?php esc_attr_e( stripslashes( ( isset( $_POST['phone'] ) ? $_POST['phone'] : '' ) ) ); ?>" size="25" />
        </label>
    </p>
  <?php
}
add_action( 'register_form', 'them_truong_so_dien_thoai' );

/**
 * Validate trường số điện thoại
 */
function validate_so_dien_thoai( $errors, $sanitized_user_login, $user_email ) {
    if ( empty( $_POST['phone'] ) ) {
        $errors->add( 'phone_error', __( 'LỖI: Vui lòng nhập số điện thoại.', 'mydomain' ) );
    }
    return $errors;
}
add_filter( 'registration_errors', 'validate_so_dien_thoai', 10, 3 );

/**
 * Lưu trường số điện thoại
 */
function save_so_dien_thoai( $user_id ) {
    if ( ! empty( $_POST['phone'] ) ) {
        update_user_meta( $user_id, 'phone', sanitize_text_field( $_POST['phone'] ) );
    }
}
add_action( 'user_register', 'save_so_dien_thoai' );

/**
 * Hiển thị trường số điện thoại trong hồ sơ người dùng
 */
function show_so_dien_thoai_trong_ho_so( $user ) {
    ?>
        <table class="form-table">
            <tr>
                <th><label for="phone"><?php _e("Số điện thoại", "mydomain"); ?></label></th>
                <td>
                    <input type="text" name="phone" id="phone" value="<?php echo esc_attr( get_the_author_meta( 'phone', $user->ID ) ); ?>" class="regular-text" /><br />
                    <span class="description"><?php _e("Vui lòng nhập số điện thoại của bạn.", "mydomain"); ?></span>
                </td>
            </tr>
        </table>
    <?php
}
add_action( 'show_user_profile', 'show_so_dien_thoai_trong_ho_so' );
add_action( 'edit_user_profile', 'show_so_dien_thoai_trong_ho_so' );

/**
 * Cập nhật trường số điện thoại trong hồ sơ người dùng
 */
function update_so_dien_thoai_trong_ho_so( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    if ( ! empty( $_POST['phone'] ) ) {
        update_user_meta( $user_id, 'phone', sanitize_text_field( $_POST['phone'] ) );
    }
}
add_action( 'personal_options_update', 'update_so_dien_thoai_trong_ho_so' );
add_action( 'edit_user_profile_update', 'update_so_dien_thoai_trong_ho_so' );

Giải thích code:

them_truong_so_dien_thoai(): Thêm trường số điện thoại vào biểu mẫu đăng ký.
validate_so_dien_thoai(): Kiểm tra xem trường số điện thoại có trống không.
save_so_dien_thoai(): Lưu số điện thoại vào user meta.
show_so_dien_thoai_trong_ho_so(): Hiển thị số điện thoại trong trang hồ sơ người dùng.
update_so_dien_thoai_trong_ho_so(): Cập nhật số điện thoại trong trang hồ sơ người dùng.

Quan trọng: Thay thế 'mydomain' bằng text domain của theme của bạn. Luôn sao lưu file functions.php trước khi thực hiện bất kỳ thay đổi nào.

Sử dụng Child Theme để Thêm Code

Việc sử dụng Child Theme để thêm code là một phương pháp an toàn hơn so với việc chỉnh sửa trực tiếp file functions.php của theme gốc. Child Theme cho phép bạn ghi đè các file của theme gốc mà không ảnh hưởng đến theme gốc. Khi theme gốc được cập nhật, các thay đổi trong Child Theme của bạn sẽ không bị mất.

Để tạo Child Theme:

Tạo một thư mục mới trong thư mục wp-content/themes/. Tên thư mục nên có dạng [tên-theme-gốc]-child (ví dụ: twentytwentythree-child).
Tạo một file style.css trong thư mục Child Theme của bạn với nội dung sau:


/*
Theme Name:   Twenty Twenty-Three Child
Theme URI:    https://example.com/twenty-twenty-three-child/
Description:  Twenty Twenty-Three Child Theme
Author:       Your Name
Author URI:   https://example.com
Template:     twentytwentythree
Version:      1.0.0
Text Domain:  twentytwentythree-child
*/

@import url('../twentytwentythree/style.css');

Thay thế Twenty Twenty-Three bằng tên của theme gốc của bạn.
Tạo (hoặc sao chép) file functions.php trong thư mục Child Theme của bạn.
Thêm code tùy chỉnh của bạn vào file functions.php của Child Theme.
Kích hoạt Child Theme của bạn trong Appearance > Themes.

Bây giờ, bạn có thể thêm code để thêm trường tùy chỉnh vào biểu mẫu đăng ký mà không lo lắng về việc mất các thay đổi của bạn khi theme gốc được cập nhật.

Hiển thị Trường Tùy Chỉnh trong Trang Quản Trị Người Dùng

Sau khi bạn đã thêm trường tùy chỉnh vào biểu mẫu đăng ký, bạn cần đảm bảo rằng bạn có thể xem và chỉnh sửa thông tin này trong trang quản trị người dùng. Code ví dụ ở trên đã bao gồm các hàm show_so_dien_thoai_trong_ho_so() và update_so_dien_thoai_trong_ho_so() để thực hiện việc này.

Kiểm tra:

Đăng nhập vào trang quản trị WordPress của bạn.
Truy cập Users > All Users.
Chọn một người dùng để chỉnh sửa.
Bạn sẽ thấy trường tùy chỉnh của bạn (ví dụ: “Số điện thoại”) trong trang chỉnh sửa người dùng.
Bạn có thể chỉnh sửa thông tin này và lưu các thay đổi.

Kết luận

Việc thêm trường tùy chỉnh vào biểu mẫu đăng ký WordPress là một cách tuyệt vời để thu thập thông tin chi tiết hơn từ người dùng của bạn và cải thiện trải nghiệm người dùng. Bạn có thể sử dụng plugin hoặc thêm code vào file functions.php (hoặc Child Theme) của bạn để thực hiện việc này. Chọn phương pháp phù hợp với trình độ kỹ thuật của bạn và nhu cầu của trang web của bạn. Hãy nhớ sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào.

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa