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

1. Подключаем функцию

Для начала, нам нужно подключить файл стилей, для этого в файл functions.php вставляем код.

add_action('login_head', 'custom_login');
 
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo( 'stylesheet_directory' ) . '/custom-login.css" />';
}

После того, как вы вставили данный код, создайте в корне вашего шаблона файл custom-login.css

2. Вносим изменения в стили формы

Стандартная форма входа WordPress, она как и все остальное на вашем сайте имеет свои стили, которые очень легко можно изменить, создав новые стили с употреблением !important, чтобы перекрыть старые. Копируем нижеприведенный код стилей и вставляем в файл custom-login.css.

/*
 * Кастомный вид формы входа
 */
 
/* Фон
 * Это можем быть картинка или цвет, прописывайте !important в конце.
 */


html, body {
 background-color:#2ca1cc!important;
 height:initial!important;
 }
 
 
/* Заголовок (Лого "WordPress")
 * Можно вставить любое изображение с вашим логотипом, но при этом нужно задавать высоту и ширину, с употреблением !important
 */
#login h1 a { 
 display:none;
 }
 
/* Форма 
 * Цвет фона, рамки, тень и т.д..
 */
.login .message {
 border-radius:4px;
} 
#login form {
 background-color:#fff;
 border-radius:4px;
 }
 
/* Поля входа
 * Поле логин и пароль
 */
#login .input {
 background-color:#eaedf2;
 border: none;
 border-radius:3px;
 }


#login label {
 color: #888;
 font-size:15px;
 }
/*
 * Кнопка Войти
 */
#login input[type=submit] {
 background-color: #47ACF0;
 border-radius: 0px;
 border: none;
 border-radius:3px;
 border-bottom: 4px solid #4592C4;
 }
 
#login input[type=submit]:active {} 
 
/*
 * Вернуться в блог и кнопка Забыли пароль
 */
#nav a,
#backtoblog a {
 color:#fff !important;
 }

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

Если вы хотите изменить то чего нету в стилях, посмотрите через инструмент разработчика, какой class или id у того или иного элемента. После чего, пропишите их в файл custom-login.css. Важно понять, что все классы которые имеются на странице входа, можно стилизовать как вам угодно. Если у вас есть базовые знания css, вы сможете изменить форму входа до неузнаваемости, нужна лишь ваша фантазия.

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