ГлавнаяВёрстка WordPress › Как красиво оформить Вход в админку WordPress?


Как красиво оформить Вход в админку WordPress?


Аадминка WordPress

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

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

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

 

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

 

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

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

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

Итак.

 

Как изменить форму входа в админку 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("http://Путь к кртинке") no-repeat fixed center;

}

.login h1 a {
background-image: url("http://Путь к логотипу");
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("http://Путь к картинке") no-repeat fixed center;
background-image: url("http://Путь к логотипу");

 

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

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

 

Аадминка WordPress

ДЕМО СКАЧАТЬ

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

 

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




49 комментариевА что думаете Вы?

  1. prosto_master

    Интересная статья, нужно будет обязательно попробовать затюнинговать свою админку)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, пробуйте!

    [Ответить]

  2. Сергей Медведев

    Да, я тоже люблю, чтобы везде было красиво...

    Не знаю еще применю ли я этот метод, но попытаться надо!

    Спасибо, Денис!

    [Ответить]

    Денис Черников ответил:

    Всегда пожалуйста, Сергей!

    [Ответить]

    Александр ответил:

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

    Этим можно занятся только:

    1.Изучив CSS и HTML.Без этих знаний от операций с таблицами стилей я бы воздержался.

    2. Если у блогера полно свободного времени и когда самим содержанием блога блогер полностью удовлетворен. А последнего быть не может!

    Сам блог Сергея, по своему содержанию неординарен и для начинающих блогеров- находка.

    [Ответить]

  3. Ирина

    Привет. Спасибо за четкие инструкции, нужно будет попробовать.

    У меня другой вопрос: можно ли настроить вордпресс таким образом, что бы при регистрации пользователя не перебрасывало на страницу wp-login, а проходила непосредственно на самом сайте?

    [Ответить]

    Денис Черников ответил:

    Этим вопросом я пока не интересовался, думаю, это сделать можно.

    [Ответить]

    Ирина ответил:

    Значит будем вместе искать ответ на эту задачу.

    [Ответить]

    Денис Черников ответил:

    Возможно, но чуть позже!

    [Ответить]

  4. Руслан

    это просто круто, все были мысли изменить вход на сайт, и это я считаю очень клевым способом это сделать, спасибо

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Руслан! Рад что Вам понравилось!

    [Ответить]

  5. Светлана

    Классно. Обожаю, когда можно сделать что-то клевое на сайте, не используя плагины.

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

    [Ответить]

    Денис Черников ответил:

    Это позволяет любой хостинг, но зачем к нему обращаться если есть маленькая и быстрая программка. А вообще,кому и как удобней.

    [Ответить]

  6. Томский школьник

    Статья очень даже интересная! Но все же — это все лишнее, «безделушки»... Самое главное защитить админку от взлома, а там уже что угодно делай, главное чтобы на развитие криво не отразилось :-)

    [Ответить]

    Денис Черников ответил:

    Это уже решит каждый сам для себя, нужно ему это или нет. Лично меня это приятно радует когда я захожу в панель администратора.

    [Ответить]

  7. Евгений

    А как поменять только фон страницы авторизации? Куда и что нужно указать чтобы задать фоном картинку? Если знаете, прошу ответить, а то уже устал искать решение

    [Ответить]

    Денис Черников ответил:

    Просто удалите лишние стили оставив лишь тот, где прописывается адрес для фоновой картинки.

    [Ответить]

    Евгений ответил:

    я имею ввиду можно ли в стандартных файлах это прописать? Чтобы не создавать лишние

    [Ответить]

    Денис Черников ответил:

    Конечно можно! Выбирайте вариант «трудный» предложенный в статье и вперёд. Найдёте тег body в котором допишете первую строчку с ссылкой на изображение.

    [Ответить]

  8. Виктор

    Благодарен за оформление админки! Денис, это нормально, что я теперь пользуюсь твоим блогом? Если нужна для этого регистрация где то, я рад быть ПОСТОЯННЫМ читателем такого прекрасного блога. С увожением Виктор Зорин.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Виктор! Если Вам так нравиться мой блог, Вы просто можете подписаться на его рассылку, что бы получать уведомления о выходе нового материала. Больше нет ни каких требований. Да и это лишь сделано по желанию для удобства постоянных читателей. С праздником Вас!

    [Ответить]

  9. Игорь

    Как не странно,но у меня ничего не происходит. Как был белый фон,так и остался. Возможно я неправильно указываю путь к файлу css,вот путь:function custom_login_css () {

    echo '';

    }

    add_action ('login_head', 'custom_login_css');

    [Ответить]

    Денис Черников ответил:

    А форму ввода изменили?

    [Ответить]

  10. Игорь

    Как ее изменить?

    [Ответить]

    Денис Черников ответил:

    Я имею ввиду у Вас только задний фон не появляется? А саму форму ввода пароля оформляли?

    [Ответить]

  11. Игорь

    Нет,не оформлял.Пытался без изображения изменить цвет фона,что-то вроде body.login {

    background-color: #123523;

    }

    тоже ничего не меняется

    [Ответить]

    Денис Черников ответил:

    Если Вы делали всё в точности, как описано в моей статье, то 100% должно работать. Потому что на данный момент у меня реализовано это именно так. Проверяйте всё внимательней.

    [Ответить]

  12. Игорь

    Вот последние строчки у меня в function.php

    // Add Postinfo Data

    add_action ( 'themezee_display_postinfo_index', 'themezee_postinfo_content' );

    add_action ( 'themezee_display_postinfo_single', 'themezee_postinfo_content' );

    function themezee_postinfo_content () {

    _e ('Category: ', 'themezee_lang'); the_category (', '); ?> |

    <?php if (get_the_tags ()) the_tags (__ ('Tags: ', 'themezee_lang'), ', ');

    }

    function custom_login_css () {

    echo '';

    }

    add_action ('login_head', 'custom_login_css');

    ?>

    А вот начало login-styles.css:

    body.login {

    background: #fbfbfb url («http://holding-match.ru/wp-content/themes/zeesynergie/login/qqq.jpg») no-repeat fixed center;

    }

    .login h1 a {

    background-image: url («http://holding-match.ru/wp-content/themes/zeesynergie/login/39329.jpg»);

    background-size: 300px 26px;

    width: 315px;

    height: 26px;

    }

    Что не правильно?

    [Ответить]

    Денис Черников ответил:

    Для начала Вы запихнули код между чужими < ?php ?>. Обязательно проверьте кодировку кода UTF-8! Пробуйте ставить после ?>! Пробуйте в отдельном < ?php ?> после ?>. Экспериментируйте! Хотя всё и так должно было работать. Вы хоть кэш браузера своего почистили?

    [Ответить]

    Игорь ответил:

    Кэш конечно чистил. Куда только не вписывал код. И после ?> и в отдельный вставлял,ничего.

    [Ответить]

    Денис Черников ответил:

    Иногда бывает, что я тоже так думаю, а оказывается запятую пропустил или скобку не поставил. Единственное что тут можно посоветовать — внимательней всё просмотреть!

    [Ответить]

  13. Коля

    ничего не работает. Пробовал по всякому. Может вы что-то не дописали. Народ, кто пробовал повторить???

    [Ответить]

    Денис Черников ответил:

    У меня ведь работает! Всё написано чётко.

    [Ответить]

    Коля ответил:

    Все заработало!!! Спасибо

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, по-другому и быть не могло!

    [Ответить]

  14. Коля

    не работает

    фон и менюшка не поменялись.

    что делать (

    [Ответить]

    Денис Черников ответил:

    Николай, если не получается, значит Вы делаете не так, как нужно. Все действия и коды проверенны и отстреляны, у меня всё работает именно так. Внимательней смотрите!

    [Ответить]

  15. Сергей

    После тюнинга получил ошибку, спасибо автору за подробнейшее описание!!!!

    Authorization Required

    This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn't understand how to supply the credentials required.

    Apache/2.2.15 (CentOS) Server at docrf.net Port 80

    [Ответить]

  16. Александр

    Денис, интересное получается кино! У меня не меняется кнопка. Всё поменялось и фон и логин, а кнопка осталась вордпресовская. И как я ни кручу, ни верчу, результат — ноль. Может, что подскажете?

    [Ответить]

    Денис Черников ответил:

    Не знаю Александр, у меня всё поменялось! Где-то Вы что-то упустили или не тот файл стилей редактируете!

    [Ответить]

  17. Андрей

    Ююхухх... Прикольно у меня получилось. Спасибо за статью. И это без всяких знаний PHP. Вот еслиб ещё можно было вторую админку поставить с таким стилем в виджет на сайт то былоб совсем круто. А так админку всё-равно прячу свою, кроме меня никто и не видит.

    Скриншот если епму интересно

    http: //forex-auto.org/wp-content/uploads/2013/12/Adminka-Worldpress.jpg

    [Ответить]

    Денис Черников ответил:

    Отлично, поздравляю Вас! Рад что Вы справились! Я поглядел, мне понравилось!

    [Ответить]

  18. Денис

    День добрый, а как мне сделать, чтобы картинка бэкграунда была вписана в экран. Обрезка вокруг центра не совсем годится, хотя бы прокрутку... вписал scroll — не помогло. Тупой я чайник, помогите. http:// aaspb.ru/wp-login.php?loggedout=true

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Денис! Немного не понял проблему! Что значит вокруг центра?

    [Ответить]

  19. Денис

    Спасибо, решение нашел сам. В файле login-style.css добавил аргумент background-size: contain; при этом содержимое рисунка целиком видно в окне браузера, хотя сам рисунок больше. Пробовал вместо contain применить cover — результат хуже: края обрезаны. Также не понял, отчего зависит размер контейнера под logo — мой рисунок не влезает чуть-чуть. Вот сходите, посмотрите (ссылка в предыдущем комменте).

    [Ответить]

    Денис Черников ответил:

    Не за что! Всё дело в стилях!

    [Ответить]

  20. Ренат

    Большое спасибо за статью :-) то, что искал... вот сегодня днём (ночью пишу сейчас) и займусь. Уже что только не делал на своём блоге с оформлением, а про админку всё забывал. В принципе-то и так сойдёт, но всё-таки не один блог веду теперь и планы серьёзные, так что пусть будет красиво и уникально в соответствии со стилями сайта. Статья и файлы однозначно в копилку :-)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Ренат! Надеюсь, что у Вас всё получится!

    [Ответить]

  21. Андрей

    Вариант замены прозрачной формы ввода своей картинкой

    #login {

    padding: 10px 0 0; /* высота отступа логотипа */

    }

    /* Прозрачный фон формы входа */

    .login form {

    width: 250px;

    height: 250px;

    padding: 150px 100px 100px; /* отступ с верху , отступ с лева, отступ с права */

    margin-left: auto;

    margin-right: auto;

    background: #fbfbfb url («login.png») no-repeat center; /*картинка на которой расположена форма входа*/

    background-size: 450px 490px;

    }

    /* Форма ввода логина и пароля */

    .login form input {

    width: 70px; /* длина кнопки ввод */

    height: 48px; /* ширина кнопки ввод */

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    display: block;

    }

    Остальное как в статье. Возможно придется поиграть с размерами:

    width: 250px;

    height: 250px;

    и

    background-size: 450px 490px;

    для подгонки вашего изображения.

    [Ответить]

Оставить комментарий!

Вверх