Большинство официальных спецификаций (developers.google.com, schema.org) для хлебных крошек рекомендуют использовать html-структуру вида nav > ol > li > a
В плагине Yoast (на момент январь 2020) html-разметка сделана через теги <div>
и <p>
, ее мы и постараемся переделать.
// Yoast filters
if ( function_exists( 'yoast_breadcrumb' ) ) {
function wpseo_custom_breadcrumb_output_wrapper( $wrapper ) {
$wrapper = 'ol';
return $wrapper;
}
add_filter( 'wpseo_breadcrumb_output_wrapper', 'wpseo_custom_breadcrumb_output_wrapper' );
function wpseo_custom_breadcrumb_single_link_wrapper( $wrapper ) {
$wrapper = 'li';
return $wrapper;
}
add_filter( 'wpseo_breadcrumb_single_link_wrapper', 'wpseo_custom_breadcrumb_single_link_wrapper' );
}
Для начала добавьте этот код в файл functions.php, а лучше создайте отдельный файл yoast-fix.php с этим кодом и подключите в functions.php.
Первая функция изменит обертку контейнера breadcrumbs, вторая обертку ссылки.
Для вывода крошек во фронтенд вы можете воспользоваться следующей функцией:
// вешаем вывод крошек на before_site_content
add_action( 'before_site_content', 'skill_breadcrumbs', 10 );
if ( ! function_exists( 'skill_breadcrumbs' ) ) {
function skill_breadcrumbs() {
if ( !is_front_page() && !is_home() ) {
if ( function_exists('yoast_breadcrumb') ) {
$before = '<nav class="breadcrumbs" role="navigation" aria-label="breadcrumb">';
$after = '</nav>';
yoast_breadcrumb( $before, $after );
}
}
}
}
Она проверяет, что вывод находится не на главной странице и оборачивает крошки в тег <nav>
. На месте переменных $before
и $after
вы можете собрать любой контейнер в соответствии с вашей версткой.
Заметьте, что функция вывода в примере весит на хуке before_site_content
, который у вас может отсутствовать. В этом случае вам следует его изменить или создать в конце файла header.php.