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

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

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

Итак, форма авторизации пользователей. Как она по умолчанию выглядит в 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;
}

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

По теме

Комментарии 6

  • Денис Маркевич14 апреля 2017 в 21:04 #

    Подскажите как в стандартной форме входа WordPress поменять название полей? Поле установки/удаления плагина частично стали содержать текст на английском.

    • Миша15 апреля 2017 в 11:04 #

      Здравствуйте, Денис,

      пока что очень мало информации.

      • Денис Маркевич15 апреля 2017 в 22:04 #

        Михаил, форма входа расположена здесь - markevich.by/premium/?action=login. Отображается Username or Email, Back to .... Не могу понять почему и как сделать, чтобы было на русском. Из консоли WordPress переустановку запускал, язык в WordPress установлен русский. Неверный перевод замечен после установки плагина Optimizepress Member (в настоящий момент отключен).

        • Миша16 апреля 2017 в 17:04 #

          Смотрите, Денис,

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

          Шаг 1. Попробуйте деактивировать плагин s2member. Посмотрите, что получится.
          Шаг 2. Верните страницу логина на своё место. /wp-login.php.

          Я бы сначала сделал эти два шага, а потом бы смотрел в зависимости от ситуации. Можете попробовать и переустановить WordPress. Но не так, чтобы из консоли, а так, что делаем резервные копии, удаляем целиком, качаем заново с официального сайта, ставим, коннектим к текущей БД, ставим и активируем тему, ставим и активируем плагины. В таком порядке примерно.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.