В стандартной форме регистрации WordPress нет возможности загрузить изображение пользователя, например, аватар. В этой статье мы подробно рассмотрим, как добавить кастомное поле для загрузки изображения на страницу регистрации WordPress, обеспечить проверку загружаемого файла и подтвердить успешную загрузку без перезагрузки страницы с помощью AJAX.
Почему важно добавить поле загрузки изображения в регистрацию WordPress
Добавление поля загрузки изображения в форму регистрации позволяет пользователям сразу задать свой аватар или профильное фото, что улучшает UX и снижает необходимость дополнительного редактирования профиля после регистрации. Особенно полезно для сайтов сообществ, форумов и обучающих платформ.
Однако стандартный функционал WordPress не поддерживает загрузку файлов на странице регистрации, поэтому понадобится написать собственный код с использованием хуков WordPress и AJAX.
Добавление кастомного поля загрузки изображения на страницу регистрации
Для начала нам нужно добавить поле загрузки в форму регистрации. Используем хук register_form, чтобы вывести HTML нашего поля.
function wpcode_add_image_upload_field() {
?>
<p>
<label for="wpcode_user_avatar">Загрузить аватар<br />
<input type="file" name="wpcode_user_avatar" id="wpcode_user_avatar" accept="image/*" />
</label>
<span id="wpcode_avatar_upload_status"></span>
</p>
<?php
}
add_action('register_form', 'wpcode_add_image_upload_field');Это добавит поле загрузки файла с id wpcode_user_avatar. Также мы добавили span с id для вывода статуса загрузки.
Валидация и сохранение изображения при регистрации пользователя
Теперь нужно проверить файл, если он был загружен, и сохранить его в директорию загрузок с привязкой к новому пользователю.
Используем хук registration_errors для проверки файла и user_register для сохранения.
function wpcode_validate_avatar_upload($errors, $sanitized_user_login, $user_email) {
if (!empty($_FILES['wpcode_user_avatar']['name'])) {
$file = $_FILES['wpcode_user_avatar'];
$allowed_types = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($file['type'], $allowed_types)) {
$errors->add('wpcode_avatar_error', 'Пожалуйста, загрузите изображение в формате JPG, PNG или GIF.');
}
if ($file['size'] > 2 * 1024 * 1024) { // 2MB limit
$errors->add('wpcode_avatar_error', 'Размер изображения не должен превышать 2 МБ.');
}
if ($file['error'] !== UPLOAD_ERR_OK) {
$errors->add('wpcode_avatar_error', 'Ошибка при загрузке файла. Попробуйте снова.');
}
}
return $errors;
}
add_filter('registration_errors', 'wpcode_validate_avatar_upload', 10, 3);
function wpcode_save_user_avatar($user_id) {
if (!empty($_FILES['wpcode_user_avatar']['name'])) {
require_once(ABSPATH . 'wp-admin/includes/file.php');
$uploadedfile = $_FILES['wpcode_user_avatar'];
$upload_overrides = ['test_form' => false];
$movefile = wp_handle_upload($uploadedfile, $upload_overrides);
if ($movefile && !isset($movefile['error'])) {
update_user_meta($user_id, 'wpcode_user_avatar', $movefile['url']);
}
}
}
add_action('user_register', 'wpcode_save_user_avatar');В этой части мы проверяем тип и размер файла, а также обрабатываем ошибки загрузки. Если всё в порядке, сохраняем файл через wp_handle_upload и сохраняем URL в мета-поле пользователя.
Подтверждение успешной загрузки через AJAX без перезагрузки
Чтобы улучшить UX, добавим AJAX загрузку файла сразу при выборе, так пользователь сразу увидит, успешно ли загружен аватар.
Для этого создадим JavaScript, который будет отправлять файл на сервер и получать ответ.
function wpcode_enqueue_scripts() {
if (isset($_GET['action']) && $_GET['action'] === 'register') {
wp_enqueue_script('wpcode-avatar-upload', get_stylesheet_directory_uri() . '/js/wpcode-avatar-upload.js', ['jquery'], null, true);
wp_localize_script('wpcode-avatar-upload', 'wpcode_ajax_obj', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpcode_avatar_upload_nonce')
]);
}
}
add_action('login_enqueue_scripts', 'wpcode_enqueue_scripts');Создадим файл wpcode-avatar-upload.js в папке темы со следующим содержимым:
jQuery(document).ready(function($) {
$('#wpcode_user_avatar').on('change', function() {
var file_data = $(this).prop('files')[0];
var form_data = new FormData();
form_data.append('action', 'wpcode_ajax_avatar_upload');
form_data.append('wpcode_user_avatar', file_data);
form_data.append('nonce', wpcode_ajax_obj.nonce);
$('#wpcode_avatar_upload_status').text('Загрузка...');
$.ajax({
url: wpcode_ajax_obj.ajax_url,
type: 'POST',
data: form_data,
contentType: false,
processData: false,
success: function(response) {
if(response.success){
$('#wpcode_avatar_upload_status').text('Аватар загружен успешно!');
// Можно сохранить URL в скрытом поле, если нужно
} else {
$('#wpcode_avatar_upload_status').text('Ошибка: ' + response.data);
}
},
error: function() {
$('#wpcode_avatar_upload_status').text('Ошибка загрузки файла.');
}
});
});
});Теперь создадим обработчик AJAX в PHP:
function wpcode_ajax_avatar_upload() {
check_ajax_referer('wpcode_avatar_upload_nonce', 'nonce');
if (empty($_FILES['wpcode_user_avatar'])) {
wp_send_json_error('Файл не передан.');
}
$file = $_FILES['wpcode_user_avatar'];
$allowed_types = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($file['type'], $allowed_types)) {
wp_send_json_error('Неверный тип файла.');
}
if ($file['size'] > 2 * 1024 * 1024) {
wp_send_json_error('Размер файла превышает 2 МБ.');
}
require_once(ABSPATH . 'wp-admin/includes/file.php');
$upload_overrides = ['test_form' => false];
$movefile = wp_handle_upload($file, $upload_overrides);
if ($movefile && !isset($movefile['error'])) {
wp_send_json_success($movefile['url']);
} else {
wp_send_json_error($movefile['error']);
}
}
add_action('wp_ajax_nopriv_wpcode_ajax_avatar_upload', 'wpcode_ajax_avatar_upload');Вывод загруженного аватара в профиле и на сайте
Чтобы использовать загруженный аватар, можно вывести его в шаблоне, например, заменив стандартный Gravatar.
function wpcode_get_custom_avatar($avatar, $id_or_email, $size, $default, $alt) {
$user = false;
if (is_numeric($id_or_email)) {
$user = get_user_by('id', $id_or_email);
} elseif (is_object($id_or_email)) {
if (!empty($id_or_email->user_id)) {
$user = get_user_by('id', $id_or_email->user_id);
}
} else {
$user = get_user_by('email', $id_or_email);
}
if ($user) {
$custom_avatar = get_user_meta($user->ID, 'wpcode_user_avatar', true);
if ($custom_avatar) {
$avatar = "<img alt='" . esc_attr($alt) . "' src='" . esc_url($custom_avatar) . "' class='avatar avatar-" . esc_attr($size) . " photo' height='" . esc_attr($size) . "' width='" . esc_attr($size) . "' />";
}
}
return $avatar;
}
add_filter('get_avatar', 'wpcode_get_custom_avatar', 10, 5);Этот фильтр выводит пользовательский аватар, если он есть, вместо стандартного Gravatar.
Заключение
Мы рассмотрели, как добавить поле загрузки изображения на страницу регистрации WordPress, проверить и сохранить изображение, а также реализовать загрузку через AJAX с обратной связью для пользователя. Такой функционал значительно улучшит удобство регистрации и позволит сразу получить полноценный профиль с аватаром.
Для более продвинутых сценариев можно интегрировать эту логику с плагинами, например, с Clearfy Pro для оптимизации загрузок и безопасности.