Разработка личного кабинета WordPress

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

Первое что нам нужно, это научиться выводить данные, которые хранятся в панели администратора, а сделать это очень просто, как и все что делается в замечательной системе управления сайтом WordPress.

Для начала необходимо в папке темы /wp-content/themes/{папка темы}/ создать файл шаблона, назовем ее так page-user-profile.php. Для того чтобы шаблон начал работать, необходимо правильно создать базовую структуру. Я предлагаю создать следующую структуру в самом верху созданного файла:

Ниже комментария /* Get user info. */ добавляем код вывода данных:

 После добавления сохраняем файл. Заходим в Панель администратора -> Создаем новую страницу — > Выбираем шаблон для вывода данных.

создаем профиль пользователя wordpress

 

После вывода выбора шаблона и публикации страницы нажимаем на кнопку [Просмотреть изменения]. У вас на экране будет картина примерно следующего вида:

Просмотр профиля пользователя на фротэндОтлично, теперь данные у нас выведены и думаю следует подробнее рассмотреть что конкретно было нами сделано и какие при этом функции использовались. 

get_avatar( $current_user->ID, 60 ) — Выводит аватар текущего пользователя в размере 60 на 60 пикселей. Если у вас как и у меня аватар просто сплющило, то это можно легко поправить простым перекрытием стилей для данного изображения следующего вида в стилях темы просто добавляем .avatar img{ width: auto !important; }.

Пропорциональный аватар на стороне пользователя WordPress

Откуда я брал вот такие стоки и другие подобные:

$current_user->user_firstname
$current_user->user_lastname

Чтобы стало понятно будет достаточно посмотреть на вот такую картинку сделанную мной проинспектировав профиль администратора в панели администратора.

Вывести поле из профиля пользователя WordPress

В такой же способ можно вывести любое поле на странице профиля. Чаще всего возникает еще ситуация когда необходимо добавить поля для профиля. И этот момент решается очень просто, обычным добавлением кода в файл functions.php, который находится в папке темы.

Отлично на данном этапе мы настроили вывод данных профиля, добавили новые поля и убрали некоторые старые.

Редактируем данные на стороне пользователя

Немного поискав в интернете, я нашел интересную структуру кода, при помощи которой можно редактировать данные текущего пользователя из фронтэнда. Создадим новый файл для будущего шаблона и назвать его page-edit-user-profile.php.

В файле создаем уже знакомую для нас структуру, которая поможет CMS увидеть наш шаблон:

Ниже добавляем код:

После вставки кода необходимо, как и раньше, создать новую страницу и присвоить ей шаблон Edit User Profile. Сохраняем созданную страницу и нажимаем кнопку [Просмотреть изменения]:

Редактируем профиль пользователя WordPress

 

Если все сделано правильно вы увидите вот такую форму редактирования, она должна работать. Вывод других полей из панели администратора реализуется похожим способом. Заходим в панель и берем имя поля, которое необходимо вывести.

Берем имя поля для редактирования WordPress

По аналогии с представленным кодом выводим метаданные автора:
<?php the_author_meta( ‘first_name’, $current_user->ID ); ?>

Осталась одна задача, это возможность редактировать аватар для автора, но к сожалению WordPress блокирует попытки редактирования аватара с пользовательской части с радостью прослушаю ваши предложения и идеи по работе с аватаром, хотелось бы при всем при этом делать все правильно и работать именно с API WordPress.

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

Купить хостинг WordPress

Читайте также:

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

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

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal