Изменение страницы входа WordPress. C учётом сообщений об ошибках и редиректов.

wp-login.php  /  18 комментариев

На своём блоге я всегда стараюсь брать те темы, которые наиболее актуальны русскоязычным пользователям. Иногда получается… а иногда нет. Поэтому прежде всего хочу напомнить — если у вас есть предложение для поста, свяжитесь со мной любым удобным вам способом. Буду вам за это очень благодарен.

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

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

Стандартная страница авторизации в WordPress

Форма выглядит и работает прекрасно. Однако, если вы работаете над серьёзным сайтом, возможно хотелось бы сделать форму, вписывающуюся в общий дизайн, и без логотипа WordPress. Ну хорошо, логотип вы можете заменить + немного своих стилей подобавлять, но идеальной кастомизации вы всё же не добьётесь, только потратите массу времени и сил.

Итак, произвольная форма входа для WordPress (в этой статье я её ещё буду называть кастомной формой — просто потому что мне так удобнее).

Начну с такого важного преимущества кастомной формы, как возможность задавать свой URL, например http://ваш-сайт/login.

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

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

Итак, поехали.

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

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

Но тут вам важно обратить внимание на URL страницы входа и страницы личного кабинета. Этот код уже оптимизирован для URL вашсайт.com/login (на этой странице форма входа пользователей) и вашсайт.com/account (на этой странице личный кабинет).

Если вы будете использовать другие URL, то просто замените их в этом коде и в коде из следующего шага. Кода в принципе немного, думаю у вас не возникнет с этим проблем.

/*
 * Добавляем шорткод, его можно использовать в содержимом любой статьи или страницы, вставив [misha_custom_login]
 */
add_shortcode( 'misha_custom_login', 'misha_render_login' );
 
function misha_render_login() {
 
	// проверяем, если пользователь уже авторизован, то выводим соответствующее сообщение и ссылку "Выйти"
	if ( is_user_logged_in() ) {
		return sprintf( "Вы уже авторизованы на сайте. <a href='%s'>Выйти</a>.", wp_logout_url() );
	}
 
	// присваиваем содержимое формы переменной и затем возвращаем её, выводить через echo() мы не можем, так как это шорткод
	$return = '<div class="login-form-container"><h2>Войти на сайт</h2>';
 
	// если возникли какие-либо ошибки, отображаем их
	if ( isset( $_REQUEST['errno'] ) ) {
		$error_codes = explode( ',', $_REQUEST['errno'] );
 
		foreach ( $error_codes as $error_code ) {
			switch ( $error_code ) {
				case 'empty_username':
					$return .= '<p class="errno">Вы не забыли указать свой email/имя пользователя?</p>';
					break;
				case 'empty_password':
					$return .= '<p class="errno">Пожалуйста, введите пароль.</p>';
					break;
				case 'invalid_username':
					$return .= '<p class="errno">На сайте не найдено указанного пользователя.</p>';
					break;
				case 'incorrect_password':
					$return .= sprintf( "<p class='errno'>Неверный пароль. <a href='%s'>Забыли</a>?</p>", wp_lostpassword_url() );
					break;
				case 'confirm':
					$return .= '<p class="errno success">Инструкции по сбросу пароля отправлены на ваш email.</p>';
					break;
				case 'changed':
					$return .= '<p class="errno success">Пароль успешно изменён.</p>';
					break;
				case 'expiredkey':
				case 'invalidkey':
					$retun .= '<p class="errno">Недействительный ключ.</p>';
					break;
			}
		}
	}
 
	// используем wp_login_form() для вывода формы (но можете сделать это и на чистом HTML)
	$return .= wp_login_form(
		array(
			'echo' => false, // не выводим, а возвращаем
			'redirect' => site_url('/account/'), // куда редиректить пользователя после входа
		)
	);
 
	$return .= '<a class="forgot-password" href="' . wp_lostpassword_url() . '">Забыли пароль</a></div>';
 
	// и наконец возвращаем всё, что получилось
	return $return;
 
}

Вставили?

Теперь вы можете вставить шорткод [misha_custom_login] в содержимое страницы и у вас выведется форма. В принципе вы можете использовать этот шорткод много раз и на многих страницах и записях, но имейте ввиду, что у вас должна быть основная страница авторизации, как я уже писал выше, у меня это вашсайт.com/login, но вы можете использовать и другой URL, главное не забыть поменять его в коде.

Я использовал стандартную тему twentyfifteen и форма у меня получилась следующая:

Нестандартная форма входа в 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;
}

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 18

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

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал