Подключение темы Wordpress к страницам профиля, регистрации и авторизации

Wordpress всем хорош, в том числе и тем, что жить и работать спокойно не даёт — постоянно чего-то в нём не хватает для полного счастья, отчего и разработчикам плагинов радость — есть чем заняться, и всем, кому эти плагины облегчают жизнь. Сегодня я расскажу о том, как сделать страницы авторизации, регистрации, редактирования профиля и напоминания в одном стиле с публичной частью сайта на Wordpress.

Есть в этом мире два замечательных плагина: Theme My Login и Theme My Profile, они-то и помогут нам в нашем деле. Скачаем, установим и приступим к настройкам и модификациям.

Рабочий пример вы можете пощупать на моём тестовом сайте.

Установка

Существуют как минимум два способа установить плагин для Wordpress.

Ручная установка

1. Скачиваем архив с нужным плагином на локальный компьютер.
2. Извлекаем архив.
3. Полученную папку с плагином с помощью FTP-клиента помещаем в каталог /wp-content/plugins, который находится в папке с вашим сайтом на виртуальном хостинге (как правило).
4. В панели администратора переходим на страницу Плагины → Установленные, находим наш плагин и нажимаем «Активировать».

Автоматическая установка

Если плагин есть в репозитории Wordpress, то его можно найти и добавить на сайт прямо из админки.

1. В панели управления заходим на страницу Плагины → Добавить новый.
2. Вводим в поле поиска название плагина, нажимаем «Найти плагины».
3. Из результатов поиска выбираем нужный плагин и нажимаем «Установить», откроется окно с описанием, в нём также нажимаем «Установить сейчас».
4. Возможно вам будет предложено ввести данные для FTP-доступа.
5. После того, как плагин загрузится, нажмите на «Активировать плагин».

Настройка плагинов

Я подготовил для вас переводы этих плагинов на русский язык. Скачайте и загрузите эти файлы в папки wp-content/plugins/theme-my-login/language и wp-content/plugins/theme-my-profile/language соответственно.

• theme-my-login-ru_RU.zip
• theme-my-profile-ru_RU.zip

Некоторые фразы не переведены, так как не доступны для перевода с помощью программы Poedit, а править напрямую файлы плагинов не очень предусмотрительно.

Настройка Theme My Login

General — в нашем примере мы не будем включать ни один из параметров.

Template — здесь у нас есть возможность настроить текст служебных ссылок и приветствия (Titles), а также текст служебных сообщений (Messages).

Links — это настройка ссылок для виджета, который в нашем примере мы использовать не будем, почему — объясню ниже. А если по делу — там всё просто, можно добавлять и удалять ссылки, которые будут видны авторизованным пользователям, причём для каждой группы их можно настраивать индивидуально.

Redirection — после авторизации можно отправить пользователей из разных групп на разные страницы.

E-mail — здесь можно и нужно настроить сообщения, которые плагин будет отправлять пользователям по разным поводам.

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

В нужном месте шаблона вставляем следующий код:

<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) : ?>
СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ
<?php else : ?>
СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ
<?php if ( get_option('users_can_register') ) : ?>
ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ
<?php endif ?>
<?php endif; ?>

Теперь меняем то, что написано заглавными буквами, на то, что нам нужно. Можно последовать моему примеру, а можно использовать собственный код.

СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ я заменил на ссылки для пользователя, причём ссылка на администрирование доступна только администраторам.

<h2 class="widgettitle">Меню пользователя</h2>
<p>Здравствуйте, <strong><?php echo $user_identity ?></strong>.</p>
<ul>
<?php global $user_ID; if( $user_ID ) : ?>
<?php if( current_user_can('level_10') ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Администрирование</a></li>
<?php else : ?>
<?php endif; ?>
<?php endif; ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Настройки профиля</a></li>
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Выйти</a></li>
</ul>

В результате получаем примерно следующее:

СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ мы поменяем на форму авторизации пользователей.

<h2 class="widgettitle">Авторизация</h2>
<form name="loginform-tml-main" id="loginform-tml-main" action="/login/?instance=tml-main&action=login" method="post">
<p><label for="log-tml-main">Логин</label><br />
<input type="text" name="log-tml-main" id="log-tml-main" class="input" size="18" /><p>
<p><label for="pwd-tml-main">Пароль</label><br />
<input type="password" name="pwd-tml-main" id="pwd-tml-main" class="input" value="" size="18" /><p>
<p><label for="rememberme-tml-main"><input name="rememberme-tml-main" type="checkbox" id="rememberme-tml-main" value="forever" /> Запомнить?</label></p>
<p><input type="submit" name="login-submit-tml-main" id="login-submit-tml-main" value="Войти" />
<input type="hidden" name="redirect_to" value="http://wptest.ru/login/" />
<input type="hidden" name="testcookie" value="1" /></p>
</form>

Неавторизованным пользователям достанется примерно такая форма:

ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ заменим на ссылки на страницы авторизации и восстановления пароля.

<ul>
<li><a href="<?php bloginfo('url') ?>/login/?instance=tml-main&action=register">Регистрация</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Забыли пароль?</a></li>
</ul>

Вот такую красотень увидят все, кто ещё не авторизовался или не зарегистрировался на сайте.

С плагином Theme My Login мы разобрались. Приступим к его товарищу.

Theme My Profile

Здесь всё предельно просто. Заходим в Настройки → Theme My Profile и выбираем группы пользователей, для которых необходимо темизировать страницу редактирования профиля.

Возможно, вам захочется настроить стиль этой страницы. Для этого вам понадобится внести изменения в файл style.css. Я добавил туда следующее:

#your-profile .form-table td {
text-align:left;
width:60%;
}
#your-profile .form-table th {
text-align:right;
vertical-align:top;
width:30%;
padding-top:8px;
}
#your-profile .form-table input {
display:block;
}
#your-profile .form-table textarea {
width:260px;
}
#your-profile .form-table select {
height:auto;
width:260px;
}

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

Всего самого доброго.
Артём Савельев.

P.S. Кстати, иллюстрация к уроку создана из скриншотов недавно созданного мной блога Сергея Ройзмана, который публикует уникальную информацию для руководителей продающих подразделений крупных Российских и международных компаний, КАМов (Key Account Managers), Продакт, Сейлз менеджеров, работающих в Больших продажах (B2B и B2G).

P.P.S. Типография Галеон предоставляет полиграфические услуги в Москве — офсетная печать, современное качество.