При создании сайта мы все сталкиваемся с необходимостью разместить иконку сайта, логотип компании в нужном нам месте. Обычно это основная панель навигации по сайту или одна из колонок футера, но бывает, что логотип требуется и в других местах. В html разместить такой логотип легко при помощи тега img. На wordpress можно сделать также, но площадка дает нам больше возможностей. Мы можем редактировать логотип через настройщик — кнопку Настроить в меню, не заходя в консоль и не прибегая к изменениям структуры шаблона. В одной из статей была разобрана установка и настройка Navbar bootstrap 4 на wordpress, теперь давайте на её примере установим логотип в нашу навигацию и будем редактировать его через настройщик.

Установка иконки сайта

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


// создаем логотип
add_theme_support( 'custom-logo' );
add_theme_support( 'custom-logo', array(
	'height'      => 100,
	'width'       => 400,
	'flex-height' => true,
	'flex-width'  => true,
	'header-text' => array( 'site-title', 'site-description' ),
) );
function theme_prefix_setup() {
	
	add_theme_support( 'custom-logo', array(
		'height'      => 100,
		'width'       => 400,
		'flex-width' => true,
	) );

}
add_action( 'after_setup_theme', 'theme_prefix_setup' );
function theme_prefix_the_custom_logo() {
	
	if ( function_exists( 'the_custom_logo' ) ) {
		the_custom_logo();
	}

}

Сохраняем и закрываем. Теперь переходим к следующему файлу header.php и находим в навигации ссылку c названием бренда .navbar-brand. В ней нужно добавить код:

Сохраняем и закрываем. Вы можете ставить этот код в любое удобное вам место, в котором нужно вывести иконку сайта.

Как редактировать логотип через настройщик

После всех наших операций, мы можем перейти к добавлению и настройке нашей иконки сайта через настройщик темы. Нажимаем Настроить- Свойства сайта. Теперь у нас появилось поле для добавления/изменения логотипа, которое автоматически встает в меню темы.

Иконка сайта, логотип через настройщик WordPress
Посмотреть и пощупать результат Вы можете на сайте бесплатной темы для вордпресс demo.madeas.ru
Документация на Git
tWPonB4

Автор: Андрей Шарапов