WordPress, Создание сайтов

Как изменить логотип в админ панели WordPress, изменить его описание и ссылку

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

Как изменить логотип в админ панели WordPress


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

стандартный логотип

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

новый логотип

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

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

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

Для этого нужно сначала узнать, какой цвет у фона на странице входа в панель управления сайтом.
Сделать это можно с помощью окна, которое называется «Инструменты разработчика» или «Инспектор стилей». Самый быстрый способ открыть это окно, это воспользоваться горячими клавишами: Ctrl+Shift+C или Ctrl+Shift+I.

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

В разных браузерах этот пункт меню может называться по разному, например, «Посмотреть код», «Посмотреть код элемента» или «Исследовать элемент».

цвет фона админ-панели

В панели разработчика должен открыться элемент body, который нам и нужен. А его свойство background укажет нам цвет фона на этой странице. В нашем случае, это цвет #f1f1f1, его и нужно будет указать в качестве цвета для фона вашего изображения в формате JPEG.

После того, как вы создадите свой логотип, загрузите его на сервер вашего сайта. В каком каталоге его сохранить, решайте сами, для этого примера я сохранил изображение в каталоге images, который находится в корневом каталоге темы.

После того, как изображение создано и загружено на хостинг, можно установить его в качество основного. Для этого нужно добавить несколько строк кода в файл function.php, который находится в каталоге вашей активной темы.
Но прежде чем заняться редактированием файлов, нужно сначала узнать, какой класс или идентификатор отвечает за вывод изображения и его размеры.

посмотреть код элемента

Сделать это можно также с помощью инспектора стилей. Наведите на логотип курсор мышки и откройте инспектор на нужном нам элементе.

свойство логотипа

Здесь мы увидим, что за настройки изображения отвечает класс (login h1 a), а за показ самого логотипа свойство (background-image).

свойство и параметры логотипа

Убрав галочки со свойства background-image, мы увидим, что логотип исчезнет, так мы убедимся, что это именно тот класс, который нам нужен.

Также нужно обратить внимание на ширину и высоту изображения, чтобы знать, какие параметры оно имеет по умолчанию. Это свойство Width (Ширина) и Height (Высота). В нашем случае ширина и высота изображения составляет 84px.

Теперь, когда мы знаем все необходимые нам параметры, можно внести изменения в файл function.php, который находится в каталоге вашего шаблона, который сейчас установлен на вашем сайте.

Для этого откройте файл function.php активированной темы и добавьте в него следующий код:

function pr_edit_admin_logo(){
   echo '
   <style type="text/css">;
        .login h1 a { 
			background: url('. get_bloginfo('template_directory') .'/images/admin_wp_logo.png) no-repeat 0 0 !important; 
			width: 149px!important; 
			height: 117px!important;}
    </style>';
}
add_action('login_enqueue_scripts', 'pr_edit_admin_logo');

Далее рассмотрим более подробно некоторые элементы кода, чтобы было понятно, что и зачем нужно делать.
В строке function мы объявляем функцию и даем ей название. Имя ей можете дать любое, но желательно такое, чтобы подходило по смыслу.
Далее внутри тега:

<style>...</style>

выводим новые стили для оформления нашего логотипа.

В свойстве background мы прописываем новое место расположения нашего изображения и его название.
В данном примере изображение находится в каталоге images, который находится в корневом каталоге темы и называется оно admin_wp_logo.png.
Если у вас другой каталог для изображения или другое название, измените их на свой вариант.

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

В данном примере я указал ширину 149px и высоту 117px, это размеры моего изображения, вы указываете свои размеры.
Объявление !important нужно для того, чтобы браузер применил наши новые стили, а не те, что были по умолчанию.

Далее строкой add_action мы регистрируем нашу функцию с помощью правила 'login_enqueue_scripts'. Вторым параметром в этой строке идет название нашей функции, которое вы указали в самом начале.
Если вы все сделаете правильно, то вместо стандартного изображения появится ваше.

Меняем описание изображения и внешнюю ссылку на свою страницу

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

Сначала поменяем адрес ссылки с нашего логотипа на свой. По умолчанию, при клике на логотип в русской версии движка, открывается такая страница:

ru.wordpress.org

Если она вам не нужна, можете сделать так, чтобы при клике на изображение открывалась главная страница вашего сайта.
Для этого нужно в наш файл function.php добавить такой код:

function pr_edit_admin_logo_link(){
	return home_url('/');
}
add_filter('login_headerurl','pr_edit_admin_logo_link');

или такой:

add_filter( 'login_headerurl', create_function('', 'return get_home_url();') );

Здесь мы также объявляем функцию и с помощью фильтра 'login_headerurl' присваиваем логотипу URl нашего сайта.
Оба варианта идентичны между собой, но второй занимает меньше строк в файле.

Заменить описание логотипа, которое прописывается в теге title можно с помощью следующего кода:

function pr_custom_loginlogo_title( $url ) { 
 return 'Ваш текст'; 
} 
add_filter( 'login_headertitle', 'pr_custom_loginlogo_title' );

Здесь мы с помощью фильтра 'login_headertitle' указываем, что нужно прописать в теге title. Эту надпись нужно написать в строке return, в поле 'Ваш текст';
Если вы хотите ее вообще убрать, тогда оставьте поле между кавычками пустым.

Выводим наш код в отдельный файл и подключаем его к шаблону


Все эти варианты кодов можно записать в файле function.php, но я советую не засорять этот файл лишним кодом.
Лучше всего создать отдельный файл и весь этот хлам добавить туда, а уже его подключить к файлу function.php.

Какие плюсы этого варианта?

  1. Так при смене шаблона вам не нужно будет искать этот код и добавлять его в новый файл, нужно будет просто его опять подключить.
  2. В основном файле не будет лишнего мусора и вы всегда, при необходимости, найдете любой участок кода, если он будет разделен на отдельные файлы. Потому что с годами просто забываешь, какой код за что отвечает, а так все будет на своих местах.

Создать такой файл очень просто. Откройте в текстовом редакторе, которым вы пользуетесь для работы с сайтом, новый файл, затем добавьте в него код:

<?php
Здесь здесь свой код
?>

и сохраните его с расширением php, например, как edit-admin-logo.php.

Скопируйте этот файл в корневую категорию своего шаблона или в специальную папку, где у вас хранятся другие похожие файлы. И уже в этот файл добавьте весь код, который вы решили использовать, затем сохраните изменения в файле.

После того, как вы создали новый файл, его нужно будет подключить к основному файлу fuction.php Сделать это можно с помощью специального кода, который нужно будет добавить в начале вашего основного файла с функциями.

Если файл edit-admin-logo.php находится у вас в корневом каталоге темы, тогда можно подключить его с помощью кода:

get_template_part( 'edit-admin-logo.php' );

Если он находится у вас в отдельном каталоге, например, в каталоге inc, тогда его можно подключить одним из следующих кодов:

get_template_part( 'inc/edit-admin-logo.php' );

или

require get_template_directory () . '/inc/edit-admin-logo.php';

Выглядеть подключение файла будет примерно так, как показано на изображении:

код в файле функций

А сам файл с нашими изменениями будет выглядеть примерно так:

<?php

// Заменяем логотип WordPress в админ-панели
function pr_edit_admin_logo(){
   echo '
   <style type="text/css">
        .login h1 a { 
			background: url('. get_bloginfo('template_directory') .'/images/admin_wp_logo.png) no-repeat 0 0 !important; 
			width: 149px!important; 
			height: 117px!important;}
    </style>';
}
add_action('login_enqueue_scripts', 'pr_edit_admin_logo');

// Заменяем ссылку с логотипа на свою
add_filter( 'login_headerurl', create_function('', 'return get_home_url();') );

// Заменяем описание логотипа на странице входа в админку
function pr_custom_loginlogo_title( $url ) { 
 return 'Ваш текст'; 
} 
add_filter( 'login_headertitle', 'pr_custom_loginlogo_title' );
?>

Как видите ничего сложного в этом нет. После этого, если вы все сделали правильно, новый логотип должен появится на своем месте.
Для начала я вам советую потренироваться на виртуальном хостинге или на тренировочном блоге и уже потом редактировать основной файл.
Надеюсь данная статья будет вам полезна и вы сможете сделать свою страницу уникальной.
Удачи!

С уважением Юрий Хрипачев.

Еще по теме:

Напишите что нибудь:

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

Обсуждение: 1 комментарий

  • Alex написал:

    Скажите пожалуйста, как можно реализовать редирект на главную страницу после входа а не в админ панель? Спасибо.