Как изменить страницу авторизации WordPress

Ромчик
2

Кастомизация страницы авторизации WordPressДоброго времени суток. В данной статье мы рассмотрим, как изменить страницу авторизации WordPress. Или другими словами, как изменить вход в 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

Отлично. Мы с вами поменяли логотип на вход в админку 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

Стилизация страницы входа 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

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

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

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

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

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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Яша Прицкер - 29.10.2017 в 14:14

    Слушайте, а простая замена картинки в папке движка не получится ?
    Зачем столко манипуляций ? Вот только картинки эти в новом движке найти не могу…

    • Ромчик - 30.10.2017 в 14:21

      Можно, но не совсем правильно.

  • ©2012-2018 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика