Доброго времени суток. В данной статье мы рассмотрим, как изменить страницу авторизации WordPress. Или другими словами, как изменить вход в WordPress. Да страница авторизации по умолчанию сделана хорошо, она адаптивна. Но при создании сайта на WordPress иногда требуется, чтобы при входе в админку пользователь видел логотип. Ну, что приступим.

Сейчас вид нашей страницы авторизации:

Мы хотим:

• Поменять логотип.
• При клике на логотипе нас перекидывало на сайт разработчика.
• Стилизация страницы входа WordPress.

Все это мы будем менять в одной из тем WordPress. Например, в дефолтной теме «Twenty Seventeen».

Изменение логотипа

Открываем файл functions.php, который находится в корне темы.

И в конец добавляем следующий  код:

function login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo get_template_directory_uri().'/assets/images/wp_fav.png'; ?> );
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );
?>

Не забываем в папку assets/images добавить файл с логотипом (в моем случае wp_fav.png)

Проверяем.

Отлично. Мы с вами поменяли логотип на вход в админку WordPress.

Изменяем ссылку логотипа

Следующим шагом давайте изменим ссылку логотипа. В моем случае при клике по логотипу мы переходили на мой блог https://web-programming.com.ua

Для этого в файл functions.php добавим следующий код.

function login_logo_url() {
    return 'https://web-programming.com.ua';
}

add_filter('login_headerurl', 'login_logo_url');

Проверяем.

Отлично. Теперь переходим к стилизации самого окна входа на сайт под управлением WordPress

Стилизация страницы входа WordPress

Давайте, например, кнопку «Войти» сделаем красной. Для этого изменим функцию login_logo, которую мы создали при изменении логотипа:

function login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo get_template_directory_uri().'/assets/images/wp_fav.png'; ?> );
        }
        #loginform .button {
            background-color: red;
        }
    </style>
<?php }

Проверяем.

Ну вот и все. По аналогии вы можете поменять стиль ссылок и инпутов. Таким образом полностью изменить страницу авторизации.

И еще одно замечание. Данные изменения для страницы авторизации WordPress работают только тогда, когда активна тема «Twenty Seventeen». Что очень удобно.

Мы с вами изменили логотип для страницы входа WordPress, также изменили ссылку логотипа и кастомизировали страницу входа.

Ну и в дополнении видео к данной статье:

И не забываем подписаться: ВКонтакте, Facebook, Twitter, а можете подписаться на канал на YouTube