Sozdaiblog.ru
Назад

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

Опубликовано: 09.02.2013
Время на чтение: 15 мин
50
8

Хорошего настроения всем читателям – 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» может не корректно отображается в Ваших браузерах, обязательно почистите свой КЭШ. Если проблема  не разрешилась, сообщите автору, то есть мне! Заранее благодарю.

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

Поделиться
Похожие записи
Комментарии:
  • prosto_master
    Опубликовано: 10.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.02.2013 Ответить на сообщение

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

  • Сергей Медведев
    Опубликовано: 10.02.2013 Ответить на сообщение

    Да, я тоже люблю, чтобы везде было красиво...
    Не знаю еще применю ли я этот метод, но попытаться надо!
    Спасибо, Денис!

    • Денис Черников
      Опубликовано: 10.02.2013 Ответить на сообщение

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

      • Александр
        Опубликовано: 10.02.2013 Ответить на сообщение

        Сергей, Ваш блог однозначно и красивый и наполненный содержанием. Но для большинства пользователей красивость входа в админку абсолютно не актуально.
        Этим можно занятся только:
        1.Изучив CSS и HTML.Без этих знаний от операций с таблицами стилей я бы воздержался.
        2. Если у блогера полно свободного времени и когда самим содержанием блога блогер полностью удовлетворен. А последнего быть не может!
        Сам блог Сергея, по своему содержанию неординарен и для начинающих блогеров- находка.

  • Ирина
    Опубликовано: 10.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.02.2013 Ответить на сообщение

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

      • Ирина
        Опубликовано: 10.02.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 10.02.2013 Ответить на сообщение

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

  • Руслан
    Опубликовано: 10.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.02.2013 Ответить на сообщение

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

  • Светлана
    Опубликовано: 13.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 13.02.2013 Ответить на сообщение

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

  • Томский школьник
    Опубликовано: 13.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 13.02.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 13.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 13.02.2013 Ответить на сообщение

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

      • Евгений
        Опубликовано: 13.02.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 14.02.2013 Ответить на сообщение

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

  • Виктор
    Опубликовано: 23.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.02.2013 Ответить на сообщение

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

  • Игорь
    Опубликовано: 24.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.04.2013 Ответить на сообщение

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

  • Игорь
    Опубликовано: 24.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.04.2013 Ответить на сообщение

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

  • Игорь
    Опубликовано: 24.04.2013 Ответить на сообщение

    Нет,не оформлял.Пытался без изображения изменить цвет фона,что-то вроде body.login {
    background-color: #123523;
    }
    тоже ничего не меняется

    • Денис Черников
      Опубликовано: 24.04.2013 Ответить на сообщение

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

  • Игорь
    Опубликовано: 24.04.2013 Ответить на сообщение

    Вот последние строчки у меня в 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 (', '); ?> |

    А вот начало 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;
    }
    Что не правильно?

    • Денис Черников
      Опубликовано: 24.04.2013 Ответить на сообщение

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

      • Игорь
        Опубликовано: 25.04.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 25.04.2013 Ответить на сообщение

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

  • Коля
    Опубликовано: 22.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.06.2013 Ответить на сообщение

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

      • Коля
        Опубликовано: 22.06.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 22.06.2013 Ответить на сообщение

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

  • Коля
    Опубликовано: 23.06.2013 Ответить на сообщение

    не работает
    фон и менюшка не поменялись.
    что делать(

    • Денис Черников
      Опубликовано: 23.06.2013 Ответить на сообщение

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

  • Сергей
    Опубликовано: 10.09.2013 Ответить на сообщение

    После тюнинга получил ошибку, спасибо автору за подробнейшее описание!!!!
    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

  • Александр
    Опубликовано: 12.11.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.11.2013 Ответить на сообщение

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

  • Андрей
    Опубликовано: 03.12.2013 Ответить на сообщение

    Ююхухх... Прикольно у меня получилось. Спасибо за статью. И это без всяких знаний PHP. Вот еслиб ещё можно было вторую админку поставить с таким стилем в виджет на сайт то былоб совсем круто. А так админку всё-равно прячу свою, кроме меня никто и не видит.
    Скриншот если епму интересно
    http: //forex-auto.org/wp-content/uploads/2013/12/Adminka-Worldpress.jpg

    • Денис Черников
      Опубликовано: 03.12.2013 Ответить на сообщение

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

  • Денис
    Опубликовано: 23.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.02.2014 Ответить на сообщение

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

  • Денис
    Опубликовано: 24.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.02.2014 Ответить на сообщение

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

  • Ренат
    Опубликовано: 16.05.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 19.05.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 10.07.2014 Ответить на сообщение

    Вариант замены прозрачной формы ввода своей картинкой
    #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;
    для подгонки вашего изображения.

  • Татьяна
    Опубликовано: 30.10.2016 Ответить на сообщение

    Страница админки открывается по адресу: www/site.ru/www/site.ru... Хотя главная страница открывается по адресу: www/site.ru. Я так понимаю, что нужно что-то прописать в general-template.php, но как это сделать я не знаю, потому как абсолютный новичок. Помогите!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.