Я хочу исправить пропуски в уровнях заголовков в заголовке поста блога Hestia, но не знаю, как поступить [закрыто]

Вопрос или проблема

Я сделал аналогичное сообщение на форуме поддержки темы Hestia (https://wordpress.org/support/topic/heading-levels-skip-on-blog-posts-wcag-compliance-issue/)

Я фрилансер, который вносит некоторые исправления ADA/WCAG на сайте клиента, и я заметил, что есть проблемы с пропусками уровней заголовков в блоге. Возьмем, к примеру, HTML-код для заголовка блога:

<div class="col-md-10 col-md-offset-1 text-center">
    <h1 class="hestia-title entry-title">Никто не думает о желе</h1>
    <h4 class="author">
        Опубликовано <a href="https://www.adampierno.com/author/admin/" class="vcard author">
        <strong class="fn">админ</strong></a> <time class="entry-date published" datetime="2019-10-28T12:19:11-07:00" content="2019-10-28">28 октября 2019</time><time class="updated hestia-hidden" datetime="2019-10-26T12:26:11-07:00">28 октября 2019</time>
    </h4>
</div>

Как вы видите, он прыгает от h1 к h4, и мне нужно изменить этот h4 на h3, чтобы блоги соответствовали требованиям WCAG.

Эти уровни заголовков не редактируются через настройку темы, и хотя я нашел PHP-файл, в котором они “живут” (inc/views/blog/class-hestia-header-layout-manager.php), я не знаю, что делать дальше. Там есть сеть функций, обернутых в класс под названием Hestia_Header_Layout_Manager(). Код, который меня интересует для изменения уровней заголовков, находится в этой функции:

/**
     * Проверить, нужно ли отображать метаданные поста.
     *
     * @param string $header_layout макет заголовка.
     */
    private function maybe_render_post_meta( $header_layout ) {
        if ( ! is_single() ) {
            return '';
        }

        if ( class_exists( 'WooCommerce', false ) ) {
            if ( is_product() ) {
                return '';
            }
        }

        global $post;
        $post_meta_output="";
        $author_id        = $post->post_author;
        $author_name      = get_the_author_meta( 'display_name', $author_id );
        $author_posts_url = get_author_posts_url( get_the_author_meta( 'ID', $author_id ) );

        if ( 'default' === $header_layout ) {
            $post_meta_output .= '<h4 class="author">';
        } else {
            $post_meta_output .= '<p class="author meta-in-content">';
        }

        $post_meta_output .= apply_filters(
            'hestia_single_post_meta',
            sprintf(
                /* переводчики: %1$s - имя автора, обернутое в теги, %2$s - дата */
                esc_html__( 'Опубликовано %1$s на %2$s', 'hestia' ),
                /* переводчики: %1$s - имя автора, %2$s - ссылка на автора */
                sprintf(
                    '<a href="%2$s" class="vcard author"><strong class="fn">%1$s</strong></a>',
                    esc_html( $author_name ),
                    esc_url( $author_posts_url )
                ),
                $this->get_time_tags()
            )
        );
        if ( 'default' === $header_layout ) {
            $post_meta_output .= '</h4>';
        } else {
            $post_meta_output .= '</p>';
        }

        return $post_meta_output;
    }

Как уже упоминалось, это одна из нескольких взаимосвязанных функций в одном классе PHP.
Насколько я знаю, нет хуков, которые позволяют мне переопределить этот уровень заголовка с исправленной версией в дочерней теме, и я не знаю, как эффективно переопределить любую из функций, обернутых в Hestia_Header_Layout_Manager().

Не знаю, но у меня такое ощущение, что я заново придумываю колесо, просто чтобы изменить какой-то очень простой HTML. Есть ли легкое решение, которое я упускаю из виду?

Пожалуйста, дайте знать, если вам нужно увидеть больше этого PHP-документа — я не хотел публиковать его целиком из-за длины.

Спасибо!

Изменение: Документация Hestia по ее хукам находится здесь: https://demo.themeisle.com/hestia-pro/hook-locations/

Судя по всему, они только связаны с главной страницей, и они, похоже, не имеют никаких хуков, относящихся к блогам конкретно.

Ответ или решение

Для решения проблемы с пропусками уровней заголовков в заголовке блога на теме Hestia и обеспечения соответствия стандартам WCAG (Web Content Accessibility Guidelines), вам необходимо внести изменения в код PHP, который генерирует заголовки на страницах ваших постов. Рассмотрим последовательность действий, которые помогут вам достичь желаемого результата.

Анализ проблемы

Как вы указали, текущая реализация показывает заголовок первого уровня (h1) для названия поста и заголовок четвертого уровня (h4) для информации об авторе. Согласно рекомендациям WCAG, логическая последовательность заголовков должна быть соблюдена, и пропуски уровней недопустимы. Это означает, что вам необходимо изменить уровень заголовка с h4 на h3.

Изменение кода

Вы уже обнаружили, что соответствующий код находится в файле class-hestia-header-layout-manager.php, внутри метода maybe_render_post_meta(). Давайте рассмотрим, как внести необходимые изменения.

  1. Откройте файл class-hestia-header-layout-manager.php.

  2. Найдите метод maybe_render_post_meta(). Ваша задача — заменить строку, генерирующую h4, на h3.

Вот как выглядит актуальная часть кода:

if ( 'default' === $header_layout ) {
    $post_meta_output .= '<h4 class="author">';
} else {
    $post_meta_output .= '<p class="author meta-in-content">';
}
  1. Измените этот фрагмент на следующий:
if ( 'default' === $header_layout ) {
    $post_meta_output .= '<h3 class="author">';  // Изменение h4 на h3
} else {
    $post_meta_output .= '<p class="author meta-in-content">';
}
  1. Завершите код тем же образом, чтобы закрыть h3, если это необходимо:
if ( 'default' === $header_layout ) {
    $post_meta_output .= '</h3>';  // Закрываем h3 вместо h4
} else {
    $post_meta_output .= '</p>';
}

Применение изменений

После внесения изменений не забудьте сохранить файл и протестировать ваши посты, чтобы убедиться, что заголовки отображаются корректно и соответствуют требованиям WCAG.

Альтернативные решения

Если вы не хотите редактировать исходные файлы темы (что может быть потеряно при обновлении), вы можете создать дочернюю тему и переопределить нужную функцию. Однако, так как в вашем случае не существует хуков, позволяющих это сделать легко, редактирование исходного файла может быть наиболее приемлемым решением.

Заключение

Надеюсь, это руководство поможет вам исправить проблему с пропусками уровней заголовков на блоге вашего клиента. Убедитесь, что вы проверили свои изменения с помощью инструментов для проверки доступности, чтобы гарантировать полное соответствие стандартам WCAG. Если у вас возникнут дополнительные вопросы или потребуется дальнейшая помощь, не стесняйтесь обращаться!

Оцените материал
Добавить комментарий

Капча загружается...