Chào các bạn, lại là Wolfactive tụi mình đây. Hôm nay tụi mình sẽ hướng dẫn các bạn up ảnh và thay đổi ảnh đại diện trên WP. Như các bạn biết nếu các bạn muốn thay đổi ảnh đại diện trên WP đều phải vào Gravatar để thay đổi. Bởi WP liên kết với Gravatar. Tuy nhiên nếu bạn làm một website có quản lí user thì việc để cho user thay đổi avatar như vậy thì rất là bất tiện. Và nhiều user sẽ không thích. Như vậy các bạn thường nghĩ đến việc sử dụng Plugin để hỗ trợ. Do đó mục đích của bài này là mình sẽ giúp các bạn giải quyết vấn đề đó.
1/ Chuẩn bị:
Để chuẩn bị cho việc trên đầu tiên các bạn cần sử dụng plugin tạo field để có thể Upload ảnh lên. ở đây mình ACF plugin để sử dụng vì nó rất dễ tương tác, các bạn có thể download nó tại plugin trên WP hoặc download tại đây.
2/ Các bước cần làm
Bước 1:
Đầu tiên sau khi các bạn tải ACF về rồi thì các bạn cần tạo một field group mới.
Ở ảnh trên mình tạo một field group có tên là User Setup, kèm với tạo field item "Choose Your Avatar" với field type là Image. Bên cạnh đó mình có setup thêm Location như sau để hiển thị trong user.
Bước 2:
Sau khi setup xong rồi thi các bạn vào user. Như mình nói ở đầu bài viết, chúng ta sẽ ko thay đổi ảnh đại diện trên Gravatar tại Profile Picture nữa. Mà thay vào đó bạn sẽ thấy field như sau:
Các bạn chọn ảnh mà bạn muốn hiển thị nhé.
Bước 3:
Sau đó ta cần phải thiết lập lại luồng để lấy Avatar ra như sau:
function custom_user_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 );
} else if ( 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 ) ) {
$avatar = get_field('choose_your_avatar','user_'.$user->data->ID);
$avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
}
return $avatar;
}mình sẽ giải thích function trên cho các bạn hiểu. Đầu tiên ta cần phải check điều kiện khi truyền biến $id_or_email vào sẽ là ở dạng id hay là ở dạng email. Nếu là id, thì mình sẽ lấy dữ liệu user theo id bằng hàm get_user_by(‘id’,’….’). Nếu là một object thì mình sẽ kiểm tra xem id của nó có tồn tại hay không thì lấy id của nó ra. Ngược lại nếu không phải 2 trường hợp trên mình sẽ lấy thông tin user theo mail.
Cuối cùng thì mình kiểm tra xem user đó có tồn tại hay không thì bắt đầu get_field mà bạn chọn avatar ra bằng function của ACF getfield(”tên field","user".userID). Và sẽ gán src của nó bằng src mà ảnh bạn đã chọn rồi return giá trị về.
Sau đó các bạn cần phải hook vào như sau:
add_filter( 'get_avatar' , 'custom_user_avatar' , 1 , 5 );Trong đó get_avatar là biến của WP, custom_user_avatar là hàm xử lí của bạn, 1 llà độ ưu tiên thực thi, 5 là số lượng parameter truyền vào array (cái này dựa vào số lượng parameter bạn truyền vào function của bạn). Các bạn có thể đọc thêm tại đây về hook trong WP.
Kết quả:
3/ Tổng kết:
Như vậy tụi mình đã hướng dẫn các bạn cách thay đổi Avatar mà không cần dùng plugin hay đụng đến Gravatar của WP cực kì đơn giản. Mình hi vọng bài viết này sẽ giúp ích cho các bạn nhiều trong lĩnh vực lập trình WP. Cảm ơn các bạn đã theo dõi bài viết. Mong các bạn ủng hộ tụi mình nhiều hơn nữa nhé. Mỗi lượt like và theo dõi fanpage https://www.facebook.com/Wolfactiveweb.design.SEO tụi mình là thêm động lực để tụi mình viết blog chia sẽ nhiều hơn. Cảm ơn các bạn.