WordPress – кнопка вход и выход в меню сайта с применением login logout menu и wp-recall

Введение. шаблоны:

В первой части мы разобрались с типами форм входа, настройками и произвольными полями. В этой части мы рассмотрим структуру шаблонов, разберем какие хуки и фильтры где работают и применим некоторые из них. Применительно к формам плагина 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 можете найти на этой странице

Почему пользовательская форма входа в wordpress полезна для вашего сайта

Как владелец веб-сайта WordPress, вы почти наверняка знакомы с формой входа в WordPress по умолчанию. Он совершенно функциональный, но с виду голый. См. Экспонат A:

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

Вот лишь некоторые из преимуществ настройки формы входа в WordPress:

  1. Лучшая безопасность. Вы можете защитить свою страницу входа, перенаправив форму входа на уникальный URL-адрес, что усложняет хакерам поиск вашей страницы входа. Кроме того, вы можете установить ограничение на количество раз, когда человек может входить в систему, или даже добавить многофакторную аутентификацию.
  2. Последовательность брендинга. Расширение вашего фирменного стиля на форму входа позволяет вам поддерживать согласованность с остальной частью вашего сайта, поэтому ваши пользователи и члены команды будут иметь единый опыт. Кроме того, если вы добавите учетные записи социальных сетей в WordPress, вашим читателям или участникам станет еще проще войти в систему и поделиться вашим контентом.
  3. Расширенная навигация. Вы можете использовать форму входа в систему, чтобы предоставить конечным пользователям дополнительную навигацию. Вы можете ссылаться на профили в социальных сетях или даже отображать специальные предложения прямо на экране входа в систему.
  4. Улучшенный пользовательский интерфейс. Вы можете настроить форму входа в систему, чтобы конечные пользователи переходили на любую выбранную вами страницу, например, на страницу индивидуального профиля или специальную рекламу, или вы можете создавать собственные сообщения.
Похожее:  Cypress пишем первые тесты на авторизацию | by nikolay kozub | Medium

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

Я забыл мои данные для входа в WordPress

Казалось бы, элементарно – ссылка “Забыл пароль”, которая находится сантиметром ниже кнопки авторизации на экране входа в WordPress, должна решить вопрос.

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

Если у вас нет доступа к email-ящику администратора, вы все еще можете сбросить пароль. Для этого вам нужно использовать следующий запрос к базе данных (подразумевается, что у вас есть доступ к Базе Данных):

Как добавить капчу к авторизации WordPress?

Добавление капчи на страницу авторизации – отличная идея, особенно если вы позволяете пользователям регистрироваться на вашем сайте. Для капчи на WordPress есть множество плагинов, но я бы рекомендовал для ваших форм регистрации и авторизации использовать плагин WP-reCAPTCHA.

Он настраиваемый, легкий и это официальный плагин от Google для интеграции WordPress и reCaptcha. Это значит, что он поддерживается и обновляется, если вдруг боты найдут способ легко его обойти.

Кто-то пытается угадать мой пароль!

У некоторых нет свободного времени для анализа логов. Но внезапно они обнаруживают, что кто-то пытается получить доступ в их панель администратора. Кто-то, кто не должен этого делать.

В большинстве случаев этот кто-то использует метод полного перебора паролей для доступа к сайту. Чтобы это предупредить, можно использовать плагин Limit Login Attempts.

Wp-recall плагин для реализации личного кабинета на сайте wordpress

Плагин формирует гибкий и функциональный личный аккаунт, позволяет пользователям вашего сайта легко общаться, настраивать свой профиль, создавать группы по интересам, взаимодействовать на форуме, оплачивать заказы в вашем интернет-магазине и многое другое.

Базовая часть плагина уже включает в себя широкий спектр функций, которые вы можете использовать сразу после активации.

Авторизация и регистрация без плагинов

Чтобы добавить в любое место сайта форму авторизации пользователей используется функция Вордпресс wp_login_form($args), которую можно использовать без аргументов.

На сайте она создаст такую форму:
регистрация и авторизация пользователей
только без ссылки «Регистрация» внизу. Ее мы еще рассмотрим. Вы можете оформить эту форму как виджет в боковой колонке сайта.

Возможные параметры функции wp_login_form из официальной документации:

Чтобы сделать ссылку на страницу регистрации нового пользователя используется функция WP wp_registration_url(), которая возвращает адрес страницы.

Например так:

После регистрации новый пользователь и администратор сайта получат уведомительное письмо по электронной почте.

Вставим фоновую картинку в всплывающую форму:

Для стилизации формы впишем в ваш style.css следующие стили:

Добавим бекграунд к всплывающей форме. два варианта анимации!:

В дополнении Christmas Time я применял данный метод. Там на видео наглядно видно, какая красота может произойти просто вставив в подложку всплывающей формы gif анимацию.В этом примере я покажу как это сделать самостоятельно. Это будут только стили – а значит пример нужно вставлять в свой style.cssКартинку мы будем вставлять к оверлею – а это значит что клик по картинке будет закрывать форму.

Пример 1Вначале просто картинка:

Добавим выход из системы при помощи ссылки */wp-login.php?action=logout без подтверждения выхода

И так что если нам необходимо где-то еще добавить ссылку на выход из системы? Для этого достаточно добавить ссылку:

Добавим логотип и надпись к форме входа (и к остальным):

Добавим название сайта и логотип на примере всплывающей формы входа:

Добавление кнопки “вход, регистрация | выйти” без использования плагина wp-recall

Если Вам не нужен функционал отличного плагина WP-RECALL а достаточно простого перехода на определенную страницу (например страницу личного кабинета созданного при помощи стороннего плагина, или в админ панель WP) после аутентификации. Вам необходимо перейти в свое меню на сайте, и создать новый пункт меню с следующим содержимым:

URL

Текст ссылки

Классы CSS

Внешний вид данного меню должен быть таким:

После добавления пункта в меню, не забудьте сохранить меню.

Добавление кнопки “вход, регистрация | выйти” с использованием плагина wp-recall

Данный вариант пригодится Вам если Вы хотите использовать всплывающую форму WP-RECALL (попап) для авторизации на сайте. Вам необходимо прийти в свое меню на сайте, и создать новый пункт меню с следующим содержимым:

URL

Текст ссылки

Классы CSS

Здесь Важным моментом является класс:

Ведь только благодаря ему на сайте и появится всплывающее окно для входа на сайт.

Внешний вид данного меню должен быть таким:

После добавления пункта в меню, не забудьте сохранить меню.

Если Вы все сделали правильно, то увидите данное всплывающее окно при нажатии на кнопку “ВХОД, РЕГИСТРАЦИЯ”:

Если включено подтверждение регистрации. e-mail не подтвержден. провал проверки:

Если по каким-либо причинам пользователь провалил подтверждение почты – покажем ему дополнительную информацию – почту администрации для решения проблем.

Если включено подтверждение регистрации. покажем в форме свое сообщение: пользователь успешно подтвердил регистрацию:

На последнем шаге регистрации мы покажем свое сообщение:

Изменим сообщение в форме при регистрации:

Если отключено подтверждение регистрации. При успешной регистрации покажем свое сообщение в форме:

Использование

$args(строка/массив)
Массив аргументов, контролирующих результат.
По умолчанию: параметры по умолчанию

Используйте свой собственный код

Если вы опытный пользователь, которому хотя бы в какой-то мере комфортно работать с PHP, HTML и CSS, вы также можете настроить страницу входа в WordPress без необходимости установки стороннего плагина.

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

Вы захотите добавить эти фрагменты кода в файл functions.php дочерней темы или через плагин, например Code Snippets .

Измените логотип входа:

function my_login_logo() { ?>
    

Измените URL-адрес, на который ссылается логотип:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

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

Как изменить текст письма отправляемого при регистрации:

На данный момент гибкого решения нет. Только если править саму функцию отправки письма:rcl_register_mail в файле /wp-content/plugins/wp-recall/functions/register.php

Как скрыть админ панель для всех пользователей кроме администраторов.

При реализации личного кабинета данная функция будет крайне необходима.

Источник записи:

Настройки регистрации в вордпресс

Кроме того, нужно сделать настройки регистрации пользователей в административной панели (в «Общие»). Чтобы включить эту возможность нужно пометить галочку «Любой может зарегистрироваться» и установить определиться с ролью нового пользователя (обычно «Подписчик»). С помощью этих настроек вы можете в любой момент запретить новую регистрацию.

Полезные инструменты для создания пользовательской формы входа в wordpress

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

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

Вот пять методов, которые мы рассмотрим:

  1. Настройка собственной страницы входа с помощью бесплатного плагина
  2. Использование Elementor для создания настраиваемой страницы входа с визуальным интерфейсом перетаскивания
  3. Использование специального плагина регистрации WordPress
  4. Использование обычного плагина форм WordPress
  5. Добавление собственных фрагментов кода

Редирект после регистрации средствами 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:

“Перенаправление пользователя после успешной регистрации””Перенаправление пользователя после входа в систему и выхода””Перенаправление пользователя после сброса пароля”- Все эти вопросы редиректов разбирались в этой статье

Структура файла form-sign.php – шаблон входа:

Наглядно описал на скриншоте (кликабельно):
WordPress - Кнопка ВХОД и ВЫХОД в меню сайта с применением Login Logout Menu и WP-Recall
У каждого файла вверху есть табы переключения. Область куда приходят сервисные сообщения. Поля ввода в форме и хук для дополнения формы своими полями.
Если вам нужно что-то дополнить, изменить верстку – то думаю теперь вам не составит труда вписать в нужное место.
Хуки разберем ниже.

Сценарий перехода на нужные страницы при входе и выходе v1 – (отличный, актуальный вариант)

Теперь мы добрались к той самой важной части, которая отвечает за переход на нужную страницу в зависимости от события входа или выхода. То есть речь идет о редиректе после входа или же выхода из админ панели или личного кабинета (без разницы, создан личный кабинет при помощи WP-RECALL, или каким-то другим плагином).

Обновлено от 2022-03-21

Данный вариант самый практичный и пригодится в большинстве случаев реализации ЛК (ЛК – личный кабинет).

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

URL

Это слаг страницы личного кабинета, у Вас он может отличаться.

Внешний вид данного меню должен быть таким:

Все, теперь мы можем быть полностью спокойны что при выходе с сайта пользователь не попадет на страницу домен/wp-login.php?loggedout=true с текстом “Вы вышли из системы.” или “Вы уверены, что хотите выйти”. Ну а при входе пользователь точно попадет на страницу аккаунта.

Сценарий перехода на нужные страницы при входе и выходе v2 – (более старый и не всегда актуальный вариант)

Как и в примере выше, не забудьте поправить данный слаг:

Это слаг страницы личного кабинета, измените его на слаг своей страницы.

Хуки и фильтры формы восстановления пароля:

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 в Кодексе вордпресс.

Шаг 1. установите плагин формы входа

Итак, для начала выберите плагин, затем установите и активируйте его. Если понравившийся плагин находится в репозитории WordPress.org, вы можете найти его прямо на панели инструментов WordPress в разделе «Плагины»> «Добавить новый », используя поле поиска. Например, мы выбрали настройщик пользовательской страницы входа.

Если ваш плагин взят со стороннего веб-сайта, вы все равно захотите перейти в «Плагины»> «Добавить новый», но затем нажмите кнопку «Загрузить плагин». Оттуда следуйте инструкциям на экране, чтобы загрузить zip-файл плагина и установить его.

Шаг 2. найдите настройки формы входа

Теперь, когда ваш плагин установлен и активен, вы должны попытаться найти страницу настроек плагина. Для настраиваемого настройщика страницы входа они находятся в разделе Внешний вид> Настройка входа в систему. Другие плагины можно найти в разделе «Инструменты», «Настройки» или даже в новой вкладке меню, добавленной в вашу панель управления WordPress.

Шаг 3. начните настраивать форму входа в wordpress

Как только вы нашли свои настройки, пора приступить к работе! Если у вас есть параметры на странице настроек, начните их изменять. Для используемого нами плагина Custom Login Page Customizer вам сначала нужно нажать кнопку «Начать настройку», которая откроет настройщик WordPress.

Этот конкретный плагин использует знакомые варианты дизайна для цветов, фона, отступов и многого другого.

Просто пройдите через доступные параметры, чтобы создать свою собственную форму входа в WordPress.

Да, и если вам нужно (или вы хотите) изменить что-то, что недоступно в качестве встроенной опции, вы всегда можете использовать немного настраиваемого CSS, чтобы внести свои изменения. Плагин Custom Login Page Customizer, который мы используем, включает собственную панель CSS, но есть раздел «Additional CSS» в настройщике WordPress по умолчанию, который вы тоже можете использовать.

Когда вы закончите, просто не забудьте сохранить. После этого ваша новая пользовательская форма входа в WordPress должна быть запущена!

Заключение

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

В этой статье мы представили пять плагинов, которые помогут вам создать настраиваемую форму входа в WordPress, соответствующую вашему сайту, но, возможно, мы пропустили ваш любимый. Есть ли другие плагины для пользовательских форм входа, которые, по вашему мнению, стоит попробовать? Сообщите нам о них в комментариях ниже!

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

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