Вы здесь: Главная » Wordpress » Добавление фото пользователя в профиль WordPress

Добавление фото пользователя в профиль WordPress

Как известно, WordPress позволяет добавить фото пользователя через сервис Gravatar. И это очень удобно, если вы являетесь пользователем этого сервиса. Но на самом деле таких пользователей крайне мало, особенно на просторах СНГ. Поэтому значительно удобней, если в профиле пользователя будут фото, которое сможет загрузить он сам или администратор сайта, если мы говорим о каких-либо корпоративных сайтах.

Плагины для загрузки фото пользователя в его профиль

Для начала стоит рассмотреть плагины, которые позволят загружать фото пользователя в его профиль.

WP Custom Author Image - создает виджет, который вы можете добавить в какую-либо область виджетов на свойм сайте (сайдбар, как правило), либо и шорткод для вставки в любое место записи/страницы или файл темы. Также вы можете вставить небольшой код из этого плагина:

Внешний вид виджета из представленного в плагине скриншота:
WP Custom Author Image plugin

Плагин WP User Avatar позволяет заменить стандартный аватар от сервиса Gravatar на пользовательский, а затем выводить его в теме или постах с помощью кода или шорткода [avatar] .

Внешний вид загрузки фото в профиле пользователя от создателей плагина:

Плагин WP User AvatarЗагрузка фото в профиль пользователя с помощью собственного плагина

Допустим, для ваших целеей не подходит ни один из рассмотренных плагинов или вы просто фанат кода  Wordpres :). Тогда давайте рассмотрим, каким образом мы можем сделать загрузку фото  в профиль пользователя самостоятельно. Фактически мы напишем небольшой собственный плагин, который будет загружать аватар пользователя и сохранять информацию об этом фото в таблице wp_user_meta вашей базы данных. Вместо плагина вы можете добавить приведенный ниже код в файл functions.php вашей темы, заменив функцию plugins_url() на get_template_directory_uri().

Создание файлов собственного плагина

Даже если вы никогда не создавали плагин для WordPress, это поправимо и совсем не сложно, т.к. в нашем случае функционал будет достаточно простым. Вам необходимо дать название папке с плагином, например, profile-photo, и разместить ее в директории wp-content/plugins либо на локальном сервере, либо на реальном хостинге.

Далее вы можете создать в папке файл profile-photo.php или index.php и разместить в самом его начале такой код:

Вместо http://yoursite.com/ и http://yoursite.com/author/ вы указываете свой сайт и свои данные, как автора. Весь остальной PHP-код пишем в ниже в этом файле.

Добавление дополнительных полей в профиле пользователя

Для добавления дополнительных полей  необходимо использовать 2 хука, которые отобразят данные поля при просмотре и редактировании профиле пользователя. Обратите внимание, что в обоих случаях мы вызываем функцию your_slug_extra_fields_to_user. В ней желательно заменить приставку your_slug_ на какую-то вашу, для того чтобы не было путаницы с вызываемыми функциями в различных плагинах и темах.

В самой форме мы размещаем тег <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().

Подключение скриптов

Поскольку для загрузки изображений мы будем использовать стандартный медиа-загрузчик WordPress, необходимо его добавить в нашу функцию строкой wp_enqueue_media();. Затем подключим файл с нашим пользовательским скриптом, указав в зависимостях array( 'jquery','media-upload' ), чтобы наш скрипт подключался после jQuery и медиа-загрузчика.

Разумеется, вам необходимо создать папку js в папке с вашим плагином и разместить в ней пустой пока что файл image-uploader.js.

Файл JavaScript

Размещаем код в файле image-uploader.js, который подключили в функции your_slug_admin_scripts. Этот файл будет открывать нам медиа-загрузчик и отображать загруженное изображение и путь к нему в текстовом поле.

Вот как будет выглядеть добавленные поля с загруженным фото пользователя:

Следующим шагом будет отображение загруженных фото в списке пользователей, который обычно виден администратору сайта.

Создание колонок для страницы со списком пользователей

Для создания колонок страницы со списком пользователей нам необходимо воспользоваться фильтром 'manage_users_columns', указав в функции-обработчике, столбец с каким названием мы добавляем и где:

Заполнение колонки данными пользователей

После добавления столбца Profile Photo необходимо заполнить его данными из таблицы wp_user_meta. Используем еще один хук и выведем фото пользователей, для которых уже оно уже добавлено в профиле, и дефолтное изображение для тех, у кого такой информации еще нет. Для этого будем использовать функцию get_user_meta() проверку на пустое значение (empty($user_img)), которое возвращает эта функция, если информация в базе данных по фото пользователя отсутствует.

Результат работы нашей функции по заполнению данными столбца с фото пользователей виден на скриншоте:

Таблица пользователей с колонкой с фото

Ссылки на статьи-помощники:

  1. Добавляем колонки у постов в админке (сортируемые)
  2. Добавить пользовательский столбец в панель администратора пользователей

Вшзможно, при работе с профилями пользователей вам понадобятся еще такие функции из WordPress Codex в переводе на сайте wp-kama.ru:

  1. get_user_meta()
  2. get_the_author_meta()
  3. get_userdata()
  4. wp_get_current_user()
  5. get_users()

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *