Как создать альтернативный текст изображения заголовка в пользовательской теме WordPress?

Я создаю собственную тему WordPress без плагинов. Изображение заголовка для каждой страницы может быть разным, поэтому я использую панель инструментов для назначения изображения и вызываю функцию «get_header_image()» в коде моей темы. Изображение заголовка отображается правильно, а альтернативный текст — нет.

Я написал следующий код:

function alt_text_display() {
    $header_id = get_header_image(get_the_ID());
    $alt = get_post_meta($header_id, 'wp_get_attachment_image_alt', true);
    echo $alt;
}

add_action( 'wp_enqueue_scripts', 'alt_text_display' );

Это не работает, вероятно, потому что get_header_iamge() не принимает аргументы, верно?

Мой HTML выглядит так:

    <div class="hero_container">
          <img src="<?php echo( get_header_image() ); ?>" class="hero">
     </div>

Я установил альтернативный текст изображения, когда загрузил его в медиатеку. Этот текст не отображается. Вместо этого отображается заголовок сайта. Как отобразить замещающий текст, установленный в медиатеке?


wordpress wordpress-theming accessibility alt
person bealearnscode    schedule 05.07.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, вы забыли добавить атрибут «alt» в html и вызвать функцию внутри него.

<div class="hero_container">
      <img src="<?php echo( get_header_image() ); ?>" alt="<?php display_alt_text(); ?>" class="hero">
 </div>

Или вы можете использовать wp_get_attachment_image внутри html для вывода изображения:

<?php echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "alt" => "My image alt text here" ) );  ?>
person Arturas    schedule 05.07.2019
comment
Здравствуйте, Артурас. Спасибо за ответ. Добавление тега alt в код темы перезапишет альтернативный текст, который я применил к изображению, когда загружал его в медиатеку. Я вижу, что мог бы быть более четким в своем вопросе. - person bealearnscode; 08.07.2019

arrow_upward
1
arrow_downward

Я понял. Вот моя пользовательская функция

function alt_text_display() {

        $data =  get_object_vars(get_theme_mod('header_image_data'));
        $image_id = is_array($data) && isset($data['attachment_id']) 
                    ? $data['attachment_id'] : false;

        if ($image_id) {

            $image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true);
            return image_alt;

        }

    }

    add_action( 'wp_enqueue_scripts', 'alt_text_display' );

Вот мой HTML:

<div class="hero_container">
                    <img src="<?php echo( get_header_image() ); ?>" alt="<?php echo( alt_text_display() ); ?>"  class="hero">
                </div>
person bealearnscode    schedule 08.07.2019