[Green]

Многие из вас, я думаю, знакомы со страницей входа в WordPress что называется wp-login.php. Она, конечно, выглядит просто, но зато работает отлично. Если ваш сайт не рассчитывает на регистрацию или авторизацию юзеров, то про нее никто не вспоминает, но когда дело доходит до создания веб-сайта для клиентов, многие хотят сделать вход в систему более интегрированным с общим дизайном.

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

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

Пользовательская страница авторизации.

Во-первых, нам нужно создать пользовательский шаблон для страницы входа в систему. Чтобы сделать это, вы должны создать новый шаблон страницы и назовите его, например, page-login.php, после чего через FTP перенесите в его папку своего шаблона. Затем создайте новую страницу из внутреннего интерфейса WordPress и установите постоянную ссылку для входа, таким образом WordPress автоматически назначит шаблон page-login.php для этой страницы.

Форма авторизации

Поставьте тег wp_login_form в шаблоне page-login.php для отображения формы входа.

 <?php wp_login_form(); ?>

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

 <?php  
$args = array(  
    'redirect' => home_url(),   
    'id_username' => 'user',  
    'id_password' => 'pass',  
   )   
;?>  
<?php wp_login_form( $args ); ?>

Кроме того, вы можете добавить здесь дополнительные элементы страницы. Это может быть ваш логотип и краткое описание сайта, например.

 <div class="login-branding">
	<a href="#" class="login-logo">Mysite.com</a>
	<p class="login-desc">
		Mysite.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks.
	</p>
</div>
<div class="login-form">
<?php
$args = array(
    'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
   ) 
;?>
<?php wp_login_form( $args ); ?>
</div>

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

Валидация

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

Во-первых, страницы wp-login.php по-прежнему доступна, а было бы лучше, чтобы перенаправить всех со страницы wp-login.php на нашу новую страницу входа, чтобы сделать ее полную интеграцию в сайт.

Для этого надо добавить следующий код в конец файла functions.php вашей темы.

 function redirect_login_page() {
	$login_page  = home_url( '/login/' );
	$page_viewed = basename($_SERVER['REQUEST_URI']);

	if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
		wp_redirect($login_page);
		exit;
	}
}
add_action('init','redirect_login_page');

После этого внесите переменную $login_page на страницу входа созданную выше.

Во-вторых, страница входа может работать, и не так как ожидалось, когда мы успешно прошли идентификацию. Ведь если происходит ошибка, вроде указания недопустимых комбинаций пользователя и пароля, или пропуск пустого поля, мы также будем отброшены в wp-login.php.

Чтобы решить эту проблему, добавьте следующие функции в конец того-же файла functions.php.

 function login_failed() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . '?login=failed' );
	exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function verify_username_password( $user, $username, $password ) {
	$login_page  = home_url( '/login/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

Эти две функции выполняют обе поставленные задачи.

Последняя проблема, в том что мы также будет перенаправлены на wp-login.php после того как вышли из сайта. Таким образом, мы должны указать перенаправление URL при выходе.

 function logout_page() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . "?login=false" );
	exit;
}
add_action('wp_logout','logout_page');

Сообщение об ошибке.

Надо еще выводить сообщение об ошибке, показывая пользователю, что произошла ошибка, и сделаем мы это с помощью переменной, что вложили в URL.

Поместите этот код в конце шаблона страницы входа.

 $login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;

Приведенный выше код будет проверять, содержит ли переменная login переменную. И пишем дальше:

 if ( $login === "failed" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
} elseif ( $login === "empty" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
} elseif ( $login === "false" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
}

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

Можно еще стилизировать страницу восстановления пароля, регистрации и персонализировать ошибку, но это уже другая история, может кто-то из коллег подключиться. Знаю что среди ребильчан есть хорошие мастера по Wordpress