WordPress Fix: Меняем оформление формы логина

Have a question? Ask in chat with AI!

wordpress логоЕсли добавить ваш логотип или баннер на форму логина вашего сайта на WordPress это даст возможность еще раз показать вашим посетителям и клиентам ваш бренд. Есть вариант смены логотипа с помощью специального плагина. Но сегодня мы затронем тему полной кастомизации логин формы.

Любой сайт на WordPress имеет стандартную логин форму, которая многим уже успела надоесть.
форма логина wordpress
Этот пост будет полезен в первую очередь тем, кто хочет полностью изменить логин форму WordPress. Кстати, о том как сменить URL формы логина я писал в статье Fix WP: смена URL для страницы логина. Для достижения нужного результата мы первым делом немного поправим файл functions.php, который есть почти в каждой теме для WordPress. Если такого файла нет, то просто создайте новый в корневой папке вашей темы и назовите его functions.php.

Шаг 1

Добавьте следующий код в файл functions.php вашей темы:

function custom_login() {
 echo '';
}
add_action('login_head', 'custom_login');

Шаг 2

Создайте папку с названием custom-login в папке вашей темы.

Шаг 3

Создайте файл custom-login.css внутри папки custom-login. Вставьте в него следующий код:

html {background-image: url('../images/bg.png')!important;background-attachment: fixed;}
body{border:none;padding-top:0;}
body, #wpbody, .form-table .pre {color:#333333;}
body.login {border-bottom-color:#464646;border-top-color:#464646;}
h1 a{background:url("../images/wp-logo.png") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:356px;margin: 0 auto}
#login {margin:10% auto;width:350px;height:50%;}
form{background:none repeat scroll 0 0 #E5E5E5!important;}
label{font: normal 16px/20px tahoma;color: #406D8C;}
input.button-primary, button.button-primary, a.button-primary {border-color: #406D8C;font: bold 16px/20px tahoma;color: #fff;background: #406D8C url(../images/button-grad.png) repeat-x scroll left top;text-shadow:none;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 51px;border-radius: 5px;}
input.button-primary:hover, button.button-primary:hover, a.button-primary:hover, a.button-primary:focus, a.button-primary:active {border-color: #13455B;color: #fff;}
#nav, #backtoblog{text-align:center;margin:0;text-shadow:none;}
.login #nav a, .login #backtoblog a {color: #406D8C !important;font-family:tahoma;}
.login #nav a:hover, .login #backtoblog a:hover {color: #13455B!important;}

Заменить стандартный логотип можно используя вот такую CSS конструкцию:

h1 a{background:url("../images/wp-logo.png") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:356px;margin: 0 auto}

После того как вы повторите эти три простых шага вы получите вот такой вот результат:
форма логина
Стоит иметь ввиду еще один момент: cтандартная логин форма имеет в себе логотип WordPress, который ведет на http://wordpress.org/ и стандартный title «powered by wordpress». Но мы сможем изменить и это 😉
Для того чтобы изменить URL нам понадобиться воспользоваться еще одним WP хуком — вставьте данный код в файл functions.php:

function change_wp_login_url() {
echo bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');

Для смены title ссылки логотипа используем вот такой код:

function change_wp_login_title() {
echo 'Перейти на сайт ' . get_option('blogname');
}
add_filter('login_headertitle', 'change_wp_login_title');

А вот вам бонус: мы можем поменять надпись в футере административной панели, тем самым придав еще большей персонализированности нашему сайту. Вот вам хук:

function remove_footer_admin () {
echo 'Все права защищены | RusDigi.org © 2011';
}
add_filter('admin_footer_text', 'remove_footer_admin');

Выглядеть это будет вот так:
подвал админки
Посмотреть как выглядит моя логин форма можно по ссылке
Ну и для разгона вашей фантазии рекомендую ознакомиться вот с этой подборкой
20 полезных шаблонов для формы логина


11 комментариев для “0

  1. Единственный минус, когда обновляешь вордпресс — все слетает((
    Как-то давно менял, но все слетело, было обидно(

  2. Есть предложение. При помощи плагина. Как получилось можно увидеть здесь:vdar.tk/wp-login.php
    Плагин можно найти здесь:wordpress.org/extend/plugins/stealth-login/

    1. неплохой вариант, только вот у вас цвета уж слишком режут глаз)

    1. либо сделать картинку больше, либо сделать однотипный фон как у меня и repeat’ом залить фон

      1. да картинка большая. тут дело в какой-то строчке кода, которую нужно удалить…
        кто знает?

  3. вопрос, а как сделать форму входа примерно как тут ? чтобы шла с темой вместе?

Добавить комментарий для Котляков Илья Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись В Google Maps появилась погода
Следующая запись Готовые приемы по работе со свойством border в CSS