Создание HTML-кода изображения для заголовка с помощью get_header_image_tag()

Функция GET_HEADER_IMAGE_TAG() │ WP 4.4.0

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

Основные функции, которые она использует

  • get_post_meta() — получает метаданные поста.
  • wp_calculate_image_srcset() — рассчитывает значение атрибута srcset для адаптивного изображения.
  • wp_calculate_image_sizes() — вычисляет, какие размеры изображения использовать в зависимости от условий.

Возвращаемое значение

Функция возвращает строку с HTML-кодом для элемента изображения или пустую строку, если изображение отсутствует.

Как использовать

get_header_image_tag( $attr );

Параметры

  • $attr (массив): Дополнительные атрибуты для тега изображения. Можете использовать, чтобы переопределить стандартные атрибуты.
    • По умолчанию: ''

Примеры использования

Пример 1: Получение тега изображения заголовка

$img = get_header_image_tag();
echo $img;

Результат:

Test Site

Пример 2: Указание атрибутов

Вы можете указать специальные атрибуты, например, заменить текст для атрибута alt и запретить создание атрибута srcset. Вместо него будет использоваться атрибут sizes:

$img = get_header_image_tag( array(
    'srcset' => 'none',
    'alt' => 'header picture',
) );
echo $img;

Результат:

header picture

Техническая информация

Функция расположена в файле wp-includes/theme.php, начиная с версии 4.4.0. Вот её код:

function get_header_image_tag( $attr = array() ) {
$header = get_custom_header(); // Получаем информацию о пользовательском заголовке
$header->url = get_header_image(); // Получаем URL изображения заголовка

if ( ! $header->url ) {
    return ''; // Возвращаем пустую строку, если URL отсутствует
}

$width = absint( $header->width ); // Ширина изображения
$height = absint( $header->height ); // Высота изображения
$alt = ''; // Альтернативный текст

// Используем альтернативный текст, если он назначен изображению
if ( ! empty( $header->attachment_id ) ) {
    $image_alt = get_post_meta( $header->attachment_id, '_wp_attachment_image_alt', true );
    if ( is_string( $image_alt ) ) {
        $alt = $image_alt; // Назначаем альтернативный текст
    }
}

$attr = wp_parse_args(
    $attr,
    array(
        'src'    => $header->url,
        'width'  => $width,
        'height' => $height,
        'alt'    => $alt,
    )
);

// Генерация атрибутов 'srcset' и 'sizes', если они не заданы
if ( empty( $attr['srcset'] ) && ! empty( $header->attachment_id ) ) {
    $image_meta = get_post_meta( $header->attachment_id, '_wp_attachment_metadata', true );
    $size_array = array( $width, $height );

    if ( is_array( $image_meta ) ) {
        $srcset = wp_calculate_image_srcset( $size_array, $header->url, $image_meta, $header->attachment_id );

        if ( ! empty( $attr['sizes'] ) ) {
            $sizes = $attr['sizes']; 
        } else {
            $sizes = wp_calculate_image_sizes( $size_array, $header->url, $image_meta, $header->attachment_id );
        }

        if ( $srcset && $sizes ) {
            $attr['srcset'] = $srcset;
            $attr['sizes']  = $sizes;
        }
    }
}

$attr = array_merge(
    $attr,
    wp_get_loading_optimization_attributes( 'img', $attr, 'get_header_image_tag' )
);

$html = ' $value ) {
    $html .= ' ' . $name . '="' . esc_attr( $value ) . '"';
}
$html .= ' />';

return apply_filters( 'get_header_image_tag', $html, $header, $attr ); // Возвращаем HTML код изображения

}

Заключение

Функция get_header_image_tag — это полезный инструмент для добавления изображений заголовка на ваши страницы WordPress. Она позволяет легко вставлять изображения с нужными атрибутами, которые улучшают производительность и доступность вашего сайта.

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *