Фильтр wpseo_breadcrumb_output в плагине Yoast SEO предоставляет разработчикам мощный инструмент для кастомизации вывода хлебных крошек (breadcrumbs) на сайте WordPress. Хлебные крошки — это навигационные элементы, которые показывают пользователю путь от главной страницы до текущей, улучшая пользовательский опыт и SEO. По умолчанию Yoast SEO генерирует простой HTML-код, который может не соответствовать дизайну сайта или требованиям поисковых систем. С помощью этого фильтра вы можете полностью переопределить вывод и добавить, например, микроразметку schema.org, что повышает видимость сайта в результатах поиска Google.
Что делает фильтр wpseo_breadcrumb_output?
Этот фильтр позволяет перехватить и модифицировать HTML-код, который Yoast SEO генерирует для хлебных крошек. Он принимает два параметра:
$output— текущий HTML-код хлебных крошек, сгенерированный плагином.$presentation— объект, содержащий данные о хлебных крошках, включая массив$presentation->breadcrumbs, где хранятся элементы навигации.
Фильтр возвращает модифицированный HTML, который затем отображается на странице.
Разбор кода функции
Рассмотрим предоставленную функцию шаг за шагом:
1. Проверка наличия данных
add_filter('wpseo_breadcrumb_output', function ($output, $presentation) {
if (!isset($presentation->breadcrumbs) || !is_array($presentation->breadcrumbs)) {
return '<ul><li>Ошибка: хлебные крошки не найдены</li></ul>';
}Сначала проверяется, существует ли свойство $presentation->breadcrumbs и является ли оно массивом. Если данные отсутствуют или имеют неверный формат, функция возвращает сообщение об ошибке в виде упрощенного списка (<ul><li>). Это предотвращает сбои и обеспечивает базовую обратную связь.
2. Инициализация вывода
$breadcrumbs = $presentation->breadcrumbs;
$output = '<ul>';Массив хлебных крошек извлекается в переменную $breadcrumbs. Начало HTML-структуры (тег <ul>) задается для создания списка, который будет содержать все элементы навигации.
3. Цикл по элементам хлебных крошек
foreach ($breadcrumbs as $index => $crumb) {
$position = $index + 1;
$is_last = ($index === count($breadcrumbs) - 1);
$output .= '<li> itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"';
if ($is_last) {
$output .= ' aria-current="page"';
}
$output .= '>'; — Цикл foreach проходит по каждому элементу массива $breadcrumbs.
— Переменная $position определяет позицию элемента в цепочке (начиная с 1).
— Переменная $is_last проверяет, является ли текущий элемент последним в списке.
— Каждый элемент оборачивается в тег <li> с микроразметкой schema.org/ListItem, что помогает поисковым системам понять структуру навигации.
— Для последнего элемента добавляется атрибут aria-current="page", указывающий, что это текущая страница, что улучшает доступность.
4. Формирование ссылок и текста
if (isset($crumb['url']) && !$is_last) {
$output .= '<a href="' . esc_url($crumb['url']) . '" itemprop="item">';
$output .= '<span itemprop="name">' . esc_html($crumb['text']) . '</span>';
$output .= '</a>';
} else {
$output .= '<span itemprop="name">' . esc_html($crumb['text']) . '</span>';
} — Если элемент имеет URL и не является последним, создается гиперссылка (<a>) с использованием функции esc_url для безопасности.
— Текст элемента (значение $crumb['text']) оборачивается в <span> с атрибутом itemprop="name".
— Для последнего элемента ссылка не создается, отображается только текст, что соответствует SEO-рекомендациям (последнее звено не должно быть кликабельным).
5. Добавление позиции
$output .= '<meta itemprop="position" content="' . $position . '">';
$output .= '</li>';Метаданные с позицией элемента (itemprop="position") добавляются с помощью тега <meta>, что важно для микроразметки schema.org. Затем закрывается тег <li>.
6. Завершение и возврат
$output .= '</ul>';
return $output;После обработки всех элементов закрывается тег <ul>, и итоговый HTML возвращается.
7. Приоритет и параметры
}, 10, 2); — Число 10 — приоритет фильтра (по умолчанию, может быть изменен для управления порядком выполнения).
— Число 2 — количество передаваемых параметров ($output и $presentation).
Интеграция в шаблон
Чтобы отобразить кастомные хлебные крошки, добавьте следующий код в файл шаблона (например, header.php или кастомный шаблон):
<nav class="breadcrumbs" aria-label="Хлебные крошки" itemscope itemtype="http://schema.org/BreadcrumbList">
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb();
}
?>
</nav>Этот код создает контейнер с микроразметкой и вызывает функцию yoast_breadcrumb(), которая использует модифицированный вывод через фильтр.
SEO-преимущества
- Микроразметка schema.org: Улучшает понимание структуры сайта поисковиками, что может повысить видимость в результатах поиска.
- Доступность: Атрибут
aria-current="page"делает навигацию удобной для пользователей с экранными читалками. - Соответствие рекомендациям: Отсутствие ссылки на последнем элементе соответствует рекомендациям Google.
Пример итогового вывода
<nav class="breadcrumbs" aria-label="Хлебные крошки" itemscope itemtype="http://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/"><span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/blog/"><span itemprop="name">Блог</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" aria-current="page">
<span itemprop="name">Статья о фильтре</span>
<meta itemprop="position" content="3">
</li>
</ul>
</nav>Этот пример демонстрирует цепочку из трех элементов с правильной структурой и микроразметкой.
Заключение
Фильтр wpseo_breadcrumb_output предоставляет гибкость для кастомизации хлебных крошек в Yoast SEO, позволяя адаптировать их под дизайн сайта и требования SEO. Используйте этот подход для улучшения навигации и видимости вашего сайта в поисковых системах.
Отзывы