Функция the_custom_header_markup() используется для вывода HTML-разметки пользовательского заголовка, который может содержать изображение или видео, установленные через настройки кастомайзера WordPress. Это функция автоматически выводит разметку и подключает необходимые скрипты для корректного отображения видео в шапке сайта.
the_custom_header_markup();Описание
Функция выводит HTML-код заголовка, установленного в кастомайзере. Если в качестве заголовка используется изображение или видео, функция корректно отобразит их на сайте.
При работе в режиме предварительного просмотра в кастомайзере, оборачивающий <div> всегда выводится для корректной работы JavaScript-кода, который отвечает за динамическую вставку видео.
- Возвращаемое значение:
null. Функция выводит HTML-разметку заголовка, если в настройках установлено изображение или видео. Если заголовок не установлен, ничего не будет выведено.
Поддержка заголовков
Чтобы использовать кастомные заголовки в теме, необходимо активировать поддержку заголовков, добавив в файл functions.php следующие строки:
add_theme_support( 'custom-header' );
Пример 1: Вывод изображения заголовка
Если в настройках кастомайзера установлено изображение заголовка, то следующий код выведет его:
<?php the_custom_header_markup(); ?>
Пример HTML-кода, который будет выведен для изображения заголовка:
<div id="wp-custom-header" class="header-container">
<img
src="http://example.com/wp-content/uploads/2023/10/new-image.jpg"
width="800"
height="1200"
alt="Новый сайт"
srcset="http://example.com/wp-content/uploads/2023/10/new-image.jpg 800w, http://example.com/wp-content/uploads/2023/10/new-image-400x600.jpg 400w, http://example.com/wp-content/uploads/2023/10/new-image-600x900.jpg 600w"
sizes="(max-width: 800px) 100vw, 800px"
/>
</div>Пример 2: Вывод видео в заголовке
Если в кастомайзере заголовком сайта установлено видео, the_custom_header_markup() автоматически подключит нужные скрипты и выведет HTML-код для воспроизведения видео:
<?php the_custom_header_markup(); ?>
Пример HTML-кода для видео-заголовка:
<div id="wp-custom-header" class="header-container">
<video id="wp-custom-header-video" autoplay="" loop="" width="1024" height="800" src="http://example.com/wp-content/uploads/2024/03/video.mp4"></video>
<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Пауза</button>
</div>
Для корректного воспроизведения видео, также будут подключены следующие скрипты:
<script type='text/javascript' src='http://example.com/wp-includes/js/wp-custom-header.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/mediaelement/wp-mediaelement.min.js'></script>
Эти скрипты обеспечивают поддержку видео в различных браузерах и добавляют функциональность управления воспроизведением видео, например, кнопку паузы.
Пример 3: Условный вывод заголовка
Вы можете условно выводить заголовок в зависимости от его типа (видео или изображение) с помощью функции has_header_video():
<?php
if ( has_header_video() ) {
// Заголовок содержит видео
the_custom_header_markup();
} elseif ( has_custom_header() ) {
// Заголовок содержит изображение
the_custom_header_markup();
}
?>
Заключение
Функция the_custom_header_markup() является удобным способом вывода кастомных заголовков (изображений или видео), установленных через кастомайзер WordPress. Она автоматически генерирует необходимую HTML-разметку и подключает скрипты для корректного воспроизведения видео.