Хорошего настроения всем читателям – Sozdaiblog.ru!

Если Вам наскучила стандартная форма входа в админку WordPress, то сегодняшняя статья, это именно то, что поможет изменить её до неузнаваемости.

Все мы настолько привыкли  к однотипному виду входа в панель администратора WordPress, что даже не задумываемся о том, что из унылого го…а, про которое пел Вася Обломов в своей песне:

 

Аудиозапись: Adobe Flash Player (версия 9 или выше) требуется для воспроизведения этой аудиозаписи. Скачать последнюю версию здесь. К тому же, в Вашем браузере должен быть включен JavaScript.

 

мы можем сделать конфетку, которая придётся по вкусу многим пользователям Интернета.

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

Ладно, достаточно болтовни переходим к технической части.

Итак.

 

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

 

Дорогие друзья, у нас с Вами есть три пути: «бестолковый», «трудный» и «оптимальный».

В данном случае «бестолковым» я считаю установку плагина «Custom Login», с помощью которого можно менять внешний вид формы входа прямо из админки. Да, без определённых знаний это просто, но лишние плагины притормаживают Вашу скорость загрузки сайта. Поэтому, этот вариант мы рассматривать не будем.

Если Вы мозголом, каким является автор «Sozdaiblog.ru», то можно выбрать «трудный» путь. Для этого используя FTP-клиент необходимо попасть в корневую папку с файлами Вашего сайта, найти там каталог «wp-admin» внутри которого есть папка «CSS». В папке «CSS» находится куча файлов, из которых Вам потребуется только «wp-admin.min.css». Открываете его для редактирования и с помощью «Firebug» полдня отыскиваете и верстаете необходимые элементы. Этот путь очень долгий, трудный и справиться с поставленной задачей сможет не каждый.

Исходя из всего вышесказанного, мы выбираем «оптимальный». Этот вариант подойдёт абсолютно всем.

 

Поехали.

Запускаем любой FTP-клиент (желательно FileZilla), добираемся до Вашей активной темы оформления, заходим в неё и создаём папку с названием «login».

Затем на рабочем столе Вашего компьютера используя стандартный блокнот, создаём файл с названием «login-styles» и расширением «.css».

В файл вписываем следующий код и закидываем его в созданную ранее папку «login»:

 


body.login {
background: #fbfbfb url("https://Путь к кртинке") no-repeat fixed center;

}

.login h1 a {
background-image: url("https://Путь к логотипу");
background-size: 300px 26px;
width: 315px;
height: 26px;
}

.login form {
margin-left: auto;
margin-right: auto;
padding: 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}

.login form input {
width: 240px;
height: 48px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
}

.login form input:focus,
.login form textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}

.login label {
color: #fff;
line-height: 26px;
}

.login form .input,
.login input[type="text"] { color: #8c8a8a;}
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}

input.button-primary {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #3d5a5a;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
margin: 8.5px;
}

input.button-primary:hover {
border: 1px solid #3d5a5a;
text-shadow: #333333 0 1px 0;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}

input.button-primary:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #3d5a5a;
background: #6da5a3;
background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
background: -webkit-linear-gradient(top, #416b68, #609391);
background: -moz-linear-gradient(top, #416b68, #6da5a3);
background: -ms-linear-gradient(top, #416b68, #6da5a3);
background: -o-linear-gradient(top, #416b68, #6da5a3);
background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}

.login #nav,
.login #backtoblog {
    font-family:'Open Sans Condensed', sans-serif;
    float: left;
    margin: 0 0 0 1px;
        padding-bottom: 20px;
        font-size: 14px;
        font-weight:bold;

    }
div.updated,
.login .message {
    background-color: lightYellow;
    border-color: #E6DB55;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    }

 

Теперь, Вам необходимо подобрать две картинки. Одна для заднего фона, а другая будет логотипом над формой входа в админку WordPress. Их Вы аналогично закидываете в папку  «login». Чтобы фоновая картинка нормально отображалась на мониторах различного разрешения, желательно использовать большие обои, как на рабочем столе компьютера. Размер логотипа на Ваше усмотрение.

Следующим шагом открываем файл «functions.php» и в самом конце добавляем такой код:

 

 function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="http://Путь к файлу/login-styles.css" />';
}

add_action('login_head', 'custom_login_css');

 

Как Вы видите в нём нужно вписать путь к файлу «login-styles.css».

Осталась самая малость. Пропишите пути к картинкам.

Для этого откройте «login-styles.css» и отредактируйте следующие строчки:

 


background: #fbfbfb url("https://Путь к картинке") no-repeat fixed center;
background-image: url("https://Путь к логотипу");

 

В файле «login-styles.css» есть все необходимые настройки для изменения внешнего вида входа в админку WordPress.

Для более наглядного примера воспользуйтесь кнопкой «Демо». Так же самый ленивый может скачать уже готовый файл стилей.

 

ДЕМО СКАЧАТЬ

На сегодня это всё. До новых статей…

 

P. S.  В связи с установкой на главной странице нового слайдера, «Sozdaiblog.ru» может не корректно отображается в Ваших браузерах, обязательно почистите свой КЭШ. Если проблема  не разрешилась, сообщите автору, то есть мне! Заранее благодарю.

С уважением, Денис Черников!