Здравствуйте, сегодня попробуем украсить форму входа в панель управления wordpress – уберем все лишнее и добавим фоновую картинку на саму форму.

Скачать исходники для статьи можно ниже

Вот что мы получим после всех нижеуказанных преобразований:

Правда красиво?!

Приступим:

1.  Создаем новый файл стилей для формы входа

Воспользуемся бесплатным редактором кода – Notepad++ (можно и простым Блокнотом) и создадим файл, например:  styles-login.css (сохраняем файл с расширением css).

Код файла будет следующим:

#login form {
padding-top: 50px;
background-image: url("https://mnogoblog.ru/wp-content/uploads/2013/06/login2.gif");
}

#login h1 {
display: none;
}

.login #nav,
.login #backtoblog {
    display: none;
    }

, в данном коде мы пользуемся тего

display: none;

, который скрывает ненужные элементы в форме входа.

Изначально форма входа в админку выглядит следующим образом:

На скриншоте выше я указал – какие теги за что отвечают, то есть вышеуказанным кодом мы убрали с формы входа в wordpress следующие блоки:

login h1
login #nav
login #backtoblog

А для тега “login form“, мы добавили отступ сверху с помощью тега – “padding-top” и задали фоновое изображение тегом – “background-image” (указали url до картинки).

Фоновая картинка размером – 312*240 px.

2. Переносим созданный нами файл стилей для формы входа (styles-login.css) на сервер сайта.

Для этого можно воспользоваться бесплатным FTP загрузчиком – FileZilla.

Можно перебросить файл styles-login.css в корневую папку или в любую другую.

Однако, если вы хотите редактировать его из админки wordpress, то лучше всего перебросить его в папку текущей темы вашего сайта, тогда перейдя в админке в пункт “Внешний вид” – “Редактор” – справа в списке шаблонов вы увидите файл – styles-login.css, зайдя в который вы сможете редактировать его код.

Например, если у вас текущая тема – Twenty Twelve, то путь до данной папки на вашем сайте будет следующий – …/wp-content/themes/twentytwelve/

3. Теперь задаем wordpress читать файл стилей для формы входа с созданного нами файла –  styles-login.css.

Для этого в панели управления wordpress заходим в пункт “Внешний вид”, его подпункт “Редактор”, а справа в списке шаблонов выбираем файл – functions.php

Спускаемся в самый низ кода данного файла и вставляем следующий фрагмент:

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="http://mnogoblogun.hostenko.com/wp-content/themes/twentytwelve/login-styles.css" />';
}

add_action('login_head', 'custom_login_css');

Здесь я указал путь до файла стилей для формы входа (login-styles.css) –  http://mnogoblogun.hostenko.com/wp-content/themes/twentytwelve/login-styles.css

Если вы закачали файл login-styles.css в корневую папку на своем сайте, то путь будет – http://ваш сайт.ru/login-styles.css

 
Теперь все готово!

PS: Фоновую картинку можно добавить следующим кодом:

body.login {
background: #C0DEED url(https://mnogoblog.ru/wp-content/uploads/2013/05/bg.png) no-repeat center top fixed;
}

Также можно закруглить углы формы входа и сделать рамку с помощью атрибута “border”:

#login form {
padding-top: 50px;
background-image: url("https://mnogoblog.ru/wp-content/uploads/2013/06/login2.gif");
border: 3px solid #bdd77f;
border-radius: 30px;
}

PS ответ на вопрос Дмитрия: Дима, за удаление двух ссылок “Забыли пароль/Регистрация и назад к сайту”:

отвечают теги:

.login #nav,
.login #backtoblog

Для их удаления – вам нужно создать новый файл стилей, например с названием custom-login.css и перебросить его через ftp на свой сайт (бесплатная программа filezilla), если у вас нету доступа к ftp, то эту проблему можно решить с помощью моей статьи – Как создать новый файл темы wordpress (без ftp доступа)

Далее подключаем в файле functions.php наш файл стилей для формы входа:

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login.css" />';
}
add_action('login_head', 'custom_login');

Данный код более совершенен, нежели вышеуказанный в данной статье, так как в нем не нужно указывать путь до вашей темы.

После чего переходим к нашему файлу custom-login.css и вставляем в него следующий код:

#nav a{
display:none;
}

#backtoblog{
display:none;
}

или так:

.login #nav,
.login #backtoblog {
    display: none;
    }