Добавляем логотип и убираем ссылку на главную

Добавляем логотип и убираем ссылку на главную

Все темы WordPress по умолчанию используют пользовательский логотип. Если у вас появилась необходимость добавить в custom_logo свои коррективы: получить или убрать ссылку на главную, вывести логотип вместо названия и описания сайта, добавить микроразметку, то рассмотрим несколько полезных функций.

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

Функции отвечающие за отображение логотипа на сайте.

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

PHP
add_theme_support( 'custom-logo' );

А чтобы логотип появился в нужном месте, используется следующая функция:

PHP
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo( $blog_id );
}
?>

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

HTML
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><!-- добавляем тип схемы разметки -->
<a href="http://site.ru/home/" class="custom-logo-link" rel="home" itemprop="url"><img width="200" height="100" src="#" class="custom-logo" alt="" itemprop="logo"></a>
<meta itemprop="width" content="200"><!-- добавляем атрибуты разметки -->
<meta itemprop="height" content="100">
</div>

Добавление размеров и замена названия и описания сайта логотипом.

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

PHP
/** *Enable support for custom logo */ add_theme_support( 'custom-logo', array( 'height' => 100, 'width' => 200, 'flex-height' => true, // если гибкая высота.
'flex-width' => true, // если гибкая ширина. ) );

Если требуется вставить логотип вместо текста, то в эту же функцию добавляем следующие параметры:

PHP
'header-text' => array( 'site-title', 'site-description' ),

И в header.php вставим код, который выведет название и описание сайта, если отсутствует логотип, а когда он есть, заголовок и описание будут скрыты.

PHP
<?php $logo_id = get_theme_mod( 'custom_logo' ); $logo_image = wp_get_attachment_image_src( $logo_id, 'full' ); if ( ! empty( $logo_image ) ) : ?> <span class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo esc_url( $logo_image[0] ); ?>" alt="<?php bloginfo( 'name' ); ?>"/></a></span> <?php else : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <p class="site-description"><?php bloginfo('description'); ?></p> <?php endif; ?>

Микроразметка логотипа и удаление циклической ссылки.

Стандартная функция создает атрибуты микроразметки, но если нам необходимо убрать ссылку на главную (циклическая ссылка) с домашней страницы, но оставить на всех прочих, указать название сайта при наведении на логотип или заменить атрибут itemprop=’logo’ на itemprop=’url image’, то воспользуемся следующим кодом.

PHP
/** Custom logo. */ function nanima_logo() { $custom_logo_id = get_theme_mod( 'custom_logo' ); if(is_home()){ $html = wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' => 'custom-logo', 'itemprop' => 'url image', 'alt' => get_bloginfo('name') ) );} else { $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" title="'. get_bloginfo('name') .'" itemprop="url">%2$s</a>', esc_url( home_url( '/' ) ), wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' => 'custom-logo', 'itemprop' => 'url image', 'alt' => get_bloginfo('name')) ) );} return $html; } add_filter( 'get_custom_logo', 'nanima_logo' );

Первая часть кода не содержит ссылку на главную страницу если это домашняя страница, а также страницы пагинации. Во второй части добавляем ссылку и размечаем ее атрибутом itemprop=’url’. Если вы добавляете логотип в тип микроразметки Organization, то не забудьте изменить ‘itemprop’ => ‘url image’ на ‘itemprop’ => ‘logo’ в обоих частях кода.

Теперь в файл header.php добавляем этот код:

PHP
<?php echo nanima_logo(); ?>
<meta itemprop="width" content="200">
<meta itemprop="height" content="100">

Тег meta с атрибутами ширины и высоты логотипа, добавляем сами.

Перед всеми изменениями, сохраните function.php и header.php к себе на компьютер, чтобы в случае ошибки вернуть все на место.

СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

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

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт