Вопрос или проблема
Я сделал аналогичное сообщение на форуме поддержки темы 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()
. Давайте рассмотрим, как внести необходимые изменения.
-
Откройте файл
class-hestia-header-layout-manager.php
. -
Найдите метод
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">';
}
- Измените этот фрагмент на следующий:
if ( 'default' === $header_layout ) {
$post_meta_output .= '<h3 class="author">'; // Изменение h4 на h3
} else {
$post_meta_output .= '<p class="author meta-in-content">';
}
- Завершите код тем же образом, чтобы закрыть
h3
, если это необходимо:
if ( 'default' === $header_layout ) {
$post_meta_output .= '</h3>'; // Закрываем h3 вместо h4
} else {
$post_meta_output .= '</p>';
}
Применение изменений
После внесения изменений не забудьте сохранить файл и протестировать ваши посты, чтобы убедиться, что заголовки отображаются корректно и соответствуют требованиям WCAG.
Альтернативные решения
Если вы не хотите редактировать исходные файлы темы (что может быть потеряно при обновлении), вы можете создать дочернюю тему и переопределить нужную функцию. Однако, так как в вашем случае не существует хуков, позволяющих это сделать легко, редактирование исходного файла может быть наиболее приемлемым решением.
Заключение
Надеюсь, это руководство поможет вам исправить проблему с пропусками уровней заголовков на блоге вашего клиента. Убедитесь, что вы проверили свои изменения с помощью инструментов для проверки доступности, чтобы гарантировать полное соответствие стандартам WCAG. Если у вас возникнут дополнительные вопросы или потребуется дальнейшая помощь, не стесняйтесь обращаться!