По умолчанию, WordPress использует Gravatar для отображения пользователя изображение профиля на основе вашей электронной почты ID зарегистрированного Gravatar. WordPress имеет страницу профиля пользователя на панели управления, которая содержит количество полей для ввода пользовательских данных, но в ней отсутствует поле для добавления пользовательского аватара пользователя.
Мы можем настроить пользовательский аватар в следующих шагах:
Шаг 1: Добавьте скрипт на страницу.
На этом этапе мы добавим необходимый Javascript на страницы администратора. Сначала мы назовем wp_enqueue_media, в котором перечислены все сценарии, стили, настройки и шаблоны, необходимые для использования всех API-интерфейсов JavaScript для мультимедиа.
Другим сценарием будет открытие медиа-загрузчика при нажатии кнопки и вставка идентификатора в DOM.
скопировав следующий скрипт в файл и имя, что файл, как 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;
});
});
Теперь добавьте Нота скрипты администратора следующим образом.
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.
Шаг 3: Сохраните идентификатор изображения вложения в таблицу usermeta в WordPress.
Таблица Usermeta в WordPress предназначена для хранения дополнительной информации, относящейся к пользователю, здесь мы будем хранить идентификатор вложения изображения для пользователя. Используя этот идентификатор присоединения, мы можем получить все данные соответствующего изображения.
Для сохранения идентификатора вложений мы будем использовать перехватывания 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');
Это все, и вы успешно добавили кнопку pic uploader профиля на страницу профиля на панели инструментов WordPress.
Ссылка: http://sharethingz.com/wordpress/custom-user-avatar-in-wordpress/
@Will Николс. вы получили свой результат, как указано в вопросе, используя плагины, как было предложено. :) Если вы чувствуете какую-то помеху со мной, я помогу вам. –