При создании сайта мы все сталкиваемся с необходимостью разместить иконку сайта, логотип компании в нужном нам месте. Обычно это основная панель навигации по сайту или одна из колонок футера, но бывает, что логотип требуется и в других местах. В 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
. В ней нужно добавить код:
Сохраняем и закрываем. Вы можете ставить этот код в любое удобное вам место, в котором нужно вывести иконку сайта.
Как редактировать логотип через настройщик
После всех наших операций, мы можем перейти к добавлению и настройке нашей иконки сайта через настройщик темы. Нажимаем Настроить- Свойства сайта.
Теперь у нас появилось поле для добавления/изменения логотипа, которое автоматически встает в меню темы.
Посмотреть и пощупать результат Вы можете на сайте бесплатной темы для вордпресс demo.madeas.ru
Документация на Git
tWPonB4