Функция the_custom_logo() в WordPress: Обзор и примеры

Функция the_custom_logo() используется для вывода HTML-кода кастомного логотипа сайта, установленного через кастомайзер в настройках темы WordPress. Логотип по умолчанию будет обернут ссылкой на главную страницу сайта, если тема не поддерживает отключение этой ссылки на домашней странице.

the_custom_logo( int $blog_id = 0 );

• $blog_id (int, необязательный) — ID блога или сайта, логотип которого нужно вывести. По умолчанию используется ID текущего блога.
• Возвращаемое значение: null. Функция выводит HTML-код на экран.

Поддержка кастомного логотипа

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

add_theme_support( 'custom-logo' );

Пример 1: Вывод кастомного логотипа

Простой пример использования функции для вывода логотипа сайта:

<?php the_custom_logo(); ?>

Этот код выведет HTML-код логотипа, установленного в кастомайзере, в виде ссылки на главную страницу:

<a href="http://example.com/" class="custom-logo-link" rel="home" itemprop="url">
    <img width="300" height="150" src="http://example.com/wp-content/uploads/logo.png" class="custom-logo" alt="Logo" />
</a>

Если логотип не установлен, функция ничего не выведет.

Пример 2: Получение и вывод логотипа без ссылки на главную

Иногда нужно вывести логотип без ссылки на главную страницу. В этом случае можно использовать функцию get_custom_logo() и извлечь только изображение:

<?php
$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo_img = '';

if ( $custom_logo_id ) {
    $logo_img = wp_get_attachment_image( $custom_logo_id, 'full', false, array(
        'class'    => 'custom-logo',
        'itemprop' => 'logo',
    ) );
}

echo $logo_img;
?>

Этот код выведет только тег <img> без обертки-ссылки:

<img width="300" height="150" src="http://example.com/wp-content/uploads/logo.png" class="custom-logo" alt="Logo" />

Пример 3: Вывод логотипа на странице авторизации

Чтобы вывести кастомный логотип на странице авторизации WordPress, можно использовать следующий код:

<?php
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] ); ?>);
                background-size: <?php echo absint( $image[1] ) ?>px;
                width: <?php echo absint( $image[1] ) ?>px;
                height: <?php echo absint( $image[2] ) ?>px;
            }
        </style>
        <?php
    }
}
add_action( 'login_head', 'wpdev_filter_login_head', 100 );

Этот код изменяет логотип на странице авторизации, заменяя стандартный логотип WordPress на кастомный логотип вашего сайта.

Пример 4: Удаление ссылки на WordPress.org с логотипа на странице авторизации

По умолчанию на странице авторизации логотип WordPress ссылается на сайт WordPress.org. Чтобы изменить эту ссылку на домашнюю страницу вашего сайта, используйте следующий код:

function new_wp_login_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'new_wp_login_url' );

Теперь при клике на логотип на странице авторизации пользователя перенаправит на главную страницу вашего сайта, а не на WordPress.org.

Пример 5: Кастомизация логотипа для многоязычного сайта

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

<?php
if ( function_exists( 'pll_current_language' ) ) {
    $lang = pll_current_language();
    if ( $lang === 'en' ) {
        the_custom_logo();
    } elseif ( $lang === 'fr' ) {
        // Выводим другой логотип для французской версии
        echo '<img src="http://example.com/wp-content/uploads/logo-fr.png" class="custom-logo" alt="Logo FR" />';
    }
}
?>

Этот код проверяет текущий язык с помощью плагина Polylang и выводит соответствующий логотип для каждого языка.

Пример 6: Вывод логотипа с кастомными атрибутами

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

<?php
$custom_logo_id = get_theme_mod( 'custom_logo' );

if ( $custom_logo_id ) {
    echo wp_get_attachment_image( $custom_logo_id, 'full', false, array(
        'class'       => 'custom-logo custom-class',
        'itemprop'    => 'logo',
        'alt'         => 'My Custom Logo',
        'data-custom' => 'custom-data',
    ) );
}
?>

В этом примере добавлены дополнительные классы и атрибуты data-custom к изображению логотипа.

Заключение

Функция the_custom_logo() — это простой и удобный инструмент для вывода логотипа, установленного через кастомайзер WordPress. Она автоматически создает необходимые теги и оборачивает изображение логотипа ссылкой на главную страницу. В случаях, когда нужна дополнительная кастомизация, вы можете использовать связанные функции get_custom_logo() и wp_get_attachment_image() для получения большего контроля над выводом логотипа.