function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri('template_directory').'/style.css" />';
}
add_action('login_head', 'custom_login_css');
2. Меняем задний фон.
Для изменения фона нужно дописать стили в тот файл, который вы указали в пункте №1.
body.login {
background: #fbfbfb url('bg.jpg') no-repeat fixed center;
}
Старые стили, которые находятся в /wp-admin/css/login.css, заменятся новыми стилями. Можете посмотреть на стили данного файла, чтобы получить лучшее представление о вносимых изменениях. Также можно использовать firebug для выявления нужных стилей.
3.Заменяем логотип WordPress своим логотипом.
Опять же просто дописать стили в нужный файл.
#login h1 a {
background-image: url('logo.png');
background-size: 300px 60px;
width: 300px;
height: 60px;
}
В коде видно, что мы меняем путь к своему изображению и задаем размер нашего лого.
4.Изменяем внешний вид самой формы входа.
Вставляем следующий код в файл стилей, меняем и настраиваем под себя.
#login form {
margin-left: auto;
margin-right: auto;
padding: 30px;
background: #339900;
-moz-box-shadow: 0 10px 10px rgba(0,0,0, 0.3);
-webkit-box-shadow: 0 10px 10px rgba(0,0,0, 0.3);
box-shadow: 0 10px 10px rgba(0,0,0, 0.3);
overflow: hidden;
}
5.Изменяем поля ввода.
Вставляем следующий код в файл стилей, меняем и настраиваем под себя.
#login form .input,
#login input[type="text"]{
width: 240px;
height: 40px;
display: block;
background: #f0f0f0;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #777;
}
#login form input:focus,
#login form textarea:focus {
overflow: hidden;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
5.Изменяем чекбокс и метки .
В зависимости от цветов, которые вы выбрали для своей формы, вам, возможно, понадобится настроить метки для полей и настроить чекбокс «Запомнить меня».
#login label {
color: #333;
line-height: 26px;
}
#login form .input,
#login input[type="text"] { color: #8c8a8 }
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}
6.Изменяем вид кнопки.
Вставляем следующий код в файл стилей, меняем и настраиваем под себя.
#login .button-primary {
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background: #339900;
border-radius: none;
-moz-border-radius: none;
-webkit-border-radius: none;
-khtml-border-radius: none;
}
#login .button-primary:hover,
#login .button-primary:focus {
background: #333;
border: none;
}
7.Изменяем шрифты, используя Google Fonts.
Возможно Вам понадобится изменить шрифты, чтобы они были одинаковы с Вашим сайтом, тогда это не проблема. Вам нужно как и в первом пункте дописать в файл
functions.php следующий код:
function custom_fonts() {
echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css" />';
}
add_action('login_head', 'custom_fonts');
8.Изменяем ссылки под формой так и сообщение при выходе из аккаунта:.
Вставляем следующий код в файл стилей, меняем и настраиваем под себя.
.login #nav a,
.login #backtoblog a {
font-family: 'Open Sans Condensed', sans-serif;
color: #777 !important;
font-size: 17px;
}
#login #nav a:hover, .login #backtoblog a:hover {
color: #339900 !important;
}
div.updated,
.login .message {
background-color: lightYellow;
border-color: #E6DB55;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px;
font-weight: 700;
}
9. Привязываем к логотипу произвольную ссылку
Вам нужно как и в первом пункте дописать в файл
functions.php следующий код:
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
return 'http://Ваш домен.net/';
}
Выполнив все пункты и по нужде изменив их под себя, можно добиться нужных Вам результатов. Теперь ваша страница входа имеет свою индивидуальность и красоту.
На этом все. Спасибо за внимание 🙂
