Thêm Upload Avatar cho thành viên WordPress bằng Functions

Trong bài viết này mình sẽ giúp Bạn Thêm Upload Avatar cho thành viên Wordpress bằng Functions một cách đơn giản nhất

Thêm Upload Avatar cho thành viên WordPress bằng Functions
4.9 (97.78%) 9 votes
Thêm Upload Avatar cho thành viên WordPress bằng Functions

Thông thường khi dùng WordPress, trong phần quản lý thành viên không có mục Upload Avatar thay vào đó là các avatar mặc định mà WordPress cho phép, nếu Website của Bạn có mục đích hoạt động cộng đồng thì nó hơi hạn chế. Vậy nên trong bài viết này mình sẽ giúp Bạn Thêm Upload Avatar cho thành viên WordPress bằng Functions rất đơn giản.

Thêm Upload Avatar cho thành viên WordPress bằng Functions

Ưu điểm

  • Giúp thành viên có thể tự upload avatar ưa thích của mình
  • Không cần sử dụng plugin, dễ dàng tùy biến code
  • Sử dụng ít javascript giúp tối ưu tốc load trang

Bắt đầu nào

– Tạo 1 file Js upload : uploadavatar.js với nội dung

jQuery( document ).ready( function() {
    /* vnkings.com Media Uploader */
    var _vnkings_media = true;
    var _vnkings_send_attachment = wp.media.editor.send.attachment;
    jQuery( '.vnkings-image' ).click( function() {
        var button = jQuery( this ),
                textbox_id = jQuery( this ).attr( 'data-id' ),
                image_id = jQuery( this ).attr( 'data-src' ),
                _shr_media = true;
        wp.media.editor.send.attachment = function( props, attachment ) {
            if ( _shr_media && ( attachment.type === 'image' ) ) {
                if ( image_id.indexOf( "," ) !== -1 ) {
                    image_id = image_id.split( "," );
                    $image_ids = '';
                    jQuery.each( image_id, function( key, value ) {
                        if ( $image_ids )
                            $image_ids = $image_ids + ',#' + value;
                        else
                            $image_ids = '#' + value;
                    } );
                    var current_element = jQuery( $image_ids );
                } else {
                    var current_element = jQuery( '#' + image_id );
                }
                jQuery( '#' + textbox_id ).val( attachment.id );
                    console.log(textbox_id)
                current_element.attr( 'src', attachment.url ).show();
            } else {
                alert( 'Vui lòng chọn một tập tin hình ảnh hợp lệ' );
                return false;
            }
        }
        wp.media.editor.open( button );
        return false;
    } );
} );

Bạn Upload file này lên thư mục Theme đang sử dụng(chút nữa sẽ cần dùng).

– Tiếp đến Bạn thêm đoạn code này vào file functions.php

function my_custom_scripts(){
    wp_enqueue_media();
    wp_enqueue_script('my-custom-jquery', get_stylesheet_directory_uri().'/uploadavatar.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'my_custom_scripts');

Giải thích

  • function my_custom_scripts() : Tạo Functions my_custom_scripts
  • wp_enqueue_media() : Cho phép sử dụng thư viện WP Media
  • wp_enqueue_script(…./uploadavatar.js) : Sử dụng javascript từ file mới tạo uploadavatar.js bên trên
  • add_action(…) : thực hiện Functions và thêm các Script trong function vào trang Admin của bạn

– Tiếp đến vẫn ở file Functions.php bạn thêm form upload và xử lý ảnh:

function vnkings_profile_fields( $user ) {
    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'vnkingspic', true): false;
    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'medium' );
    } ?>
 <fieldset>
<legend><?php _e('Ảnh đại diện', 'vnkings') ?></legend>
    <table class="form-table fh-profile-upload-options wpuf-table">
        <tr>
		<th><label for="uploadnd">Hình ảnh đại diện của bạn</label></th>
            <td class="wp-core-ui nd">
                <input type="button" data-id="vnkings_image_id" data-src="vnkings-img" class="button vnkings-image" name="vnkings_image" id="vnkings-image" value="Upload" />
                <input type="hidden" class="button" name="vnkings_image_id" id="vnkings_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="vnkings-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> width: 200px; height: auto; border:1px solid cadetblue;padding:2px;" />
            </td>
        </tr>
    </table>
	</fieldset>
	<?php
}
add_action( 'show_user_profile', 'vnkings_profile_fields' );
add_action( 'edit_user_profile', 'vnkings_profile_fields' );
add_action( 'user_new_form', 'vnkings_profile_fields' );
function vnkings_profile_update($user_id){
 
    if( current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || current_user_can('subscriber') || current_user_can('contributor') ){
        $profile_pic = empty($_POST['vnkings_image_id']) ? '' : $_POST['vnkings_image_id'];
        update_user_meta($user_id, 'vnkingspic', $profile_pic);
    }
}
add_action('profile_update', 'vnkings_profile_update');
add_action('user_register', 'vnkings_profile_update');

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){
		$custom_avatar	=	get_user_meta( $user->data->ID, 'vnkingspic', true );

		if( !empty($custom_avatar) ){
			
			$image	=	wp_get_attachment_image_src($custom_avatar, 'medium');
			if( $image ){
				$safe_alt = esc_attr($alt);
				$avatar = "<img alt='{$safe_alt}' src='{$image[0]}' class='avatar photo' height='60px' width='60px' />";
			}
		}
	}
	return $avatar;
}

Giải thích

  • Dòng 1 đến dòng 5 : kiểm tra đã thành viên đã có ảnh avatar chưa. Nếu có thì hiển thị ảnh Avatar ra
  • Dòng 6 đến dòng 20 : Nếu chưa có avatar thì hiện form upload
  • Dòng 21 đến dòng 23 : Thêm functions vào khu vực Thành viên
  • Dòng 24 đến dòng 32 : Kiểm tra thành viên và thực hiện Upload
  • Dòng 35 đến dòng 60 : Tạo funtions cho phép bạn sử dụng avatar bên trên, nếu bạn chưa upload avatar mặc định sẽ sử dụng avatar của Wordpess

Lưu ý: các kích thước mình đặt bạn hoàn toàn có thể thay đổi để hợp với trang của bạn.

Tổng kết lại bạn sẽ có Functions hoàn chỉnh :

function my_custom_scripts(){
    wp_enqueue_media();
    wp_enqueue_script('my-custom-jquery', get_stylesheet_directory_uri().'/uploadavatar.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'my_custom_scripts');
function vnkings_profile_fields( $user ) {
    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'vnkingspic', true): false;
    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'medium' );
    } ?>
 <fieldset>
<legend><?php _e('Ảnh đại diện', 'vnkings') ?></legend>
    <table class="form-table fh-profile-upload-options wpuf-table">
        <tr>
		<th><label for="uploadnd">Hình ảnh đại diện của bạn</label></th>
            <td class="wp-core-ui nd">
                <input type="button" data-id="vnkings_image_id" data-src="vnkings-img" class="button vnkings-image" name="vnkings_image" id="vnkings-image" value="Upload" />
                <input type="hidden" class="button" name="vnkings_image_id" id="vnkings_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="vnkings-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> width: 200px; height: auto; border:1px solid cadetblue;padding:2px;" />
            </td>
        </tr>
    </table>
	</fieldset>
	<?php
}
add_action( 'show_user_profile', 'vnkings_profile_fields' );
add_action( 'edit_user_profile', 'vnkings_profile_fields' );
add_action( 'user_new_form', 'vnkings_profile_fields' );
function vnkings_profile_update($user_id){
 
    if( current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || current_user_can('subscriber') || current_user_can('contributor') ){
        $profile_pic = empty($_POST['vnkings_image_id']) ? '' : $_POST['vnkings_image_id'];
        update_user_meta($user_id, 'vnkingspic', $profile_pic);
    }
}
add_action('profile_update', 'vnkings_profile_update');
add_action('user_register', 'vnkings_profile_update');

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){
		$custom_avatar	=	get_user_meta( $user->data->ID, 'vnkingspic', true );

		if( !empty($custom_avatar) ){
			
			$image	=	wp_get_attachment_image_src($custom_avatar, 'medium');
			if( $image ){
				$safe_alt = esc_attr($alt);
				$avatar = "<img alt='{$safe_alt}' src='{$image[0]}' class='avatar photo' height='60px' width='60px' />";
			}
		}
	}
	return $avatar;
}

Lấy Avatar cho thành viên ra ngoài:

<?php $user_ID = get_current_user_id(); $avatar = get_user_meta( $user_ID,  'vnkingspic', true); $avatar_image =wp_get_attachment_image_src($avatar, 'medium'); ?>
<img src="<?php echo $avatar_image[0]; ?>">

Nếu có bất kỳ điều gì chưa hiểu, bạn hãy đặt câu hỏi phía dưới khung bình luận nhé

Chúc các bạn thành công!

Bài liên quan

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?