Кастомный логотип в WordPress

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

• Регистрация логотипа
• Отображение логотипа в теме
• Изменение атрибутов и структуры кастомного логотипа
• Добавим условие изменения структуры кастомного логотипа в зависимости от отображаемой страницы
• Вывод

1. Регистрация кастомного логотипа в теме

В файле functions.php добавь этот код, чтобы включить поддержку пользовательского логотипа:

function mytheme_custom_logo_setup() {
    add_theme_support('custom-logo', array(
        'height'      => 100,  // Высота логотипа
        'width'       => 300,  // Ширина логотипа
        'flex-height' => true, // Возможность гибко менять высоту
        'flex-width'  => true, // Возможность гибко менять ширину
    ));
}
add_action('after_setup_theme', 'mytheme_custom_logo_setup');

2. Отображение логотипа в теме

Чтобы вывести логотип в хедере, в файле header.php, добавь следующий код:

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

Этот код выведет логотип, установленный через кастомайзер, примерно в таком формате:

<a href="http://example.com/" class="custom-logo-link" rel="home" itemprop="url"> 
    <img width="300" height="100" src="http://example.com/wp-content/imgs/your-logo.webp" class="custom-logo" alt="your site name" /> 
</a>

Возможно, перед тем как начать верстать, вы заранее подумали о дефолтных функциях WordPress’a — в каком виде и с какими классами выводятся стандартные блоки, такие как кастомный логотип, чтобы стилизовать уже готовые компоненты. Но это вряд ли 🙂 поэтому читаем далее — я расскажу, как изменить имена классов и даже типы блоков.

3. Изменение атрибутов и структуры кастомного логотипа

Чтобы изменить атрибуты кастомного логотипа, или тип блока (например вам не нужна ссылка <a>, а нужен блок <div> или вообще только изображение <img>) добавьте следующий код:

 <?php
// Проверяем, поддерживается ли функция вывода логотипа
if (function_exists('the_custom_logo')) {
    // Получаем ID кастомного логотипа из настроек темы
    $custom_logo_id = get_theme_mod('custom_logo');
    // Получаем данные изображения логотипа (URL, размеры и т.д.)
    $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
    
    // Если логотип установлен, выводим его
    if (has_custom_logo()) {
        echo '<a href="' . esc_url(home_url('/')) . '" class="my-custom-logo-link" rel="home" itemprop="url">';
        echo '<img src="' . esc_url($logo[0]) . '" class="my-custom-logo" alt="' . esc_attr(get_bloginfo('name')) . '">';
        echo '</a>';
    }
}
?>

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

4. Добавим условие изменения структуры кастомного логотипа в зависимости от отображаемой страницы

Зачем вам активная ссылка на главную страницу, если вы и так на главной странице? 🙂 Соответственно, если вы не на главной странице, то пусть будет 🙂

<?php
// Проверяем, поддерживается ли функция вывода логотипа
if ( function_exists( 'the_custom_logo' ) ) {
    // Получаем ID кастомного логотипа из настроек темы
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    // Получаем данные изображения логотипа (URL, размеры и т.д.)
    $logo = wp_get_attachment_image_src( $custom_logo_id, 'full' );
    
    // Если логотип установлен, выводим его
    if ( has_custom_logo() ) {
        echo '<a href="' . esc_url( home_url('/') ) . '" class="my-custom-logo-link" rel="home" itemprop="url">';
        echo '<img src="' . esc_url( $logo[0] ) . '" class="my-custom-logo" alt="' . esc_attr( get_bloginfo('name') ) . '">';
        echo '</a>';
    }
}
?>

5. Вывод

Ну какой тут вывод. Удачи вам! Спасибо, что пришли 🙂