Làm cách nào để lấy ảnh đại diện hiện tại trong wordpress?

Nhưng, không dừng lại ở đây. Tìm hiểu cách tạo biểu mẫu đăng ký và biểu mẫu quyên góp để đặt trên trang web WordPress của bạn trong phần tiếp theo. Hoặc bạn cũng có thể truy cập blog của chúng tôi để đọc thêm các bài viết, bao gồm hướng dẫn về WordPress.    

Mọi người phát triển trang web WordPress, sớm hay muộn, sẽ phải đối mặt với nhu cầu thay đổi ảnh đại diện của người dùng. Đó là khi họ phát hiện ra rằng bên trong WordPress, không có cách nào để làm như vậy

Nếu bạn đang ở trong tình huống ngay bây giờ để tự hỏi mình. Làm cách nào để thay đổi ảnh hồ sơ của tôi trên WordPress?

Có 3 cách để làm

1. Thông qua Gravatar. com, đó là cách WP tiêu chuẩn
2. Sử dụng plugin WordPress
3. Với mã tùy chỉnh sẽ được thêm vào các chức năng của chủ đề của bạn. php

Trước khi bắt đầu phần hướng dẫn, hãy làm rõ mọi thứ về ảnh đại diện của người dùng WordPress hay còn gọi là Hình đại diện WP

Hình đại diện WordPress là gì?

Avatar mặc định của WordPress

Hình đại diện WP là ảnh đại diện của người dùng trên trang web WordPress

Nó thường xuất hiện bên cạnh mỗi bình luận, nhưng tùy thuộc vào chủ đề được sử dụng, nó cũng có thể được sử dụng hiển thị ở cuối bài viết để làm nổi bật tác giả

Nếu bạn đang sử dụng bbPress hoặc BuddyPress, hình đại diện sẽ hiển thị bên cạnh mỗi chủ đề diễn đàn hoặc bài đăng trả lời và hoạt động

Theo mặc định, WordPress sử dụng hình đại diện được xác định trước cho tất cả người dùng và như tôi đã đề cập trước đây, bên trong WordPress, không có cách nào để thay đổi nó

Ngay cả Avatar được xác định trước, không tồn tại trên máy chủ của bạn

Thay vào đó, nó được tải qua gravatar. com, một trang web thuộc sở hữu của Automattic, công ty đứng sau WordPress. com

Cách thay đổi ảnh đại diện trên WordPress qua Gravatar. com?

cách tiêu chuẩn mà WordPress cung cấp, để thay đổi ảnh hồ sơ (không có plugin hoặc mã tùy chỉnh) là truy cập Gravatar. com

Bạn sẽ cần kết nối một WordPress. com (vâng, bạn sẽ cần tài khoản đầu tiên đó để đăng ký) và tạo một tài khoản để tải lên gravatar của bạn

Gravatar, viết tắt của Globally Recognized Avatar, là một ảnh đại diện được liên kết với một địa chỉ email trên Gravatar. com

Gravatar của bạn sẽ được sử dụng bất cứ khi nào bạn viết bình luận, bài đăng trên diễn đàn hoặc bài đăng trên blog trên bất kỳ trang web nào do WordPress cung cấp

Điều này hợp lệ cho cả WordPress. blog com và các trang web WordPress tự lưu trữ

Hình đại diện toàn cầu nghe có vẻ là một tính năng tuyệt vời, vậy tại sao ai đó lại muốn tải hình đại diện của chính họ lên máy chủ của họ?

Có thể có một số lý do, nhưng 3 lý do quan trọng nhất có lẽ là

• Vì tải từ gravatar. com có ​​thể tăng đáng kể thời gian tải của các trang có nhiều bình luận hơn
• Để có toàn quyền kiểm soát các tài nguyên được tải trên trang web của bạn
• Cuối cùng vì không phải ai cũng có WordPress. tài khoản com hoặc muốn có một tài khoản

Làm cách nào để thay đổi ảnh đại diện trên WordPress thông qua plugin?

có một số plugin sẽ cho phép người dùng của bạn thay đổi ảnh hồ sơ của họ trên trang web WordPress của bạn

Tuy nhiên, hầu hết trong số họ sẽ làm được nhiều hơn thế và bạn có thể không cần một số hoặc hầu hết các tính năng của họ

Rất nhiều trong số chúng cho phép bạn đặt xếp hạng cho ảnh, điều này có thể hữu ích nếu bạn đang tải hình đại diện từ xa như với gravatar. com

Nhưng nó không thể thiếu nếu bạn đang tải ảnh hồ sơ từ máy chủ cục bộ của mình

Nhiều người khác cũng sẽ cung cấp tùy chọn tải lên hình đại diện từ giao diện người dùng. Một tính năng hay, nhưng nếu bạn chỉ cần tác giả của mình thay đổi ảnh hồ sơ của họ, thì có lẽ điều đó không cần thiết vì tác giả đã có quyền truy cập vào phụ trợ WP

Plugin duy nhất mà tôi thấy chỉ cho phép tải lên hình đại diện tùy chỉnh cục bộ và thực hiện theo cách đơn giản là plugin Hình đại diện người dùng đơn giản

Plugin Wp Avatar đơn giản

Plugin này thực hiện gần như chính xác những gì mã trong hướng dẫn bên dưới của chúng tôi thực hiện

Sự khác biệt chính là mã của chúng tôi cực kỳ nhẹ với ít hơn 100 dòng mã (không có chú thích)

Plugin Simple User Avatar sẽ thêm khoảng gấp đôi số dòng mã (giữa PHP, CSS và JS)

Ngoài ra, plugin này không cho phép thay thế hình đại diện mặc định và nó sẽ không ngăn tải hình đại diện mặc định từ gravatar. com

Điều đó nói rằng, cho đến nay nó là plugin đơn giản và nhẹ nhất trên WordPress. kho plugin org để quản lý avatar

Nếu bạn không gặp sự cố khi thêm một plugin khác vào bản cài đặt của mình để khiến người dùng thay đổi ảnh hồ sơ của họ và bạn chỉ cần điều đó, tôi khuyên bạn nên sử dụng plugin Hình đại diện người dùng đơn giản

Thay vào đó, nếu bạn muốn thêm một số mã hiện đại vào chủ đề của mình mà không cần rườm rà và bạn muốn giải quyết tất cả các vấn đề liên quan đến tải hình đại diện qua gravatar. com và quên các bản cập nhật đi… đoạn mã sau đây là thứ bạn đang tìm kiếm

Làm cách nào để thay đổi ảnh hồ sơ trên WordPress bằng mã tùy chỉnh?

Cuối cùng, chúng ta đến phần hướng dẫn của mình

Chúng tôi đã viết mã này bằng cách sử dụng các phương pháp hay nhất của WordPress và chúng tôi sẽ sử dụng trình tải lên phương tiện tiêu chuẩn đi kèm với WordPress và không có gì khác

Đoạn mã sau có thể được thêm vào các chức năng của chủ đề của bạn. php hoặc nếu bạn đang sử dụng plugin đoạn mã, trên một đoạn mã mới

Bắt đầu nào

1) Trước hết, chúng ta cần liệt kê các tập lệnh của Trình tải lên phương tiện. Điều quan trọng là chỉ tải nó trên trang hồ sơ. Chúng tôi thêm chức năng bằng hành động admin_enqueue_scripts

/**
 * Custom Avatar Without a Plugin
 */
// 1. Enqueue the needed scripts.
add_action( "admin_enqueue_scripts", "ayecode_enqueue" );
function ayecode_enqueue( $hook ){
	// Load scripts only on the profile page.
	if( $hook === 'profile.php' || $hook === 'user-edit.php' ){
		add_thickbox();
		wp_enqueue_script( 'media-upload' );
		wp_enqueue_media();
	}
}
2) Tiếp theo, chúng ta cần tạo chức năng để sử dụng tập lệnh tải lên phương tiện bên trong trang chỉnh sửa hồ sơ của WordPress. Chúng tôi thêm chức năng của mình bằng hành động admin_print_footer_scripts-profile. php và admin_print_footer_scripts-user-edit. php
// 2. Scripts for Media Uploader.
function ayecode_admin_media_scripts() {
	?>
	
	
3) Bây giờ chúng ta cần thêm phần hình ảnh tùy chỉnh cho ảnh đại diện vào trang chỉnh sửa hồ sơ của WordPress. Chúng tôi thêm chức năng của mình bằng hành động show_user_profile và edit_user_profile
// 3. Adding the Custom Image section for avatar.
function custom_user_profile_fields( $profileuser ) {
	?>
	

	

		

			

				
			
			

				ID );
				if ( $custom_avatar == '' ){
					$custom_avatar = get_avatar_url( $profileuser->ID );
				}else{
					$custom_avatar = esc_url_raw( $custom_avatar );
				}
				?>
				
				
				" id="uploadimage"/>

				
					
				
			
		
	
	
4) Chúng ta cũng cần một chức năng để lưu các giá trị trong cơ sở dữ liệu. Chúng tôi thêm chức năng của mình bằng hành động personal_options_update và edit_user_profile_update
// 4. Saving the values.
add_action( 'personal_options_update', 'ayecode_save_local_avatar_fields' );
add_action( 'edit_user_profile_update', 'ayecode_save_local_avatar_fields' );
function ayecode_save_local_avatar_fields( $user_id ) {
	if ( current_user_can( 'edit_user', $user_id ) ) {
		if( isset($_POST[ 'ayecode-custom-avatar' ]) ){
			$avatar = esc_url_raw( $_POST[ 'ayecode-custom-avatar' ] );
			update_user_meta( $user_id, 'ayecode-custom-avatar', $avatar );
		}
	}
}
5) Cuối cùng, chúng tôi đặt hình ảnh đã tải lên làm hình đại diện của người dùng và đối với người dùng không có hình ảnh đã tải lên, chúng tôi sẽ sử dụng hình đại diện cục bộ mà chúng tôi đã tạo. Chúng tôi thêm chức năng của mình bằng bộ lọc get_avatar_url
// 5. Set the uploaded image as default gravatar.
add_filter( 'get_avatar_url', 'ayecode_get_avatar_url', 10, 3 );
function ayecode_get_avatar_url( $url, $id_or_email, $args ) {
	$id = '';
	if ( is_numeric( $id_or_email ) ) {
		$id = (int) $id_or_email;
	} elseif ( is_object( $id_or_email ) ) {
		if ( ! empty( $id_or_email->user_id ) ) {
			$id = (int) $id_or_email->user_id;
		}
	} else {
		$user = get_user_by( 'email', $id_or_email );
		$id = !empty( $user ) ?  $user->data->ID : '';
	}
	//Preparing for the launch.
	$custom_url = $id ?  get_user_meta( $id, 'ayecode-custom-avatar', true ) : '';
	
	// If there is no custom avatar set, return the normal one.
	if( $custom_url == '' || !empty($args['force_default'])) {
		return esc_url_raw( 'https://sg.cdnki.com/lam-cach-nao-de-lay-anh-dai-dien-hien-tai-trong-wordpress---aHR0cHM6Ly93cGdkLWp6Z25nenltbTF2NTBzM2UzZnFvdHd0ZW5wanh1cXNtdmt1YS5uZXRkbmEtc3NsLmNvbS93cC1jb250ZW50L3VwbG9hZHMvc2l0ZXMvMTIvMjAyMC8wNy9ibG0tYXZhdGFyLnBuZw==.webp' ); 
	}else{
		return esc_url_raw($custom_url);
	}
}
Vậy là xong, nếu bạn muốn toàn bộ mã chỉ cần sao chép và dán, bạn có thể tìm thấy tại đây. Đạo cụ cho nhà phát triển Laranz của chúng tôi vì điều đó
/**
 * Custom Avatar Without a Plugin
 */

// 1. Enqueue the needed scripts.
add_action( "admin_enqueue_scripts", "ayecode_enqueue" );
function ayecode_enqueue( $hook ){
	// Load scripts only on the profile page.
	if( $hook === 'profile.php' || $hook === 'user-edit.php' ){
		add_thickbox();
		wp_enqueue_script( 'media-upload' );
		wp_enqueue_media();
	}
}

// 2. Scripts for Media Uploader.
function ayecode_admin_media_scripts() {
	?>
	
	
	

	

		

			

				
			
			

				ID );
				if ( $custom_avatar == '' ){
					$custom_avatar = get_avatar_url( $profileuser->ID );
				}else{
					$custom_avatar = esc_url_raw( $custom_avatar );
				}
				?>
				
				
				" id="uploadimage"/>

				
					
				
			
		
	
	user_id ) ) {
			$id = (int) $id_or_email->user_id;
		}
	} else {
		$user = get_user_by( 'email', $id_or_email );
		$id = !empty( $user ) ?  $user->data->ID : '';
	}
	//Preparing for the launch.
	$custom_url = $id ?  get_user_meta( $id, 'ayecode-custom-avatar', true ) : '';
	
	// If there is no custom avatar set, return the normal one.
	if( $custom_url == '' || !empty($args['force_default'])) {
		return esc_url_raw( 'https://wpgd-jzgngzymm1v50s3e3fqotwtenpjxuqsmvkua.netdna-ssl.com/wp-content/uploads/sites/12/2020/07/blm-avatar.png' ); 
	}else{
		return esc_url_raw($custom_url);
	}
}
Chúng tôi cũng đã thay đổi tất cả Gravatars mặc định bằng hình đại diện được tải lên cục bộ
Với khối mã cuối cùng, chúng tôi cũng đã thay đổi Hình đại diện Người đàn ông bí ẩn mặc định bằng hình đại diện tùy chỉnh mà chúng tôi đã tải lên cục bộ
Chúng tôi đã tạo cái này cho dịp này. (để thể hiện sự ủng hộ của chúng tôi đối với phong trào Black Lives Matter)
Hình đại diện BLM
Đảm bảo sửa đổi phần in đậm của dòng này bằng URL của hình đại diện tùy chỉnh của bạn
return esc_url_raw( 'https://userswp.io/wp-content/uploads/sites/12/2020/07/blm-avatar.png' );
Nếu bạn cần nhiều hơn là chỉ cho phép người dùng thay đổi ảnh hồ sơ của họ, chẳng hạn như hồ sơ người dùng đầy đủ và có thể tùy chỉnh, thư mục người dùng và nhiều tính năng khác, chúng tôi khuyên bạn nên xem xét plugin UsersWP của mình