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

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

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

Стандартный внешний вид админки Вордпресс
Стандартный внешний вид страницы авторизации WP

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

Уникализация страницы авторизации WP
Уникализированный внешний вид страницы авторизации WP

Делается такое очень просто, без использования плагинов, без регистрации и 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 стили в соответствующее место в последнем фрагменте кода.

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

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (11 голоса, рейтинг: 4,73 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

6 комментарий

  1. Михаил says:

    Здравствуйте. Помогите решить проблему. Я изменил страницу входа как мне хотелось и она работает. Только постоянно вылезает вторая форма входа которая заданна темой. Как можно убрать эту вторую форму? Не могу найти где она живёт ;0)))

    1. Вячеслав Скоблей says:

      Не понятно что вы хотите скрыть? Может попробовать:

      element.style {
          display: none;
      }
      1. Михаил says:

        Простите, был не точен. У меня стоит тема "Newspaper" и у неё есть своя (отдельная от WP) страница вход/регистрация. Эта страница появляется как всплывающие окно и перекрывает главную страницу входа. Вот её я и пытаюсь убрать. Только никак немогу найти откуда она растёт.

  2. alek says:

    Даже спустя время всё фурычит. На одном сайте понадобился форум, а там регистрация и вход стандартные wordpressовские, а не свои. А WP-Recall устанавливать не хотел, так как не особо люблю данный плагин. Поэтому решил обойтись стандартными средствами и просто визуально страницу входа изменить. Спасибо.

  3. Давид says:

    Спасибо) все получилось

  4. says:

    Вот это ты запарился)) я дальше 404 ничего не стилизовал

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *