Рассмотрим несколько полезных функций для сайта WordPress которые позволят изменить URI логотипа, получить или убрать ссылку на главную, вывести логотип вместо названия и описания сайта, добавить микроразметку или другие атрибуты, а также вставить свой логотип на страницу входа.
Конечно же, можно, особо не напрягаясь, вставить в тему простой HTML-код и WordPress его без проблем отобразит. Но лучше будет правильно подключить функцию.
⚠️ Так как версии WordPress и его темы и плагины могут изменяться, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.
Функции, отвечающие за отображение логотипа на сайте, и установка размеров
Чтобы в классической теме WordPress включить поддержку пользовательского логотипа нужно добавить следующий код в файл functions.php. Его надо вставить внутри функции, которая используется для хука действия `after_setup_theme`:
add_theme_support( 'custom-logo' );
Давайте немного изменим код, чтобы задать размеры изображения логотипа в пикселях. Это ширина и высота, которые будут отображаться на сайте. В зависимости от дизайна сайта, можно указать фиксированный размер или сделать его адаптивным по ширине или высоте. Также добавим параметр unlink-homepage-logo, который уберет ссылку на главную страницу с логотипа. Этот параметр работает только в WP версии 5.5 и выше.
/**
*Enable support for custom logo
*/
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 200,
'flex-height' => true, // если гибкая высота.
'flex-width' => true, // если гибкая ширина.
'unlink-homepage-logo' => true, // убрать (по умолчанию true) или оставить ссылку на главную (т.е. изменить true на false). Вставлять эту строчку только для ver. WP выше 5.5.
) );
Далее скопируйте следующий код и вставьте его в нужном месте в файле header.php, т.е. там, где будет логотип. Сохраните файл.
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
?>
Теперь откройте кастомизатор тем — это визуальная настройка темы в административной панели, добавьте своё изображение логотипа, сохраните настройки, и вы увидите, что оно появилось на странице в нужном месте. В WordPress до версии 5.5 на главной странице будет выводится также ссылка на эту же страницу.
Вот пример HTML кода, который показывает, как это будет выглядеть:
<div class="site-branding">
<a href="https://site.ru/" class="custom-logo-link" rel="home">
<img width="819" height="818" src="https://site.ru/wp-content/uploads/2018/01/cropped-logo.png" class="custom-logo" alt="Test" srcset="https://site.ru/wp-content/uploads/2018/01/cropped-logo.png 819w, https://site.ru/wp-content/uploads/2018/01/cropped-logo.png-150x150.png 150w, https://site.ru/wp-content/uploads/2018/01/cropped-logo.png-768x767.png 768w" sizes="(max-width: 819px) 100vw, 819px">
</a>
</div>
Включаем только логотип или только название сайта с описанием
В файле header.php вставим код, который выведет название и описание сайта если отсутствует логотип, а когда он загружен, то они будут скрыты.
<?php
$logo_id = get_theme_mod( 'custom_logo' );
$logo_image = wp_get_attachment_image_src( $logo_id, 'full' );
if ( ! empty( $logo_image ) ) : //если установлено изображение, то показывать только логотип
?>
<div class="site-branding">
<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' ); ?>" title="<?php bloginfo( 'name' ); ?>"/>
</a>
</span>
<span class="site-name" style="clip: rect(1px, 1px, 1px, 1px);position: absolute;margin: 0;">
<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>
</span>
</div>
<?php else : //если логотипа нет, то показывать только название и описание сайта ?>
<div class="site-branding">
<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>
</div>
<?php endif; ?>
Заголовок и описание могут быть скрыты только при помощи CSS, чтобы оставаться доступными для поисковых служб, полностью удалять их со страницы не стоит. Логотип также предпочтительнее будет оставить в коде, но скрыть правилами CSS, если того требует дизайн.
Меняем разметку логотипа и удаляем циклическую ссылку
Как уже отмечалось, в WordPress 5.5 базовые функции get_custom_logo() и the_custom_logo() не добавляют ссылку на главную страницу к логотипу (чтобы избежать цикличности). Однако, можно управлять наличием или отсутствием этой ссылки другим способом, который совместим как с новыми, так и со старыми версиями WP.
В этой функции мы также можем задать свойства микроразметки Schema для изображений, например, itemprop=’url image’. Мы можем настроить атрибуты логотипа и ссылки по своему усмотрению. Например, мы можем отключить loading=»lazy» и decoding=»async» или добавить fetchpriority=»high», изменить class, title или alt-текст.
/**
* Custom logo.
*/
function webkato_theme_logo() {
$custom_logo_id = get_theme_mod( 'custom_logo' );
// Если главная, то без ссылки
if(is_home()){ //если у вас вместо главной страница блога, то is_home, если статичная страница, то is_front_page
$html = wp_get_attachment_image( $custom_logo_id, 'full', false, array(
'class' => 'custom_logo',
'alt' => get_bloginfo('name'),
'title' => get_bloginfo('name'),
'loading' => '',
'decoding' => '',
'fetchpriority' => 'high'
) );
} else { // На прочих страницах ссылка на главную есть
$html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home">%2$s</a>',
esc_url( home_url( '/' ) ),
wp_get_attachment_image( $custom_logo_id, 'full', false, array(
'class' => 'custom_logo',
'alt' => get_bloginfo('name'),
'title' => get_bloginfo('name'),
'loading' => '',
'decoding' => '',
'fetchpriority' => 'high')
) );
}
return $html;
}
add_filter( 'get_custom_logo', 'webkato_theme_logo' );
Теперь в файл header.php вставляем следующий код, чтобы вывести логотип на страницах сайта:
<?php
if ( function_exists( 'webkato_theme_logo' ) ) {
echo webkato_theme_logo();
}
?>
Если для микроразметки понадобится указать <meta itemprop=»width» content=»»> или <meta itemprop=»height» content=»»>, то можно сделать так:
<?php
if ( function_exists( 'webkato_theme_logo' ) ) {
echo webkato_theme_logo();
$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
echo '<meta itemprop="width" content="'. absint( $image[1] ) .'">
<meta itemprop="height" content="'. absint( $image[2] ) .'">';
}
?>
Ссылка на логотип
Если понадобится вывести ссылку на логотип.
<?php echo esc_url( wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' )[0] ); ?>
Или
$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
echo $image[0];
Загрузить логотип из другой папки
Иногда требуется загрузить логотип не из каталога /wp-content/uploads/, а из любой другой папки. Например, подключив защиту от хотлинкинга в Cloudflare нам потребуется перенести все разрешённые изображения в папку hotlink-ok, тогда подключим изображение логотипа таким образом:
/**
* Custom logo another path.
*/
function webkato_theme_logo() {
$custom_logo_url = '/path/to/your/logo.png'; // Замените на путь к вашему логотипу
$custom_logo_url_2x = '/path/to/your/logo@2x.png'; // Замените на путь к вашему логотипу высокого разрешения
// Если главная, то без ссылки
if(is_home()){ //если у вас вместо главной страница блога, то is_home, если статичная страница, то is_front_page
$html = '<img src="' . $custom_logo_url . '" srcset="' . $custom_logo_url . ' 1x, ' . $custom_logo_url_2x . ' 2x" sizes="(max-width: 600px) 100vw, 600px" class="custom_logo" alt="' . get_bloginfo('name') . '" title="' . get_bloginfo('name') . '" style="width:100%; height:auto;"/>';
} else { // На прочих страницах ссылка на главную есть
$logo_html = '<img src="' . $custom_logo_url . '" srcset="' . $custom_logo_url . ' 1x, ' . $custom_logo_url_2x . ' 2x" sizes="(max-width: 600px) 100vw, 600px" class="custom_logo" alt="' . get_bloginfo('name') . '" title="' . get_bloginfo('name') . '" style="width:100%; height:auto;"/>';
$html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home">%2$s</a>', esc_url( home_url( '/' ) ), $logo_html );
}
return $html;
}
add_filter( 'get_custom_logo', 'webkato_theme_logo' );
Если изображение будет загружено из папки активной темы, то извлечем URI логотипа так:
$custom_logo_url = get_template_directory_uri() . '/images/logo.png';
Свой логотип на странице входа
Эта функция позволяет установить собственное изображение на страницу входа сайта.
function wpdev_filter_login_head() {
if ( has_custom_logo() ) :
$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
?>
<style type="text/css">
.login h1 a {
background-image: url(<?php echo esc_url( $image[0] ); ?>);
-webkit-background-size: <?php echo absint( $image[1] )?>px;
background-size: <?php echo absint( $image[1] ) ?>px;
height: <?php echo absint( $image[2] ) ?>px;
width: <?php echo absint( $image[1] ) ?>px;
}
</style>
<?php
endif;
}
add_action( 'login_head', 'wpdev_filter_login_head', 100 );
Высоту и ширину можно прописать вручную, заменив содержимое в background-size, height и width на свой размер.
Теперь изменим ссылку на странице входа:
function new_wp_login_url() {
return home_url();
}
add_filter('login_headerurl', 'new_wp_login_url');