Создаем свою собственную страницу входа в 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 темы добавим следующий код, который позволит нам блокировать доступ к области администратора:

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

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

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