Функция 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() для получения большего контроля над выводом логотипа.