Создаем свою собственную страницу входа в WordPress | Блог про WordPress

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

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

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

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

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

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

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

$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' );

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

Ограничиваем доступ к панели администратора только для администраторов

Для начала нам нужно ограничить доступ к области администратора только для требуемых пользователей; в данной ситуации я разрешу вход в панель администрирования только для администраторов.

В файл functions.php нашей WP темы добавим следующий код, который позволит нам блокировать доступ к области администратора:

Похожее:  Авторизация на сайте через ВК с занесением пользователя в базу данных (PHP) »

Плагины авторизации wordpress

Плагины Вход / Выход в меню Вордпресс

В репозитарии Вордпресс можно найти множество плагинов для входа на Вордпресс сайт.

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

Большинство плагинов — несколько Килобайт, могут служить альтернативой снипетам в functions.php.

Содержание:

Плагины, которые скрывают элементы меню

Плагины, которые добавляют элементы меню

Плагин комбайн для создания шапки сайта

Плагины, которые скрывают или показывают элементы меню в зависимости от роли или авторизации посетителя.

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

Например, вы можете добавить две Произвольных ссылки во Внешний видМенюДобавьте элементы меню со ссылками на Вход и Выход.

В настройках меню выберите показывать ссылку на Вход только не-авторизованным посетителям (Logged Out Users).

Ссылку на Выход показывать только авторизованным посетителям (Logged In Users).

Размер плагина 30 Кб.

Аналогичный плагин авторизации, но имеет больше условий, по которым может показывать или скрывать элементы меню:

  • Показывает / Скрывает элементы меню на мобильных,
  • В зависимости от типа страницы
  • Для разных ролей пользователей
  • Для посетителей из разных стран
  • В зависимости от языка браузера
  • Статус Мембершипа

Плагин If Menu работает с плагинами WooCommerce Subscriptions, WooCommerce Memberships, Groups, WishList Member и Restrict Content Pro.

Размер плагина 332 Кб.

User Menus показывает или скрывает элементы меню для авторизованных и неавторизованных посетителей, или для пользователей с выбранными ролями.

Особенность плагина в том, что он может выводить Имя, Фамилию, Аватар, Никнейм или Е-мейл пользователя в меню сайта.

Размер плагина 932 Кб.

Для отображения или скрытия элементов меню в этом плагине вы можете использовать Условные теги Вордпресс.

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

Плагин состоит из 1 файла длиной 100 строк. Размер 4 Кб.

Эти плагины не скрывают элементы меню, но добавляют свои собственные динамические элементы меню, которые показываются или скрываются в зависимости от авторизации посетителя.

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

Также вы можете настроить адрес страницы входа, адрес перенаправления после входа и адрес выхода.

1 Файл, 200 Строк. Размер плагина 4 Кб.

Этот плагин добавляет динамическую кнопку входа / выхода, ссылку на регистрацию и на аккаунт пользователя, которые скрываются или отображаются в зависимости от авторизации посетителя.

1 Файл, 300 Строк. Размер плагина 4 Кб.

Платный плагин JetBlocks, с помощью которого вы можете создать любую шапку сайта и настроить ее показ на любых страницах. Например, одна шапка для всех Страниц сайта, вторая шапка для Магазина WooCommerce, третья — для Аккаунта пользователя.

В версии 1.2.2 вы можете использовать такие виджеты:

  • Вход на сайт
  • Динамическая авторизация
  • Регистрация
  • Корзина WooCommerce
  • Поиск (по страницам, по продуктам или оба)

Виджет Auth Links показывает Войти и Регистрация для неавторизованных пользователей, и Выйти для авторизованных пользователей.

Все Элементы настраиваются как и все другие виджеты Elementor — Типографика, Цвет, Размер, Отступы и так далее.

Похожее:  Скачать Сбербанк онлайн на ПК или ноутбук бесплатно

Эффекты наведения можно добавить из библиотеки CSS, например, Hover CSS.

Хороший плагин, который делает все, что нужно. Перейти на сайт плагина.

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

  1. Как добавить кнопку Войти / Выйти в меню Вордпресс вручную с помощью кода в functions.php
  2. Как показывать разные меню для авторизованных и неавторизованных посетителей в Вордпресс
  3. Как отключить админ-бар WordPress для всех пользователей, кроме администратора
  4. Как изменить админку WooCommerce

Надеюсь, статья была полезна. Оставляйте комментарии.

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

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

Проблемы с созданием своей собственной страницы входа

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

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

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

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

Создаем новую страницу входа

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

Создаем новый PHP-файл в теме и добавляем в него следующий код:

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

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

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

Функция function is wp_login_form() получает один параметр, который является массивом аргументов, использующихся для изменения поведения формы.

Вот аргументы, которые вы можете передавать в функцию формы, и их стандартные значения:

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

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

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

Шаг 1. форма входа в виде шорткода

В принципе вам даже не нужно каких-либо знаний кода — просто копируете этот код и вставляете его в functions.php текущей темы.

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

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

Похожее:  Новосибирскрегионгаз личный кабинет

Шаг 2. проставляем нужные редиректы

На самом деле сделать форму — проще простого, а самое интересное начинается сейчас. В этом шаге мы сделаем две важные вещи:

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

Итак, код для functions.php:

/*
 * Редиректы обратно на кастомную форму входа в случае ошибки
 */add_filter('authenticate', 'misha_redirect_at_authenticate', 101, 3);
 
function misha_redirect_at_authenticate($user, $username, $password){
 
	if($_SERVER['REQUEST_METHOD'] === 'POST'){if(is_wp_error($user)){$error_codes = join(',', $user->get_error_codes());
 
			$login_url = home_url('/login/');
			$login_url = add_query_arg('errno', $error_codes, $login_url);
 
			wp_redirect($login_url);
			exit;
		}}
 
	return$user;
}
 
/*
 * Редиректы после выхода с сайта
 */add_action('wp_logout', 'misha_logout_redirect', 5);
 
function misha_logout_redirect(){
	wp_safe_redirect(site_url('/login/?logged_out=true'));
	exit;
}

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

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

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

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

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

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

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

Заключение

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

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

Вывод сообщения о неудачном входе

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

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

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

Adblock
detector