Tạo custom avatar cho user bằng Meta Box plugin

Trong WordPress, mỗi một tài khoản user trên website đều có ảnh đại diện riêng, nhưng để đặt được ảnh đại diện này thì người dùng đều phải sử dụng qua một công cụ là Gravatar. Việc làm này đôi khi hơi mất công. Tuy nhiên, bạn hoàn toàn có thể thay đổi cách đặt ảnh đại diện bằng cách tạo một trường thông tin cho phép người dùng đăng ảnh lên ngay trên web, sau đó dùng ảnh đó đặt làm avatar. Như vậy thao tác cho người dùng cũng sẽ đơn giản đi phần nào. Lúc này avatar mà user tự đặt (không thông qua Gravatar) được tạm gọi là custom avatar.

Meta Box plugin có thể giúp bạn làm việc đó khá đơn giản. Hãy cùng theo dõi bài hướng dẫn này để xem cách làm chi tiết nhé.

Chuẩn bị

Để tạo được custom avatar, bạn cần sử dụng Meta Box plugin và một số extension của nó như sau:

  • MB User Meta hoặc MB User Profile: cho phép bạn tạo thêm field cho user profile. Bạn có thể chọn một trong 2 extension này đều được.
  • Meta Box Builder: giúp bạn tạo field trên một UI dễ sử dụng, không cần dùng code.

Bước 1: Tạo field để đăng ảnh avatar

Bạn tạo một field dạng Single Image như sau: Vào mục Meta Box > Custom Fields > Add New. Sau đó, ở tab Fields của giao diện Edit Field Group, bạn tìm và chọn loại field là Single Image là đã tạo được field bạn cần rồi.

Tạo field để đăng ảnh avatar

ID của field Single Image này sẽ được sử dụng ở bước tiếp theo, nên mình sửa lại một chút cho dễ nhớ là 'custom_avatar'.

Tiếp theo, bạn di chuyển sang tab Settings, bạn nhớ chọn Users ở mục Show for nhé.

Lưu custom avatar field

Ở đây, nếu như bạn chưa cài đặt MB User Meta hoặc MB User Profile, thì bạn sẽ không thể thấy mục Users để chọn đâu. Nên hãy chắc chắn rằng bạn đã cài và kích hoạt một trong 2 plugin này nhé.

Cuối cùng nhấn nút Save Changes để lưu custom field vừa tạo.

Kết quả, khi vào mục Users để chính sửa một tài khoản bất kỳ, bạn sẽ thấy có thêm trường Custom Avatar xuất hiện để bạn đăng ảnh lên.

Custom Avatar

Bước 2: Lấy dữ liệu từ trường Custom Avatar để đặt làm Profile Picture

Lúc này, bạn có thể thử đăng ảnh vào field Custom Avatar vừa xong. Nhưng Profile Picture (ảnh đại diện của user) vẫn chưa thể tự động nhận ảnh từ trường Custom Avatar.

Đăng ảnh ở field Custom Avatar

Bạn đặt đoạn code sau vào file functions.php:

add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 );
function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    $user = false;
    if ( is_numeric( $id_or_email ) ) {
        $id     = (int) $id_or_email;
        $user = get_user_by( 'id' , $id );
    } elseif ( is_object( $id_or_email ) ) {
        if ( ! empty( $id_or_email->user_id ) ) {
            $id     = (int) $id_or_email->user_id;
            $user = get_user_by( 'id' , $id );
        }
    } else {
        $user = get_user_by( 'email', $id_or_email );
    }
    if ( $user && is_object( $user ) ) {
        $value  = rwmb_meta( 'custom_avatar', array( 'object_type' => 'user' ), $user->data->ID );
        if ( $value ) {
            $avatar = "<img src='" . $value['url'] . "' class='avatar avatar-" . $size . " photo' alt='" . $alt . "' height='" . $size . "' width='" . $size . "' />";
        }
    }
    return $avatar;
}

Ở đây, mình dùng hàm rwmb_meta để lấy avatar từ field có ID là 'custom_avatar'.

Sau khi thêm code, bạn sẽ thấy Profile Picture đã được đổi thành ảnh giống hệt với ảnh mà bạn đăng tải vào field Custom Avatar.

Lấy dữ liệu từ trường Custom Avatar để đặt làm Profile Picture

Lời cuối

Như vậy là bạn đã hoàn thành việc tạo custom avatar cho user rồi đó. Từ nay, user của bạn sẽ không cần phải tạo hay thay đổi avatar từ Gravatar nữa mà có thể thực hiện trực tiếp trên website của bạn, khá là tiện lợi đúng không. Nếu thấy bài viết này có ích với bạn, hãy để lại comment nhé và nhớ theo dõi các hướng dẫn của mình ở các bài viết sau nhé.

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 *