Как изменить вид формы входа WordPress

Опубликовано: 01.09.2018

видео Как изменить вид формы входа WordPress

Изменить адрес страницы входа 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


Просто и быстро изменить страницу входа login wordpress !

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

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


WordPress. Как изменить внешний вид формы-регистрации (анкеты)

/* * Кастомный вид формы входа */ /* Фон * Это можем быть картинка или цвет, прописывайте !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, вы сможете изменить форму входа до неузнаваемости, нужна лишь ваша фантазия.

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

Похожие записи

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

Свяжитесь со мной
rss