Вход в личный кабинет Введение. шаблоны:
В первой части мы разобрались с типами форм входа, настройками и произвольными полями. В этой части мы рассмотрим структуру шаблонов, разберем какие хуки и фильтры где работают и применим некоторые из них. Применительно к формам плагина WP-Recall применим и некоторые WordPress хуки – т.к. и по ним часто на форуме возникают вопросы.
Шаблоны форм входа, регистрации и напоминания пароля расположены по пути:ваш-сайт/wp-content/plugins/wp-recall/templates/
Копируем оттуда:form-register.php – форма регистрацииform-sign.php – форма входаform-remember.php – восстановление пароля
в папку:ваш-сайт/wp-content/wp-recall/templates/- и уже оттуда редактируем под себя. Скопировав сюда – при обновлении плагина изменения не затрутся.
Список всех шаблонов WP-Recall можете найти на этой странице
Основные возможности бесплатного пакета:
- множество шаблонов входа на сайт и сброса пароля;
- возможность предварительного просмотра;
- перенаправления со стандартных форм;
- установка многошаговой регистрации;
- установщик шаблонов оформления для плагина с официального сайта.
. Modal Login
Демо | Демо | Форму для входа можно разместить в виджете или используя шорткод. Приятная особенность – модуль полностью совместим с BuddyPress.
Super Socializer
к плагину — Super Socializer Позволяет установить модуль для авторизации на сайте и комментирования постов из социальных сетей. На выбор несколько видов оформления панели авторизации. После того, как посетитель зарегистрировался, в консоли и базе данных сохраняется его учетная запись со всеми необходимыми данными. Доступны все известные социальные сети.
Ultimate Member
Расширение Ultimate Member – удобный и интуитивно понятный плагин front-end редактирования пользовательских профилей, форм регистрации и авторизации для WordPress, создания директорий с ограниченным доступом. Расширение состоит из четырех функциональных блоков: визуального конструктора форм, модуля сброса пароля, инструмента создания папок для определенных групп пользователей и блока редактирования страниц аккаунтов.
Ultimate Member, общая информация:
Ключевые особенности:
В меню параметров необходимо выбрать шаблон, который будет отображаться по умолчанию, на выбор 3 варианта:
Доступно меню настроек почты, переадресации и групп пользователей. Чтобы добавить саму шаблон авторизации на сайт, следует перейти в меню виджетов и выбрать соответствующий сайтбар Login With Ajax. Перед публикацией можно проверить все настройки и отредактировать при требовании.
Вариант 1. Используйте регистрационную форму WordPress
Самый простой способ получить пользователей для регистрации — перейти в раздел «Внешний вид — Виджеты», выбрать виджет «Мета» и перетащить его в боковую панель или в нижнюю область сайта — подвал (футер). Недостатком этого метода является то, что виджет также включает ссылки на RSS и WordPress.org. Он также предоставит только ссылку для входа пользователя, чтобы войти, что приведет их к экрану входа WP по умолчанию, где они могут зарегистрироваться. Эта связь не совсем очевидна.
Вариант 2: Использовать плагин
Один из лучших вариантов для создания внешней регистрационной формы (с шорткодом, который вы можете разместить в любом месте) — это плагин Ultimate Member. С его помощью вы сможете не только сохранять внешний вид своей страницы регистрации пользователей WordPress в соответствии с остальной частью вашего бренда, но и гораздо проще управлять самими пользователями.
Вставим фоновую картинку в всплывающую форму:
Для стилизации формы впишем в ваш style.css следующие стили:
Добавим бекграунд к всплывающей форме. два варианта анимации!:
В дополнении Christmas Time я применял данный метод. Там на видео наглядно видно, какая красота может произойти просто вставив в подложку всплывающей формы gif анимацию.В этом примере я покажу как это сделать самостоятельно. Это будут только стили – а значит пример нужно вставлять в свой style.cssКартинку мы будем вставлять к оверлею – а это значит что клик по картинке будет закрывать форму.Пример 1Вначале просто картинка:
Добавим логотип и надпись к форме входа (и к остальным):
Добавим название сайта и логотип на примере всплывающей формы входа:
Другие вещи для рассмотрения
Теперь предыдущие шаги позволили вам вообще не иметь возможности регистрироваться в WordPress и отображать полный каталог пользователей для вашего сайта. Если вы хотите немного продвинуться в членстве и регистрации, вот пара идей.
Если включено подтверждение регистрации. E-mail не подтвержден. Провал проверки:
Если по каким-либо причинам пользователь провалил подтверждение почты – покажем ему дополнительную информацию – почту администрации для решения проблем.
Если включено подтверждение регистрации. Покажем в форме свое сообщение: пользователь успешно подтвердил регистрацию:
На последнем шаге регистрации мы покажем свое сообщение:
Изменим сообщение в форме при регистрации:
Если отключено подтверждение регистрации. При успешной регистрации покажем свое сообщение в форме:
Используйте плагин формы WPForms
Многие плагины форм WordPress имеют функции, которые помогут вам создать настраиваемую форму входа, хотя обычно вам понадобится премиум-версия наиболее популярных опций. Это может быть хорошим вариантом, если вы уже используете плагин на своем сайте, но вы, вероятно, не хотите покупать плагин формы только для функции входа в систему.В этом руководстве мы сосредоточимся на WPForms . Другие популярные плагины форм, такие как Gravity Forms и Ninja Forms, также предлагают эту функцию.
Как изменить текст письма отправляемого при регистрации:
На данный момент гибкого решения нет. Только если править саму функцию отправки письма:rcl_register_mail в файле /wp-content/plugins/wp-recall/functions/register.php
Настройте страницу входа в WordPress по умолчанию
Во-вторых, вы можете настроить саму страницу входа в WordPress. Если вы предпочитаете сохранить стандартные URL-адреса входа и регистрации в WordPress, вы можете полностью изменить дизайн и изменить его в соответствии с вашим брендом. Для этого нужно немного разбираться в файлах ядра WP и PHP, но если вы это сделаете, то тусклая серая страница, которую вы получите при установке, может быть выровнена настолько, насколько вы захотите.
Постройка форм
Выбрав необходимую вкладку в меню настроек плагина, открывается рабочая панель, позволяющая приступить к созданию формы для входа и других страниц. Для каждой предложено по 5 стилей оформления. Благодаря предварительному просмотру видно, как будет выглядеть форма регистрации на WordPress.Для редактирования шаблона следует нажать на Edit. Возле кнопки загрузки медиафайлов находится запуск ProfilePress Shortcodes – окно, которое показывает все элементы, доступные для добавления. Таким образом, редактирование функций и полей осуществляется очень просто.Важно! При покупке платной версии придется заплатить 49 долларов. Всего доступно 3 тарифа, в зависимости от количества используемых сайтов с конструктором форм. Чтобы убедиться, что данное расширение подходит вам, протестируйте бесплатный пакет, предоставляющий все необходимые возможности.
Пять методов создания пользовательской страницы входа в WordPress
Вот пять методов, которые мы рассмотрим: Настройка собственной страницы входа с помощью бесплатного плагинаИспользование Elementor для создания настраиваемой страницы входа с визуальным интерфейсом перетаскиванияИспользование специального плагина регистрации WordPressИспользование обычного плагина форм WordPressДобавление собственных фрагментов кода
Редирект после регистрации средствами WP-Recall:
Плагин имеет фильтр url_after_register_rcl: // куда пойдет редирект
apply_filters(‘url_after_register_rcl’,esc_url($_POST[‘redirect_to’]))Применим его. Сделаем редирект пользователя, после регистрации, на нужную нам страницу: // редирект после регистрации
function otfm_my_registration_redirect() {
return home_url(‘/целевая-страница/’);
}
add_filter(‘url_after_register_rcl’, ‘otfm_my_registration_redirect’,10);в home_url – впишите свой адрес страницы
Редиректы средствами WordPress:
“Перенаправление пользователя после успешной регистрации””Перенаправление пользователя после входа в систему и выхода””Перенаправление пользователя после сброса пароля”- Все эти вопросы редиректов разбирались в этой статье
Создать страницу входа с Elementor Ultimate для Elementor
Хотите создать действительно настраиваемую страницу входа? Используйте популярный плагин для построения страниц Elementor и виджет входа в систему в расширении Ultimate Addons для Elementor .Если вы не знакомы с Elementor, он позволяет вам создавать свои собственные проекты с помощью визуального интерфейса с перетаскиванием. Бесплатный плагин Elementor не включает виджет входа в систему, но вы можете добавить гибкий виджет с помощью Ultimate Addons для Elementor. Он поставляется с более чем 50 виджетами для улучшения ваших проектов Elementor.Некоторые из преимуществ такого подхода: Для начала установите бесплатный плагин Elementor с WordPress.org и плагин Ultimate Addons for Elementor . Затем создайте новую страницу WordPress ( Страницы → Добавить новую ) и нажмите кнопку « Редактировать с помощью Elementor» , чтобы открыть интерфейс Elementor.Вы можете использовать обычные виджеты Elementor для управления базовым дизайном вашей страницы входа. Например, вы можете добавить заголовки, поясняющий текст и другие элементы. Ознакомьтесь с нашим руководством по Elementor, если вы не знаете, как его использовать. Когда вы будете готовы добавить форму входа, перетащите виджет формы входа из Ultimate Addons for Elementor (ОАЭ): Затем откройте настройки виджета, чтобы управлять поведением и стилем вашей формы входа. Вот некоторые вещи, которые вы можете сделать с настройками:
Сразу перейдем к возможностям расширения:
интуитивно понятный интерфейс и настройки;установка переадресации;управление переадресацией для каждой группы пользователей;редактирование сообщения, отправляемого после ввода всех данных;использование AJAX;Установка проходит, как обычно – через стандартный загрузчик плагинов. Тема устанавливается и активируется. В общих настройках консоли WordPress снимаем запрет на добавление новых пользователей, как в предыдущих случаях.
Страница входа пользователя WordPress
В дополнение к странице регистрации пользователя, вы можете выполнить те же самые шаги, чтобы создать страницу входа в систему. Вам просто нужно убедиться, что «Login Form» (Форма входа) выделена при ее создании.
Структура файла form-sign.php – шаблон входа:
Наглядно описал на скриншоте (кликабельно):У каждого файла вверху есть табы переключения. Область куда приходят сервисные сообщения. Поля ввода в форме и хук для дополнения формы своими полями.Если вам нужно что-то дополнить, изменить верстку – то думаю теперь вам не составит труда вписать в нужное место.Хуки разберем ниже.
Функционал платного пакета:
возможность редактирования профиля;быстрое создание виджетов;личные аватары;вход при помощи социальных сетей;автоматическая авторизация после первого ввода пароля;сообщения на почту пользователей;настройка виджетов.Для полноценной работы, требуется установка дополнительного расширения Shortcake Shortcode UI. Оно упростит добавление шорткодов в панели управления. После активации плагинов, убедитесь, что стандартные настройки разрешают регистрацию новых пользователей (должна быт установлена галочка «Любой может зарегистрироваться»). При использовании платного пакета, необходимо скопировать лицензию в консоли плагина.Заметьте, что после установки модуля появятся новые страницы: регистрация, сброс пароля и вход. Для них предусмотрены специальные шорткоды, благодаря которым можно разместить формы в требуемом месте. В пункте Redirection можно выполнить настройку для перенаправления пользователей со страницы входа.Можно установить приветственное сообщение и параметры его появления. Также задаются сообщения, отправляемые пользователям по почте при действиях с учетной записью.
Хуки и фильтры формы восстановления пароля:
do_action(‘rcl_remember_form_head’); – реколл хук, срабатывает в шапке формы восстановления пароля do_action(‘lostpassword_form’); – вордпресс экшен для дополнения своими полями формы восстановления пароля. Не передает ничего. Срабатывает внутри тега form.lostpassword_form в Кодексе вордпресс.
Хуки и фильтры формы входа:
do_action(‘rcl_login_form_head’); – реколл хук, срабатывает в шапке формы входа do_action(‘login_form’); – вордпресс экшен для дополнения своими полями формы входа. Не передает ничего. Срабатывает внутри тега form.login_form в Кодексе вордпресс. apply_filters(‘signform_fields_rcl’,$signfields) – реколл фильтр для формы авторизации
Хуки и фильтры формы регистрации:
do_action(‘rcl_register_form_head’); – реколл хук, срабатывает в шапке формы регистрации. do_action(‘register_form’); – вордпресс экшен, для дополнения своими полями формы регистрации. Не передает ничего. Срабатывает внутри тега form.register_form в Кодексе вордпресс.
В итоге
Чтобы сделать форму регистрации на WordPress можно пойти двумя популярными путями: использовать один из конструкторов, либо упростить авторизацию при помощи социальных сетей. Хотя, многие сайтостроители выбирают третий метод – создание собственной формы или модернизация стандартной.