the_custom_header_markup() │ WP 4.7.0

Выводит HTML разметку заголовка шапки - HTML код картинки и видео для шапки установленные в настройках кастомайзера.

Оборачивающий <div> всегда отображается при просмотре шаблона в кастомайзере. С этим <div> работает JS скрипт, который добавляет HTML код видео.

HTML код видео добавляется через JS налету, если видео есть и оно поддерживается браузером.

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

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

Хуков нет.

Возвращает

null. Ничего (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 6.7.1

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 (настройки шапки темы: картинка цвет видео)

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