Как изменить вид формы входа WordPress
В этом уроке, я расскажу вам, как изменить стандартный вид формы входа 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, вы сможете изменить форму входа до неузнаваемости, нужна лишь ваша фантазия.
На этом все, наш урок подошел к концу, если я что-то упустил, или у вас есть вопросы, задавайте их в комментариях, с радостью отвечу. Как всегда буду рад если поделитесь статьей в социальных сетях или просто нажмете “Мне нравится”.
привет.установил кнопку все работает как надо но это для версии ПК.Далее я захотел адаптироватть сайт под мобилу,установил плагин WPtouch Mobile Plugin .И вот когда версия для мобилы включена при входе на сайт появляется стандартная форма вордпресс.как быть?
Скорее всего этот плагин перебивает стили, которые вы прописывали, попробуйте добавить к стилям !important, чтобы они были важнее чем стили плагина