Изменяем внешний вид формы входа в WordPress

Вордпресс имеет хорошо оптимизированную форму входа, которая одинаково хорошо смотрится на экранах с разным разрешением. Однако, не всех устроит логотип WordPress при регистрации или входе в админ-панель сайта, тем более если у владельца есть свой бренд и он хочет чтоб каждый зарегистрированный пользователь при входе на сайт видел форму с логотипом соответствующим его бренду, а не создателю этой замечательной CMS.

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

1. И так, создадим плагин, который будет изменять логотип:
В папке плагинов (/wp-content/plugins) создадим папку нашего плагина и назовем ее my-login-form-style. Затем скопируем в нее файл нашего логотипа, который, к примеру, будет называться logotype.png Теперь, создаем сам файл плагина, который будет называться, скажем: form-style-plugin.php и открываем его для редактирования.

В начале файла добавим информацию о нашем плагине:
<?php
/*
Plugin Name: Стиллизируем форму входа
Description: Плагин для изменения внешнего вида формы входа
Version: 1.0
Author: wpTutsPlus

*/
?>
Далее, создадим функцию и укажем откуда брать картинку:
// Код нашего плагина
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url(  );
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>

На данном этапе, наш плагин, после его активации заменит стандартный логотип формы входа на ваш.

2. Теперь изменим внешний вид ссылок и кнопок у формы, слегка поправив наш код.

<?php // Код нашего плагина
function wptutsplus_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url(  );
            background-size: 300px auto;
            height: 70px;
        }
        /* Внешний вид ссылок */
        .login #nav a, .login #backtoblog a {
            color: #27adab !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #d228bc !important;
        }
       /* Внешний вид кнопок */
        .login .button-primary {
            background: #27adab; /* Old browsers */
            background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
            background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
        }
        .login .button-primary:hover {
            background: #85aaaa; /* Old browsers */
            background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
            background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?>
На этом все. Подводя итог, хочу заметить, что изменение стандартной формы входа на свою (даже простой сменой логотипа) оставляет приятные ощущения у пользователей, а в случае если вы делаете коммерческий сайт, то замена стандартного логотипа формы на свой, просто, необходим.
Разработка сайтов на WordPress Блог WordPress плагины и хаки Изменяем внешний вид формы входа в WordPress