Как изменить вид формы входа 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

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, вы сможете изменить форму входа до неузнаваемости, нужна лишь ваша фантазия.

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

Метки: , Дата 01.07.2014
Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

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

  • петя ·
    12.02.2016 в 16:30
    #

    привет.установил кнопку все работает как надо но это для версии ПК.Далее я захотел адаптироватть сайт под мобилу,установил плагин WPtouch Mobile Plugin .И вот когда версия для мобилы включена при входе на сайт появляется стандартная форма вордпресс.как быть?

    • Admin ·
      05.07.2016 в 18:13
      #

      Скорее всего этот плагин перебивает стили, которые вы прописывали, попробуйте добавить к стилям !important, чтобы они были важнее чем стили плагина

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама