flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180

Как сделать правильную html-разметку хлебных крошек Yoast

Большинство официальных спецификаций (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.

skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как правильно подключать стили и cкрипты в дочерней теме WordPress?

На эту тему написано уже десятки статей, но тема продолжается обсуждаться, а в чатах и на форумах люди снова и снова задают вопросы и сталкиваются с проблемами. Давайте вместе попробуем на примерах разобраться как же правильно подключать стили и скрипты в WordPress. Начнем по порядку. Есть хук wp_enqueue_scripts, который срабатывает в момент подключения в очередь…
Подробнее

Как изменить robots.txt в мультисайте WordPress

WordPress динамически создает robots.txt. Чтобы перезаписать его при обычной установке без использования нескольких сайтов, вы можете просто загрузить статический файл robots.txt на сервер. При установке системы мультисайтов это приведет к перезаписи файла robots.txt для всех сайтов, что не всегда является нужным результатом. В этой заметке мы обсудим, как можно изменить robots.txt для отдельных сайтов мультисайта….
Подробнее

Как создать AJAX-форму на WordPress без плагинов

WordPress имеет достаточно простую методологию обработки Ajax-запросов. Ajax-запросами называют такие запросы, которые происходят без перезагрузки страницы и в результате работа с сайтом становится быстрее и удобнее для конечного пользователя. Заранее оговорюсь, что в репозитории WordPress существуют десятки нормальных плагинов для работы с формами. С помощью них можно настроить поля, их валидацию, содержимое, интегрировать поддержку Ajax,…
Подробнее