Если добавить ваш логотип или баннер на форму логина вашего сайта на 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 полезных шаблонов для формы логина
Единственный минус, когда обновляешь вордпресс — все слетает((
Как-то давно менял, но все слетело, было обидно(
+1!
есть предложения как это исправить?)
бэкапить как вариант)
Не… «Не облачно»…)
Есть предложение. При помощи плагина. Как получилось можно увидеть здесь:vdar.tk/wp-login.php
Плагин можно найти здесь:wordpress.org/extend/plugins/stealth-login/
неплохой вариант, только вот у вас цвета уж слишком режут глаз)
Вопрос: А как растянуть фон бекграунда?
либо сделать картинку больше, либо сделать однотипный фон как у меня и repeat’ом залить фон
да картинка большая. тут дело в какой-то строчке кода, которую нужно удалить…
кто знает?
вопрос, а как сделать форму входа примерно как тут ? чтобы шла с темой вместе?
этот сайт на ворд прессе сделан если что)