Блог

Изменяем страничку входа на сайт WordPress

Сразу покажу что хотелось сделать и поменять на своем блоге, перейдите по ссылке http://webastudio.com/wp-login.php. Как видите немножко изменилась форма входа на сайт, можно было вообще все поменять но мне хватило этого. И так сейчас расскажу как все это делалось и какие файлы нужно изменять. Все изменения будут происходить при изменении файла css который привязан к форме входа. Для начала нам нужно создать свой файл css, так будет проще и понятнее, нам не нужно будет копаться в стандартном файле css и искать нужные поля. И так для этого заходим в свой шаблон, ищем там файл function.php, открываем его на редактирование и в конце вставляем вот такой код

[php]
function custom_login_css() {
echo ‘<link rel="stylesheet" type="text/css" href="’.get_stylesheet_directory_uri().’/login/login-styles.css" />’;
}
add_action(‘login_head’, ‘custom_login_css’);
[/php]

Теперь переходим в корень нашего шаблона site.com/wp-content/themes/Ваша тема и создаем здесь папку “login” а в ней файл login-style.css. В этом файл css и будет главным для нашей формы входа и регистрации. Для примера чтобы изменить фон нужно вставить вот такой код.

[css]
body.login{
background: url(/wp-content/themes/rbox/images/l_bg.jpg) no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
};
[/css]

В моем случае было изменено высоту и убрана тень вокруг формы входа, вот код.

[css]
.login form{
height:260px;
-webkit-box-shadow: rgba(255,255,255,0) 0 0 0, inset rgba(255,255,255,0) 0 0 0;
-moz-box-shadow: rgba(255,255,255,0) 0 0 0, inset rgba(255,255,255,0) 0 0 0;
box-shadow: rgba(255,255,255,0) 0 0 0, inset rgba(255,255,255,0) 0 0 0;
}
[/css]

Ну и изменена кнопка входа.

[css]
.login input.button-primary {
float:left;
width: 262px;
}
[/css]

В стандартной форме есть ссылки на регистрацию и назад на сайт, их я убрал изменив файл wp-login.php, он расположен в корне самой админки. Вот и все мои изменения на счет формы входа, но вы можете изменять ее как сами захотите изменяя класс .login в файле css.

  • Вадим Волос

    Здравствуйте! У меня вопрос по поводу кода пхп, собственно дизайн работает, но при наведении на лого там ссылка на (ru.wordpress) как убрать эту ссылку чтоб ее не было? А также при наведении на лого появляется текст “Сайт работает на WordPress”, аналогичный вопрос как заменить этот текст или как убрать?

    • Александр Андрейчук

      Привет, проблема актульна еще? )

Спасибо, сообщение отправлено.