如何以 Wordpress 管理员身份更改用户的个人资料照片?
How do I change a user's profile photo as the admin on Wordpress?
我是我网站的管理员,但我无法更改任何用户的个人资料照片。好像只能绑定Gravatar
如何制作才能自己更改这张照片?有这样做的功能吗?我宁愿没有一个完整的插件来这样做。
为了在 WordPress 的管理面板中更改用户的个人资料照片,使用插件是最好和最简单的选择。
自定义用户个人资料照片
将自定义的用户个人资料照片添加到 WordPress 用户个人资料
https://wordpress.org/plugins/custom-user-profile-photo/
WP用户头像
使用 WordPress 媒体库中的任何图像作为自定义用户头像。添加您自己的默认头像。
默认情况下,WordPress 使用 Gravatar 根据您在 Gravatar 注册的电子邮件 ID 显示用户的个人资料图片。 WordPress 在仪表板中有用户个人资料页面,其中包含用于输入用户数据的字段数量,但缺少用于添加自定义用户头像的图像字段。
我们可以按照以下步骤自定义用户头像:
第 1 步:将脚本添加到页面。
在这一步中,我们将向管理页面添加必要的 Javascript。首先,我们将调用 wp_enqueue_media,它将使用所有媒体 JavaScript API 所需的所有脚本、样式、设置和模板排队。
另一个脚本将用于在单击按钮时打开媒体上传器并在 DOM 中插入附件 ID。
请将以下脚本复制到文件中并将该文件命名为 uploader.js
jQuery( document ).ready( function() {
/* WP Media Uploader */
var _shr_media = true;
var _orig_send_attachment = wp.media.editor.send.attachment;
jQuery( '.shr-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( 'Please select a valid image file' );
return false;
}
}
wp.media.editor.open( button );
return false;
} );
} );
现在在admin中不添加任何脚本如下。
function shr_add_admin_scripts(){
wp_enqueue_media();
wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'shr_add_admin_scripts');
请注意,uploader.js 保存在这个主题的 js 文件夹中,因此您必须根据主题中 uploader.js 的位置应用正确的路径。
第 2 步:添加上传者按钮以编辑个人资料页面。
function shr_extra_profile_fields( $user ) {
$profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false;
if( !empty($profile_pic) ){
$image = wp_get_attachment_image_src( $profile_pic, 'thumbnail' );
} ?>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image"><?php _e('Main Profile Image', 'shr') ?></label>
</th>
<td>
<input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />
<input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
<img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" />
</td>
</tr>
</table><?php
}
add_action( 'show_user_profile', 'shr_extra_profile_fields' );
add_action( 'edit_user_profile', 'shr_extra_profile_fields' );
add_action( 'user_new_form', 'shr_extra_profile_fields' );
在上面的代码中,show_user_profile、edit_user_profile 和 user_new_form 钩子用于添加上传按钮,因此该按钮将在现有用户的个人资料页面以及创建时可见新用户。
输入按钮是在点击时打开 WordPress 媒体上传器。
输入隐藏字段用于存储从 WordPress 媒体上传器插入或选择的图像的附件 ID。
第三步:将附件图片id保存到WordPress的usermeta table。
Usermeta table在WordPress中是用来存储与用户相关的额外信息的,这里我们为用户存储图片的附件id。使用该附件 ID,我们可以获取相关图像的所有数据。
为了保存附件 ID,我们将使用 profile_update 和 user_register 挂钩,它们将在创建任何新用户或更新现有用户时触发。
function shr_profile_update($user_id){
if( current_user_can('edit_users') ){
$profile_pic = empty($_POST['shr_image_id']) ? '' : $_POST['shr_image_id'];
update_user_meta($user_id, 'shr_pic', $profile_pic);
}
}
add_action('profile_update', 'shr_profile_update');
add_action('user_register', 'shr_profile_update');
就是这样,您已成功将个人资料图片上传器按钮添加到 WordPress 仪表板的个人资料页面。
参考:http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/
尝试此代码并放入 function.php 文件
add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://pngimages.net/sites/default/files/user-png-image-15189.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}
我是我网站的管理员,但我无法更改任何用户的个人资料照片。好像只能绑定Gravatar
如何制作才能自己更改这张照片?有这样做的功能吗?我宁愿没有一个完整的插件来这样做。
为了在 WordPress 的管理面板中更改用户的个人资料照片,使用插件是最好和最简单的选择。
自定义用户个人资料照片
将自定义的用户个人资料照片添加到 WordPress 用户个人资料
https://wordpress.org/plugins/custom-user-profile-photo/
WP用户头像
使用 WordPress 媒体库中的任何图像作为自定义用户头像。添加您自己的默认头像。
默认情况下,WordPress 使用 Gravatar 根据您在 Gravatar 注册的电子邮件 ID 显示用户的个人资料图片。 WordPress 在仪表板中有用户个人资料页面,其中包含用于输入用户数据的字段数量,但缺少用于添加自定义用户头像的图像字段。
我们可以按照以下步骤自定义用户头像:
第 1 步:将脚本添加到页面。
在这一步中,我们将向管理页面添加必要的 Javascript。首先,我们将调用 wp_enqueue_media,它将使用所有媒体 JavaScript API 所需的所有脚本、样式、设置和模板排队。
另一个脚本将用于在单击按钮时打开媒体上传器并在 DOM 中插入附件 ID。
请将以下脚本复制到文件中并将该文件命名为 uploader.js
jQuery( document ).ready( function() {
/* WP Media Uploader */
var _shr_media = true;
var _orig_send_attachment = wp.media.editor.send.attachment;
jQuery( '.shr-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( 'Please select a valid image file' );
return false;
}
}
wp.media.editor.open( button );
return false;
} );
} );
现在在admin中不添加任何脚本如下。
function shr_add_admin_scripts(){
wp_enqueue_media();
wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'shr_add_admin_scripts');
请注意,uploader.js 保存在这个主题的 js 文件夹中,因此您必须根据主题中 uploader.js 的位置应用正确的路径。
第 2 步:添加上传者按钮以编辑个人资料页面。
function shr_extra_profile_fields( $user ) {
$profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false;
if( !empty($profile_pic) ){
$image = wp_get_attachment_image_src( $profile_pic, 'thumbnail' );
} ?>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image"><?php _e('Main Profile Image', 'shr') ?></label>
</th>
<td>
<input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />
<input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
<img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" />
</td>
</tr>
</table><?php
}
add_action( 'show_user_profile', 'shr_extra_profile_fields' );
add_action( 'edit_user_profile', 'shr_extra_profile_fields' );
add_action( 'user_new_form', 'shr_extra_profile_fields' );
在上面的代码中,show_user_profile、edit_user_profile 和 user_new_form 钩子用于添加上传按钮,因此该按钮将在现有用户的个人资料页面以及创建时可见新用户。
输入按钮是在点击时打开 WordPress 媒体上传器。 输入隐藏字段用于存储从 WordPress 媒体上传器插入或选择的图像的附件 ID。
第三步:将附件图片id保存到WordPress的usermeta table。
Usermeta table在WordPress中是用来存储与用户相关的额外信息的,这里我们为用户存储图片的附件id。使用该附件 ID,我们可以获取相关图像的所有数据。
为了保存附件 ID,我们将使用 profile_update 和 user_register 挂钩,它们将在创建任何新用户或更新现有用户时触发。
function shr_profile_update($user_id){
if( current_user_can('edit_users') ){
$profile_pic = empty($_POST['shr_image_id']) ? '' : $_POST['shr_image_id'];
update_user_meta($user_id, 'shr_pic', $profile_pic);
}
}
add_action('profile_update', 'shr_profile_update');
add_action('user_register', 'shr_profile_update');
就是这样,您已成功将个人资料图片上传器按钮添加到 WordPress 仪表板的个人资料页面。
参考:http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/
尝试此代码并放入 function.php 文件
add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://pngimages.net/sites/default/files/user-png-image-15189.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}