Изменить дизайн страницы авторизации WordPress

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

Так страница авторизации в WP выглядит по умолчанию:

В ней не так смущает лаконичность, как наличие ссылки на сайт https://ru.wordpress.org c тайтлом "Сайт работает на WordPress". Как брендировать эту страницу под себя, чтобы получить например, такую страницу входа на сайт:

Делается такое очень просто, без использования плагинов, без регистрации и SMS :)

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

Поскольку страница регистрации/авторизации/сброса пароля WordPress формируется из ядра самого WP (например, путь логотипа на странице входа -  /wp-admin/images/wordpress-logo.svg) ее можно уникализировать лишь с помощью плагинов или хуков, ведь если сделать правки непосредственно в коде ядра, то они все перезатрутся во время очередного обновления WP. Не будете же Вы каждый раз по новой уникализировать страницу входа?

Свой урл по клику на логотип

Стандартный урл на логотипе "https://ru.wordpress.org". Чтобы его изменить, открываем файл functions.php текущей темы и добавляем такой код:

function alter_login_headerurl() {
return 'https://moy.site'; //Если оставить поле пустым, то ссылка будет вести на саму себя, то есть на текущую страницу.
}
add_action('login_headerurl','alter_login_headerurl');

Свой title на картинке логотипа

В тот же файл functions.php текущей темы добавляем:

function alter_login_headertitle() {
return 'Не входи без надобности!'; //здесь изменяем на свой title
}
add_action('login_headertitle','alter_login_headertitle');

Свой логотип на странице входа и цвет фона

Подготовьте свой логотип, рекомендуется картинка png с прозрачным фоном и размерами 72х72 пиксели, назовите его mylogo.png и загрузите его в папку images в вашей текущей теме (если нет папки, создайте). В functions.php текущей темы добавляем:

function my_login_logo() { ?>
<style type="text/css">
.login form, .login #login_error, .login .message, .login .success {
border-radius: 15px;
}
body.login div#login h1 a {
background-image: url(<?php echo get_bloginfo('template_directory'); ?>/images/mylogo.png) !important;
background-size: auto;
width: auto;}
body {
background: #124964 !important;
}
.login #backtoblog a, .login #nav a {
padding: 2px;
border-radius: 5px;
background-color: snow;
}</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Если Вам необходим весь функционал в сборе, добавляем в свой functions.php в текущей теме все 3 кода. В результате у Вас получится уникализированная страница входа WordPress как на втором скрине в этой статье. При знании и умении править CSS, вы можете самостоятельно добавить свои CSS стили в соответствующее место в последнем фрагменте кода.

Уникализируйтесь, это делает Вас не такими как все!