Создаем красивую форму входа в админку wordpress

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

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

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

красивая форма входа в админку wordpress

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

Приступим:

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

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

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

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

#login h1 {
display: none;
}

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

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

display: none;

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

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

меняем стандартную форму входа в админку wordpress

На скриншоте выше я указал — какие теги за что отвечают, то есть вышеуказанным кодом мы убрали с формы входа в 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(http://mnogoblog.ru/wp-content/uploads/2013/05/bg.png) no-repeat center top fixed;
}

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

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

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

как удалить ссылки на странице входа в админку wordpress

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

.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;
    }

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем красивую форму входа в админку wordpress: 4 комментария

  1. Дима

    Добрый день! Статья понравилась, спасибо! Только… я ничерта не понял-)) Мне нужно просто убрать две ссылки на форме входа на сайт. Регистрацию, и назад на сайт. Как вы это сделали скажите?

Добавить комментарий