Как известно, WordPress позволяет добавить фото пользователя через сервис Gravatar. И это очень удобно, если вы являетесь пользователем этого сервиса. Но на самом деле таких пользователей крайне мало, особенно на просторах СНГ. Поэтому значительно удобней, если в профиле пользователя будут фото, которое сможет загрузить он сам или администратор сайта, если мы говорим о каких-либо корпоративных сайтах.
Плагины для загрузки фото пользователя в его профиль
Для начала стоит рассмотреть плагины, которые позволят загружать фото пользователя в его профиль.
WP Custom Author Image - создает виджет, который вы можете добавить в какую-либо область виджетов на свойм сайте (сайдбар, как правило), либо и шорткод для вставки в любое место записи/страницы или файл темы. Также вы можете вставить небольшой код из этого плагина:
| 1 2 3 4 | <?php the_wp_custom_author_image($author_id = null); ?> //This $author_id parameter is optional. If it is not passed in, //the code will attempt to get the current author of the page/post. |
Внешний вид виджета из представленного в плагине скриншота:
Плагин WP User Avatar позволяет заменить стандартный аватар от сервиса Gravatar на пользовательский, а затем выводить его в теме или постах с помощью кода или шорткода [avatar] .
Внешний вид загрузки фото в профиле пользователя от создателей плагина:
Загрузка фото в профиль пользователя с помощью собственного плагина
Допустим, для ваших целеей не подходит ни один из рассмотренных плагинов или вы просто фанат кода Wordpres :). Тогда давайте рассмотрим, каким образом мы можем сделать загрузку фото в профиль пользователя самостоятельно. Фактически мы напишем небольшой собственный плагин, который будет загружать аватар пользователя и сохранять информацию об этом фото в таблице wp_user_meta вашей базы данных. Вместо плагина вы можете добавить приведенный ниже код в файл functions.php вашей темы, заменив функцию plugins_url() на get_template_directory_uri().
Создание файлов собственного плагина
Даже если вы никогда не создавали плагин для WordPress, это поправимо и совсем не сложно, т.к. в нашем случае функционал будет достаточно простым. Вам необходимо дать название папке с плагином, например, profile-photo, и разместить ее в директории wp-content/plugins либо на локальном сервере, либо на реальном хостинге.
Далее вы можете создать в папке файл profile-photo.php или index.php и разместить в самом его начале такой код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php /* Plugin Name: Profile Photo Plugin URI: http://yoursite.com/ Description: The plugin allows to upload user's photo to his profile. Version: 1.0 Author: Your Name Author URI: http://yoursite.com/author/ Text Domain: profile-photo License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if ( ! defined( 'ABSPATH' ) ) { exit; } |
Вместо http://yoursite.com/ и http://yoursite.com/author/ вы указываете свой сайт и свои данные, как автора. Весь остальной PHP-код пишем в ниже в этом файле.
Добавление дополнительных полей в профиле пользователя
Для добавления дополнительных полей необходимо использовать 2 хука, которые отобразят данные поля при просмотре и редактировании профиле пользователя. Обратите внимание, что в обоих случаях мы вызываем функцию your_slug_extra_fields_to_user. В ней желательно заменить приставку your_slug_ на какую-то вашу, для того чтобы не было путаницы с вызываемыми функциями в различных плагинах и темах.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | add_action( 'show_user_profile', 'your_slug_extra_fields_to_user' ); add_action( 'edit_user_profile', 'your_slug_extra_fields_to_user' ); function your_slug_extra_fields_to_user($user){ $default_image = plugins_url('images/no-user.png', __FILE__); $user_img = get_user_meta( $user->ID, 'userimg', true) ; ?> <h3>Extra profile information</h3> <table class="form-table"> <tr> <th> <img data-src="<?php echo $default_image ?>" width="150" height="150" id="profile-user-img" src="<?php echo ( $user_img!= "" ? $user_img : $default_image) ?>" /> </th> <td> <label for="userimg">Profile Image</label> <br> <input type="text" name="userimg" id="userimg" value="<?php echo $user_img ?>" size="50" /> <span class="profile-buttons"> <input type="button" name="submit" id="submit-photo" class="button user_image_button" value="Select image"> <input type="button" name="submit" id="delete" class="button delete remove-user-image" value="×"> </span> </td> </tr> </table> <?php } |
В самой форме мы размещаем тег <img id="profile-user-img">, в котором изначально отображается дефолтное изображение из папки images нашего плагина. Также стоит обратить внимание на <input name="userimg" id="userimg">, т.к. именно это поле будет отправлять данные о фото пользователя в базу данных и использоваться в скрипте для отображения пути к загруженному изображению.
На фото обведена кнопка Select Image, клик по которой вызовет Медиа-загрузчик WordPress за счет добавления JS-файла. Кнопка с крестиком очистит текстовое поле и вернет дефолтное изображение за счет использования атрибута data-src в теге <img> также за счет работы JavaScript-кода.
Сохранение полей в профиле пользователя при обновлении профиля
Добавляем еще 2 хука для сохранения данных нашего текстового поля <input name="userimg" id="userimg"> в базе данных за счет использования функции update_user_meta().
| 1 2 3 4 5 6 7 | add_action( 'personal_options_update', 'your_slug_extra_fields_to_user_save' ); add_action( 'edit_user_profile_update', 'your_slug_extra_fields_to_user_save' ); function your_slug_extra_fields_to_user_save($user_id){ if (!current_user_can('edit_user', $user_id)) return false; update_user_meta($user_id, 'userimg', $_POST['userimg']); } |
Подключение скриптов
Поскольку для загрузки изображений мы будем использовать стандартный медиа-загрузчик WordPress, необходимо его добавить в нашу функцию строкой wp_enqueue_media();. Затем подключим файл с нашим пользовательским скриптом, указав в зависимостях array( 'jquery','media-upload' ), чтобы наш скрипт подключался после jQuery и медиа-загрузчика.
Разумеется, вам необходимо создать папку js в папке с вашим плагином и разместить в ней пустой пока что файл image-uploader.js.
| 1 2 3 4 5 6 7 8 9 | function your_slug_admin_scripts() { wp_enqueue_media(); wp_enqueue_script( 'user-profile-image-uploader', plugins_url( '/js/image-uploader.js', __FILE__ ), array( 'jquery','media-upload' ), 1.0, true ); } add_action( 'admin_enqueue_scripts', 'your_slug_admin_scripts' ); |
Файл JavaScript
Размещаем код в файле image-uploader.js, который подключили в функции your_slug_admin_scripts. Этот файл будет открывать нам медиа-загрузчик и отображать загруженное изображение и путь к нему в текстовом поле.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | (function($) { var defaultImg = $('#profile-user-img').attr('data-src'); //обрабатываем клик по кнопке Select Image $('.user_image_button').on('click', function(event) { var image = wp.media({ title: 'Upload Image', // Параметр mutiple: true необходим, если нужно загрузить несколько файлов за раз // в нашем случае нужно единственное изображение, поэтому: multiple: false }).open() .on('select', function(e) { // Возвращаем выбранное в медиа-загрузчике изображение как объект var uploaded_image = image.state().get('selection').first(); // Конвертируем загруженное изображение в объект JSON для более простого доступа к нему // Проверяем в консоли наличие загруженного изображения console.log(uploaded_image); // получаем url загруженного изображения var image_url = uploaded_image.toJSON().url; // Выводим url изображения в текстовом поле, а саму картинку вместо дефолтного изображения $('#userimg').val(image_url); $('#profile-user-img').attr('src', image_url); }); return false; }); //удаляем данные после клика на кнопке "x" $('.remove-user-image').on('click', function(event) { $('#userimg').val(''); $('#profile-user-img').attr('src', defaultImg); }); })(jQuery); |
Вот как будет выглядеть добавленные поля с загруженным фото пользователя:
Следующим шагом будет отображение загруженных фото в списке пользователей, который обычно виден администратору сайта.
Создание колонок для страницы со списком пользователей
Для создания колонок страницы со списком пользователей нам необходимо воспользоваться фильтром 'manage_users_columns', указав в функции-обработчике, столбец с каким названием мы добавляем и где:
| 1 2 3 4 5 6 7 8 9 10 | add_filter( 'manage_users_columns', 'your_slug_add_profile_photo_column', 4 ); function your_slug_add_profile_photo_column( $columns ){ $num = 2; // после какой по счету колонки вставлять новую $new_columns = array( 'profile_photo' => __('Profile Photo','profile-photo'), ); return array_slice( $columns, 0, $num ) + $new_columns + array_slice( $columns, $num ); } |
Заполнение колонки данными пользователей
После добавления столбца Profile Photo необходимо заполнить его данными из таблицы wp_user_meta. Используем еще один хук и выведем фото пользователей, для которых уже оно уже добавлено в профиле, и дефолтное изображение для тех, у кого такой информации еще нет. Для этого будем использовать функцию get_user_meta() проверку на пустое значение (empty($user_img)), которое возвращает эта функция, если информация в базе данных по фото пользователя отсутствует.
| 1 2 3 4 5 6 7 8 | add_action( 'manage_users_custom_column', 'your_slug_fill_photo_column', 10, 3); function your_slug_fill_photo_column( $val, $colname, $user_id ){ $default_image = plugins_url('images/no-user.png', __FILE__); $user_img = get_user_meta( $user_id, 'userimg', 1 ); if( $colname === 'profile_photo' ){ return '<img src="'.(empty($user_img)? $default_image : $user_img ).'" width="50">'; } } |
Результат работы нашей функции по заполнению данными столбца с фото пользователей виден на скриншоте:
Ссылки на статьи-помощники:
- Добавляем колонки у постов в админке (сортируемые)
- Добавить пользовательский столбец в панель администратора пользователей
Вшзможно, при работе с профилями пользователей вам понадобятся еще такие функции из WordPress Codex в переводе на сайте wp-kama.ru:
Дякую! Довго мучався, щоб додати фото - раніше була така можливість, зараз немає. З вашою допомогою це зробив
Не открывается загрузчик. В консоли выдает ошибку:
Uncaught TypeError: wp.media is not a function
at HTMLInputElement. (image-uploader.js?ver=1:6)
at HTMLInputElement.dispatch (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.8.1:2)
at HTMLInputElement.v.handle (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.8.1:2)
(анонимная) @ image-uploader.js?ver=1:6
dispatch @ load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.8.1:2
v.handle @ load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,zxcvbn-async&ver=5.8.1:2
Проверьте, загружена ли jQuery. После обновления WordPress или ваших изменений в теме эта библиотека не факт, что будет загружена.
А от нее зависит работа остальных скриптов.
Нажмите CTRL + U в браузере, затем CTRL + F в открывшемся окне с кодом и jQuery в строке поиска.
Подскажите, пожалуйста, как можно поставить эту форму добавления фото под стандартной граватарной формой ВП?
К сожалению, не подскажу. Попробуйте задать вопрос на форумах.
Спасибо!
В данной строке по какой то причине вордпресс не определяет переменную <input type="text" name="userimg" id="userimg" value="" size="50" />. И еще добавленные поля выводяться не только в админ панели а вообще везде на всех страницах. Можете подсказать в чем проблема?
Извините за долгий ответ, но дополнительная проверка кода не привела к отображению везде полей с возможностью добавить фото пользователя, как вы написали. Такое поле отображается только в профиле пользователя.
Где у вас появляются такие поля? На каких страницах? Во фронт-енде (на самом сайте) в записях или страницах или в админке при их редактировании?
Ничего подобного увидеть не удалось.
Код
<input type="text" name="userimg" id="userimg" value="" size="50" />не является переменной. Это вывод обычного текстового поля.Переменная в коде статьи там действительно встречается:
но эта переменная (
$user_img) определяется в коде выше либо как дефолтное изображение, которое должно находится у вас в папке images плагина или темы, если вы вставляете код в файл functions.php вашей темы, с именем no-user.png, или как добавленное и сохраненное в БД фото пользователя.Если вы объявление этой переменной пропустили, то у вас должна выводится ошибка. Для того чтобы посмотреть все ошибки, стоит в файле wp-config.php, который находится в корне вашего сайта и хранит все настройки сайта, изменить константу
WP_DEBUGcfalse(значение по умолчанию) наtrue.Подскажите пожалуйста, WP не дает мне запустить файл JS выдавая в консоле браузера ошибку 403. Как это можно исправить подскажите пожалуйста.
К сожалению, слишком мало данных для того, чтобы ответить на ваш вопрос.
Чаще всего это бывает, когда вы пытаетесь передать данные из js в php-файл с помощью AJAX. Как правило, при ajax-запросе у вас может быть неверно указан ajaxurl либо параметр action, который отвечает за функцию-обработчик ваших действий, или неверно вызван wordpress-action типа:
Если проблема не в AJAX, то нужно смотреть все ваши файлы.