the_custom_header_markup() │ WP 4.7.0

Выводит на страницу HTML-код заголовка сайта, заданного в кастомайзере — это может быть изображение или видео.

Функция автоматически подключает обёртку <div>, необходимую для корректной работы JavaScript, который добавляет HTML-код видео (если оно задано и поддерживается браузером). При просмотре в кастомайзере обёртка отображается всегда.

Используйте get_custom_header_markup(), когда нужно только получить HTML-код заголовка (изображения или видео), но не выводить его на экран и не подключать скрипты.

Работает на основе: get_custom_header_markup(), wp_enqueue_script()

Хуков нет.

Возвращает

null. Выводит HTML код на экран (если есть что выводить).

Использование

<?php the_custom_header_markup(); ?>

Примеры

0

#1 Выведем картинку и видео заголовка 

<?php the_custom_header_markup(); ?>

Для картинки выведет HTML:

<div id="wp-custom-header" class="wp-custom-header">
	<img 
		src="http://example.com/wp-content/uploads/2016/05/image.jpg" width="954" height="1300" alt="Тестовый сайт" 
		srcset="http://example.com/wp-content/uploads/2016/05/image.jpg 954w,
				http://example.com/wp-content/uploads/2016/05/image-220x300.jpg 220w, 
				http://example.com/wp-content/uploads/2016/05/image-768x1047.jpg 768w, 
				http://example.com/wp-content/uploads/2016/05/image-751x1024.jpg 751w" 
		sizes="(max-width: 954px) 100vw, 954px"
	/>
</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>

Подключенные скрипты заменять HTML код картинки на такой:

<div id="wp-custom-header" class="wp-custom-header">
	<video id="wp-custom-header-video" autoplay="" loop="" width="954" height="1300" src="http://example.com/wp-content/uploads/2017/01/polina.mp4"></video>
	<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Пауза</button>
</div>

Список изменений

С версии 4.7.0 Введена.

Код the_custom_header_markup() WP 7.0

wp-includes/theme.php 
function the_custom_header_markup() {
	$custom_header = get_custom_header_markup();
	if ( empty( $custom_header ) ) {
		return;
	}

	echo $custom_header;

	if ( is_header_video_active() && ( has_header_video() || is_customize_preview() ) ) {
		wp_enqueue_script( 'wp-custom-header' );
		wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
	}
}

custom_header (настройки шапки темы: картинка цвет видео)

Другие функции темы