Как изменить лого на странице авторизации WordPress без плагинов?

Привет!

Частенько бывает, что хочется изменить стандартную страничку авторизации WordPress (wp-login.php) и в том числе, изменить логотип WordPress на лого вашего сайта или компании. Конечно, существуют разные плагины для того, чтобы сделать это легко, или данная функция может быть встроена настройки вашей темы, но все это добавляет лишние запросы к базе данных (через get_option).

Поэтому предлагаю вам код, который меняет лого на любое желаемое:

function gb_custom_login_logo() {
    echo PHP_EOL . '<style type="text/css">
      #login h1 a {
       background-image:url(/wp-content/uploads/new_logo.gif) !important;
       width: 100px;
       height: 120px;
       -webkit-background-size: 100px 120px;
       background-size: 100px 120px;
      }
     </style>' . PHP_EOL;
}
add_action('login_head', 'gb_custom_login_logo');

Вам нужно загрузить ваше новое изображение в Медиафайлы, если оно еще не загружено, или скопировать ссылку на него, и заменить в коде выше "/wp-content/uploads/new_logo.gif" на вашу ссылку.

Также в этом коде не забудьте изменить 100 на ширину вашего лого и 120 на высоту вашего лого, чтобы оно не сжалось в квадрат 🙂

Затем нужно скопировать получившийся код, зайти в Админ-панель > Внешний вид > Редактор > найти справа в списке пункт functions.php (Функции темы), открыть его и аккуратно (в конец, перед символами "?>", если есть) вставить туда скопированный код.

Вот, что у вас может получиться в итоге 🙂

как изменить wp-login лого wordpress

Обновление 14.04.2015

Как поменять ссылку под лого на странице входа в админку WordPress?

/* 
 Заменить ссылку под лого на странице входа в админку 
*/
function gb_custom_loginlogo_url( $url ) 
{ 
 return 'http://twog.me/'; 
} 
add_filter( 'login_headerurl', 'gb_custom_loginlogo_url' ); 

Как поменять аттрибут title у лого на странице входа в админ-панель WordPress?

/*
 Заменить title лого на странице входа в админку 
*/
function gb_custom_loginlogo_title( $url ) { 
 return 'Ваш текст для замены'; 
} 
add_filter( 'login_headertitle', 'gb_custom_loginlogo_title' );

Как скрыть ссылку "Назад к сайту ..." на странице входа в админку WordPress?

/*
 Убрать ссылку "Назад к сайту"
*/
function gb_hide_backtoblog() {
    echo '<style type="text/css">#login #backtoblog { display: none !important; }</style>';
}
add_action('login_head', 'gb_hide_backtoblog');

Как скрыть ссылку "Забыли пароль?" на странице входа в админку WordPress?

/*
 Убрать ссылку "Назад к сайту"
*/
function gb_hide_forgotpass() {
    echo '<style type="text/css">#login #nav { display: none !important; }</style>';
}
add_action('login_head', 'gb_hide_forgotpass');

Все указанные в статье правки в сжатом виде

/*
 Скрыть "Назад к сайту"
 Скрыть "Забыли пароль?"
 Изменить изображение и размер лого над формой
*/
function gb_admin_login_styles() {
    echo PHP_EOL.'<style type="text/css">
#login h1 a {
 background-image:url(/wp-content/uploads/new_logo.gif) !important;
 width: 100px;
 height: 120px;
 -webkit-background-size: 100px 120px;
 background-size: 100px 120px;
}
#login #backtoblog { display: none !important; }
#login #nav { display: none !important; }
</style>' . PHP_EOL;
}
add_action('login_head', 'gb_admin_login_styles');

/*
 Заменить title лого на странице входа в админку 
*/
function gb_custom_loginlogo_title( $url ) { 
 return 'Ваш текст для замены'; 
} 
add_filter( 'login_headertitle', 'gb_custom_loginlogo_title' );

/* 
 Заменить ссылку под лого на странице входа в админку 
*/
function gb_custom_loginlogo_url( $url ) 
{ 
 return 'http://twog.me/'; 
} 
add_filter( 'login_headerurl', 'gb_custom_loginlogo_url' ); 

Пишите в комментариях ниже, если вдруг что-то не получается. Я попробую вам помочь.

Успехов вам в изучении WordPress!

Богдан Григорук

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

24 комментария к “Как изменить лого на странице авторизации WordPress без плагинов?”

  1. Алексей 20.08.2013 в 18:56 #

    Спасибо, но до чего достал эти быдлоязыки. На этом гумне jQ то все работает, а то чихнул - и в каком-то из браузеров - хрень. Мистика. Я иду гулять, прихожу -работает.

    А ООП - гумно полное, после прикладных языков.

    • Богдан 23.08.2013 в 21:16 #

      Привет Алексей. Спасибо за отзыв. Мне интересно почему же ты ругаешься на jQuery, если в данном решении эта библиотека даже не используется ? 🙂

  2. vovka 23.10.2013 в 22:22 #

    Добрый вечер. Картинку подменить получилось, но остался косяк один - ссылка по картинке всё равно ведет на офсайт wordpress'а и при наведении на картинку видно "Сайт работает на WordPress". Как заменить на своё? Заранее благодарен)

    • Богдан 26.10.2013 в 17:34 #

      Привет. Решение твоего вопроса есть и довольно простое 🙂 Спасибо разработчикам WP.

      Нужно вставить этот код в файл functions.php (Функции темы)
      и заменить twog.me на свой адрес:

       
       
      /* 
       Заменить ссылку под лого на странице входа в админку 
      */ 
       
      function gb_custom_loginlogo_url( $url ) 
      { 
       return 'http://twog.me/'; 
      } 
      add_filter( 'login_headerurl', 'gb_custom_loginlogo_url' ); 
       
      

      Успехов!

    • Макс 26.05.2014 в 09:32 #

      Спасибо большое Богдану, очень помог.
      А вот как изменить title не показал.

      /*
       Заменить title лого на странице входа в админку 
      */
      
      function gb_custom_loginlogo_title( $url ) { 
       return 'Ваш текст для замены'; 
      } 
      add_filter( 'login_headertitle', 'gb_custom_loginlogo_title' );
      
  3. Вячеслав 26.11.2013 в 22:15 #

    Богдан, оригинальное решение замены картинки. Но так и не понятно, зачем писать еще одну функцию ?
    Что мешает вам заменить картинку
    /wp-admin/images/wordpress-logo.png
    на свою картинку?

    • Богдан 30.11.2013 в 09:56 #

      Здравствуйте, Вячеслав. Спасибо вам за вопрос.

      Дело в том, что при очередном обновлении WordPress ваша картинка вернется в прежнее состояние. Также бывают случаи, когда вы хотите установить картинку другого размера, отличного от размера стандартной картинки, то как раз этот способ вам понадобиться 🙂

  4. Юра 25.01.2014 в 18:48 #

    Здравствуйте!

    Скажите, пожалуйста, как убрать со страницы входа ссылку "Назад к сайту....", та что находится под формой входа.
    В файле wp-login.php эта ссылка находится между тегами .
    Вариант просто удалить этот кусок кода работает, но не подходит, так как естественно при обновлении ВП, ссылка вернется обратно.

    Благодарю за ответ и помощь! 😉

    • Богдан 30.01.2014 в 06:20 #

      Привет!

      Использовав код, который указан в этой статье, и немного изменив его, можно добиться того, чего вы хотите, скрыть ссылку "Назад к сайту ...".

      У этой ссылки есть id="backtoblog", и его как раз используем. Получится вот такой код:

      function gb_hide_backtoblog() {
          echo '<style type="text/css">#login #backtoblog { display: none !important; }</style>';
      }
      add_action('login_head', 'gb_hide_backtoblog');
      

      P.S. Но если вы используете и то решение (изменить лого), которое описано в статье, и также вот это, то вам нужно для эффективности объединить стили в этих сниппетах в один блок. Примерно, так:

      function gb_custom_login_css() {
       echo '<style type="text/css">
        #login #backtoblog { display: none !important; }
        #login h1 a { background-image:url(/wp-content/uploads/new_logo.gif) !important; }
       </style>';
      }
      add_action('login_head', 'gb_custom_login_css');
      
  5. Олег 19.05.2014 в 17:30 #

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

    • Богдан 20.05.2014 в 12:56 #

      Здравствуйте, Олег. Спасибо за замечание, совсем забыл про этот момент.

      Для того, чтобы ваше собственное новое лого также имело измененную ширину и высоту, используйте следующий код, вместо того, который указан в статье.

      Вместо цифры 100, укажите ширину вашего лого, а вместо цифры 120 - высоту вашего лого. Буквы "px" оставьте как есть.

      function gb_custom_login_logo() {
          echo PHP_EOL . '<style type="text/css">
            #login h1 a {
             background-image:url(/wp-content/uploads/new_logo.gif) !important;
             width: 100px;
             height: 120px;
             -webkit-background-size: 100px 120px;
             background-size: 100px 120px;
            }
           </style>' . PHP_EOL;
      }
      add_action('login_head', 'gb_custom_login_logo');
      
      • Alexey 20.09.2014 в 20:10 #

        Добрый день а как изменить ссылку в логотипе (работает от wordpress) на свою?

        • Богдан 25.09.2014 в 11:38 #

          Добрый день, Алексей.

          Используйте для этого следующий код:

          function custom_loginlogo_url( $url ) {
              return 'http://twog.me';
          }
          add_filter( 'login_headerurl', 'custom_loginlogo_url' );
          

          Его также нужно вставить в functions.php в вашей теме.

  6. Дмитрий Игоревич 28.05.2014 в 15:46 #

    Спасибо! Сменил форму входа полностью... Скрыл все следы консоли)))

  7. Paul 28.09.2014 в 14:50 #

    Zachet! Davno iskal reshenie 😉 Ot dushi blagodaryu!

  8. zzzt 07.04.2015 в 22:52 #

    Отличная статья, попал на нее из запроса в гугле. Думаю есть смысл дополнить ее примерами из комментариев. Они не менее полезны самого содержания)
    Подскажите, как убрать еще и ссылку "Забыли пароль?"?
    Спасибо -)

    • Богдан 14.04.2015 в 11:16 #

      Спасибо за отзыв 🙂 Дополню основной текст статьи, как вы и сказали.

      Ссылку "Забыли пароль?" можно убрать с помощью следующего кода:

      function gb_custom_login_css_hide_forget() {
       echo '<style type="text/css">
        #login #nav { display: none !important; }
       </style>';
      }
      add_action('login_head', 'gb_custom_login_css_hide_forget');
      

      Основная строка в этом коде, это строка:

      #login #nav { display: none !important; }
      

      Чтобы не иметь много однообразных функций, которые привязаны к одному хуку, можно их объединять в одну функцию.

      Пример наверное допишу в тексте статьи.

  9. Татьяна 12.04.2015 в 11:46 #

    Добрый день. Попыталась сделать как у Вас написано, но ничего не получается. Логотип Волдпресс на месте. Прописывала свой путь, но без результатно. Заменила файл wordpress-logo.png - тот же результатж. Может подскажитеЮ, что не так делаю.

  10. Павел 07.08.2015 в 21:33 #

    Доброго времени суток! Заменил лого согласно вашей инструкции, но оно стоит не по центру страницы. То есть при размере 450х70 пикселей правая сторона лого выезжает далеко за форму ввода логина/пароля, а левая остается на одном уровне с началом формы. Как отцентрировать лого? Спасибо.

    • Алексей 12.11.2015 в 15:50 #

      Вот точно такая же фигня. Подскажите как исправить.

  11. dimmka 03.09.2015 в 22:36 #

    здравствуйте! спасибо за статью.
    а как не скрыть, а заменить надпись внизу "назад к сайту WordPress"?
    и как изменить фон страницы, чтобы поставить свое фоновое изображение?

  12. Елена 06.06.2016 в 04:58 #

    Здравствуйте! Как изменить: "Зарегистрироваться на этом сайте"?

  13. Daria 12.11.2016 в 00:48 #

    здравствуйте!
    подскажите пожалуйста по поводу плагина Login Logo, при его установки мне выбило сообщение : Drop a PNG file named login-logo.png into your wp-content directory. This simple plugin takes care of the rest, with zero configuration. Transparent backgrounds work best. Crop it tight, with a width of 312 pixels, for best results.

    что это за файлы и где их искат и куда вводить.
    Спасибо за ранее за ответ!!

  14. Анна 21.02.2017 в 12:47 #

    Поклон! Спасибо очень помогли!