Как изменить страницу входа в консоль WordPress

Віталий

10 років ago

Доброго времени суток!
Сегодня речь пойдет о странице входа в админ панель. Адрес ее такой http:/Ваш сайт/wp-login.php. Некоторые пользователи не обращают внимания на нее и она им не мешает, но многим хочется видеть уникальный дизайн. Для них и будет интересная данная статья.
В моем примере изменения страницы входа в панель управления WordPress, будет изменен задний фон, сама форма, ее поля ввода, кнопка и шрифт.

1. Первым этапом будет указать нашей WordPress путь к новым стилям.

Можно создать новый файл стилей, указав к нему путь или дописать в основной файл style.css, тоже указав путь. Для этого открываем functions.php и вставляем в него следующий код:

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/';
}

Выполнив все пункты и по нужде изменив их под себя, можно добиться нужных Вам результатов. Теперь ваша страница входа имеет свою индивидуальность и красоту.
На этом все. Спасибо за внимание 🙂

Exit mobile version