Breadcrumbs wordpress

Зачем необходимо устанавливать плагин Breadcrumb NavXTПлагин Breadcrumb NavXT поможет создать на блоге хлебные крошки или навигационную цепочку ссылок на любой странице блога, включая главную, рубрик и меток. Зачем это делается? Такая навигационная цепочка поможет читателю понять, где он находиться, облегчиться его перемещение по блогу, а значит поможет ему найти необходимые материалы на блоге.

Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.

Установка плагина Breadcrumb NavXT и вывод хлебных крошек на блоге.


Плагин доступен к скачиванию по адресу — http://wordpress.org/extend/plugins/breadcrumb-navxt/, устанавливается на блог, но чтобы хлебные крошки заработали на блоге, необходимо внести изменения в код шаблона.

Определитесь, где должны отображаться хлебные крошки на блоге. В зависимости от принятого решения откройте на редактирование (рекомендую использовать программу NotePad++) такие файлы:

  • single.php — чтобы они выводились на странице одиночных заметок
  • archive.php — если желаете выводить хлебные крошки на страницах архивов
  • search.php — и крошки будут выводиться на страницах с результатами поиска
  • page.php —  навигационная цепочка будет размещена на страницах блога
  • category.php — если желаете выводить хлебные крошки на страницах рубрик и меток

В эти файлы или какой-то один файл вставьте этот код:

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

seomans.ru

Функция «хлебных крошек» для WordPress


<?php  /**  * Хлебные крошки для WordPress (breadcrumbs)  *  * @param string [$sep = ''] Разделитель. По умолчанию ' » '  * @param array [$l10n = array()] Для локализации. См. переменную $default_l10n.  * @param array [$args = array()] Опции. См. переменную $def_args  * @return string Выводит на экран HTML код  *  * version 3.3.2  */ function kama_breadcrumbs( $sep = ' » ', $l10n = array(), $args = array() ){ 	$kb = new Kama_Breadcrumbs; 	echo $kb->get_crumbs( $sep, $l10n, $args ); }  class Kama_Breadcrumbs {  	public $arg;  	// Локализация 	static $l10n = array( 		'home' => 'Главная', 		'paged' => 'Страница %d', 		'_404' => 'Ошибка 404', 		'search' => 'Результаты поиска по запросу - <b>%s</b>', 		'author' => 'Архив автора: <b>%s</b>', 		'year' => 'Архив за <b>%d</b> год', 		'month' => 'Архив за: <b>%s</b>', 		'day' => '', 		'attachment' => 'Медиа: %s', 		'tag' => 'Записи по метке: <b>%s</b>', 		'tax_tag' => '%1$s из "%2$s" по тегу: <b>%3$s</b>', 		// tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. 		// Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' 	);  	// Параметры по умолчанию 	static $args = array( 		'on_front_page' => true, // выводить крошки на главной странице 		'show_post_title' => true, // показывать ли название записи в конце (последний элемент).    
я записей, страниц, вложений 'show_term_title' => true, // показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс 'title_patt' => '<span class="kb_title">%s</span>', // шаблон для последнего заголовка. Если включено: show_post_title или show_term_title 'last_sep' => true, // показывать последний разделитель, когда заголовок в конце не отображается 'markup' => 'schema.org', // 'markup' - микроразметка. Может быть: 'rdf.data-vocabulary.org', 'schema.org', '' - без микроразметки // или можно указать свой массив разметки: // array( 'wrappatt'=>'<div class="kama_breadcrumbs">%s</div>', 'linkpatt'=>'<a href="%s">%s</a>', 'sep_after'=>'', ) 'priority_tax' => array('category'), // приоритетные таксономии, нужно когда запись в нескольких таксах 'priority_terms' => array(), // 'priority_terms' - приоритетные элементы таксономий, когда запись находится в нескольких элементах одной таксы одновременно. // Например: array( 'category'=>array(45,'term_name'), 'tax_name'=>array(1,2,'name') ) // 'category' - такса для которой указываются приор. элементы: 45 - ID термина и 'term_name' - ярлык. // порядок 45 и 'term_name' имеет значение: чем раньше тем важнее.
е указанные термины важнее неуказанных... 'nofollow' => false, // добавлять rel=nofollow к ссылкам? // служебные 'sep' => '', 'linkpatt' => '', 'pg_end' => '', ); function get_crumbs( $sep, $l10n, $args ){ global $post, $wp_query, $wp_post_types; self::$args['sep'] = $sep; // Фильтрует дефолты и сливает $loc = (object) array_merge( apply_filters('kama_breadcrumbs_default_loc', self::$l10n ), $l10n ); $arg = (object) array_merge( apply_filters('kama_breadcrumbs_default_args', self::$args ), $args ); $arg->sep = '<span class="kb_sep">'. $arg->sep .'</span>'; // дополним // упростим $sep = & $arg->sep; $this->arg = & $arg; // микроразметка --- if(1){ $mark = & $arg->markup; // Разметка по умолчанию if( ! $mark ) $mark = array( 'wrappatt' => '<div class="kama_breadcrumbs">%s</div>', 'linkpatt' => '<a href="%s">%s</a>', 'sep_after' => '', ); // rdf elseif( $mark === 'rdf.data-vocabulary.org' ) $mark = array( 'wrappatt' => '<div class="kama_breadcrumbs" prefix="v: http://rdf.data-vocabulary.org/#">%s</div>', 'linkpatt' => '<span typeof="v:Breadcrumb"><a href="%s" rel="v:url" property="v:title">%s</a>', 'sep_after' => '</span>', // закрываем span после разделителя! ); // schema.org elseif( $mark === 'schema.org' ) $mark = array( 'wrappatt' => '<.
follow ? str_replace('<a ','<a rel="nofollow"', $mark['linkpatt']) : $mark['linkpatt']; $arg->sep .= $mark['sep_after']."n"; } $linkpatt = $arg->linkpatt; // упростим $q_obj = get_queried_object(); // может это архив пустой таксы? $ptype = null; if( empty($post) ){ if( isset($q_obj->taxonomy) ) $ptype = & $wp_post_types[ get_taxonomy($q_obj->taxonomy)->object_type[0] ]; } else $ptype = & $wp_post_types[ $post->post_type ]; // paged $arg->pg_end = ''; if( ($paged_num = get_query_var('paged')) || ($paged_num = get_query_var('page')) ) $arg->pg_end = $sep . sprintf( $loc->paged, (int) $paged_num ); $pg_end = $arg->pg_end; // упростим $out = ''; if( is_front_page() ){ return $arg->on_front_page ? sprintf( $wrappatt, ( $paged_num ? sprintf($linkpatt, get_home_url(), $loc->home) . $pg_end : $loc->home ) ) : ''; } // страница записей, когда для главной установлена отдельная страница. elseif( is_home() ) { $out = $paged_num ? ( sprintf( $linkpatt, get_permalink($q_obj), esc_html($q_obj->post_title) ) .
g_end ) : esc_html($q_obj->post_title); } elseif( is_404() ){ $out = $loc->_404; } elseif( is_search() ){ $out = sprintf( $loc->search, esc_html( $GLOBALS['s'] ) ); } elseif( is_author() ){ $tit = sprintf( $loc->author, esc_html($q_obj->display_name) ); $out = ( $paged_num ? sprintf( $linkpatt, get_author_posts_url( $q_obj->ID, $q_obj->user_nicename ) . $pg_end, $tit ) : $tit ); } elseif( is_year() || is_month() || is_day() ){ $y_url = get_year_link( $year = get_the_time('Y') ); if( is_year() ){ $tit = sprintf( $loc->year, $year ); $out = ( $paged_num ? sprintf($linkpatt, $y_url, $tit) . $pg_end : $tit ); } // month day else { $y_link = sprintf( $linkpatt, $y_url, $year); $m_url = get_month_link( $year, get_the_time('m') ); if( is_month() ){ $tit = sprintf( $loc->month, get_the_time('F') ); $out = $y_link . $sep . ( $paged_num ? sprintf( $linkpatt, $m_url, $tit ) . $pg_end : $tit ); } elseif( is_day() ){ $m_link = sprintf( $linkpatt, $m_url, get_the_time('F')); $out = $y_link . $sep . $m_link . $sep . get_the_time('l'); } } } // Древовидные записи elseif( is_singular() && $ptype->hierarchical ){ $out = $this->_add_title( $this->_page_crumbs($post), $post ); } // Таксы, плоские записи и вложения else { $term = $q_obj; // таксономии // определяем термин для записей (включая вложения attachments) if( is_singular() ){ // изменим $post, чтобы определить термин родителя вложения if( is_attachment() && $post->post_parent ){ $save_post = $post; // сохраним $post = get_post($post->post_parent); } // учитывает если вложения прикрепляются к таксам древовидным - все бывает 🙂 $taxonomies = get_object_taxonomies( $post->post_type ); // оставим только древовидные и публичные, мало ли...
$taxonomies = array_intersect( $taxonomies, get_taxonomies( array('hierarchical' => true, 'public' => true) ) ); if( $taxonomies ){ // сортируем по приоритету if( ! empty($arg->priority_tax) ){ usort( $taxonomies, function($a,$b)use($arg){ $a_index = array_search($a, $arg->priority_tax); if( $a_index === false ) $a_index = 9999999; $b_index = array_search($b, $arg->priority_tax); if( $b_index === false ) $b_index = 9999999; return ( $b_index === $a_index ) ? 0 : ( $b_index < $a_index ? 1 : -1 ); // меньше индекс - выше } ); } // пробуем получить термины, в порядке приоритета такс foreach( $taxonomies as $taxname ){ if( $terms = get_the_terms( $post->ID, $taxname ) ){ // проверим приоритетные термины для таксы $prior_terms = & $arg->priority_terms[ $taxname ]; if( $prior_terms && count($terms) > 2 ){ foreach( (array) $prior_terms as $term_id ){ $filter_field = is_numeric($term_id) ? 'term_id' : 'slug'; $_t.
erm', $term ); // attachment if( is_attachment() ){ if( ! $post->post_parent ) $out = sprintf( $loc->attachment, esc_html($post->post_title) ); else { if( ! $out = apply_filters('attachment_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'self' ); $parent_tit = sprintf( $linkpatt, get_permalink($post->post_parent), get_the_title($post->post_parent) ); $_out = implode( $sep, array($_crumbs, $parent_tit) ); $out = $this->_add_title( $_out, $post ); } } } // single elseif( is_single() ){ if( ! $out = apply_filters('post_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'self' ); $out = $this->_add_title( $_crumbs, $post ); } } // не древовидная такса (метки) elseif( ! is_taxonomy_hierarchical($term->taxonomy) ){ // метка if( is_tag() ) $out = $this->_add_title('', $term, sprintf( $loc->tag, esc_html($term->name).
le( $_crumbs, $term, esc_html($term->name) ); } } } // влоежния от записи без терминов elseif( is_attachment() ){ $parent = get_post($post->post_parent); $parent_link = sprintf( $linkpatt, get_permalink($parent), esc_html($parent->post_title) ); $_out = $parent_link; // вложение от записи древовидного типа записи if( is_post_type_hierarchical($parent->post_type) ){ $parent_crumbs = $this->_page_crumbs($parent); $_out = implode( $sep, array( $parent_crumbs, $parent_link ) ); } $out = $this->_add_title( $_out, $post ); } // записи без терминов elseif( is_singular() ){ $out = $this->_add_title( '', $post ); } } // замена ссылки на архивную страницу для типа записи $home_after = apply_filters('kama_breadcrumbs_home_after', '', $linkpatt, $sep, $ptype ); if( '' === $home_after ){ // Ссылка на архивную страницу типа записи для: отдельных страниц этого типа; архивов этого типа; таксономий связанных с этим типом.
if( $ptype && $ptype->has_archive && ! in_array( $ptype->name, array('post','page','attachment') ) && ( is_post_type_archive() || is_singular() || (is_tax() && in_array($term->taxonomy, $ptype->taxonomies)) ) ){ $pt_title = $ptype->labels->name; // первая страница архива типа записи if( is_post_type_archive() && ! $paged_num ) $home_after = sprintf( $this->arg->title_patt, $pt_title ); // singular, paged post_type_archive, tax else{ $home_after = sprintf( $linkpatt, get_post_type_archive_link($ptype->name), $pt_title ); $home_after .= ( ($paged_num && ! is_tax()) ? $pg_end : $sep ); // пагинация } } } $before_out = sprintf( $linkpatt, home_url(), $loc->home ) . ( $home_after ? $sep.$home_after : ($out ? $sep : '') ); $out = apply_filters('kama_breadcrumbs_pre_out', $out, $sep, $loc, $arg ); $out = sprintf( $wrappatt, $before_out . $out ); return apply_filters('kama_breadcrumbs', $out, $sep, $loc, $arg ); } function _page_crumbs( $post ){ $parent = $post->post_parent; $crumbs = array(); while( $parent ){ $page = get_post( $parent ); $crumbs[] = sprintf( $this->arg->linkpatt, get_permalink($page), esc_html($page->post_title) ); $parent = $page->post_parent; } return implode( $this->arg->sep, array_reverse($crumbs) ); } function _tax_crumbs( $term, $start_from = 'self' ){ $termlinks = array(); $term_id = ($start_from === 'parent') ? $term->parent : $term->term_id; while( $term_id ){ $term = get_term( $term_id, $term->taxonomy ); $termlinks[] = sprintf( $this->arg->linkpatt, get_term_link($term), esc_html($term->name) ); $term_id = $term->parent; } if( $termlinks ) return implode( $this->arg->sep, array_reverse($termlinks) ) /*. $this->arg->sep*/; return ''; } // добалвяет заголовок к переданному тексту, с учетом всех опций. Добавляет разделитель в начало, если надо. function _add_title( $add_to, $obj, $term_title = '' ){ $arg = & $this->arg; // упростим... $title = $term_title ? $term_title : esc_html($obj->post_title); // $term_title чиститься отдельно, теги моугт быть... $show_title = $term_title ? $arg->show_term_title : $arg->show_post_title; // пагинация if( $arg->pg_end ){ $link = $term_title ? get_term_link($obj) : get_permalink($obj); $add_to .= ($add_to ? $arg->sep : '') . sprintf( $arg->linkpatt, $link, $title ) . $arg->pg_end; } // дополняем - ставим sep elseif( $add_to ){ if( $show_title ) $add_to .= $arg->sep . sprintf( $arg->title_patt, $title ); elseif( $arg->last_sep ) $add_to .= $arg->sep; } // sep будет потом... elseif( $show_title ) $add_to = sprintf( $arg->title_patt, $title ); return $add_to; } } /** * Изменения: * 3.3 - новые хуки: attachment_tax_crumbs, post_tax_crumbs, term_tax_crumbs. Позволяют дополнить крошки таксономий. * 3.2 - баг с разделителем, с отключенным 'show_term_title'. Стабилизировал логику. * 3.1 - баг с esc_html() для заголовка терминов - с тегами получалось криво... * 3.0 - Обернул в класс. Добавил опции: 'title_patt', 'last_sep'. Доработал код. Добавил пагинацию для постов. * 2.5 - ADD: Опция 'show_term_title' * 2.4 - Мелкие правки кода * 2.3 - ADD: Страница записей, когда для главной установлена отделенная страница. * 2.2 - ADD: Link to post type archive on taxonomies page * 2.1 - ADD: $sep, $loc, $args params to hooks * 2.0 - ADD: в фильтр 'kama_breadcrumbs_home_after' добавлен четвертый аргумент $ptype * 1.9 - ADD: фильтр 'kama_breadcrumbs_default_loc' для изменения локализации по умолчанию * 1.8 - FIX: заметки, когда в рубрике нет записей * 1.7 - Улучшена работа с приоритетными таксономиями. */

Вставлять этот код нужно в файл шаблона functions.php или непосредственно в тот файл где вызывается функция.

Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:

<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(); ?>

Если нужно поменять разделитель между ссылками, укажите первый параметр:

<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' » '); ?>

меню

Примеры использование фильтров

#1 Установка параметров через фильтр

Измени дефолтные параметры через фильтр

add_filter('kama_breadcrumbs_default_args', function($args){ 	$args['on_front_page'] = 0; 	$args['show_post_title'] = ''; 	$args['priority_tax'] = array('mytax'); 	return $args; } );

Если установить параметры при вызове функции в третьем аргументе функции, то они перебьют параметры указанные в фильтре…

#3 Пример перевода крошек на английский

Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:

Вариант 1

При вызове функции нужно указать строки локализации так:

// Локализация if( function_exists('kama_breadcrumbs') ){  	$myl10n = array( 		'home' => 'Front page', 		'paged' => 'Page %d', 		'_404' => 'Error 404', 		'search' => 'Search results by query - <b>%s</b>', 		'author' => 'Author archve: <b>%s</b>', 		'year' => 'Archive by <b>%d</b> год', 		'month' => 'Archive by: <b>%s</b>', 		'day' => '', 		'attachment' => 'Media: %s', 		'tag' => 'Posts by tag: <b>%s</b>', 		'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', 		// tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'.  		// Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' 	);  	kama_breadcrumbs(' » ', $myl10n );  }
Вариант 2

C версии 1.9. Можно использовать хук kama_breadcrumbs_default_loc, чтобы для каждого вызова одно и тоже не указывать. Для этого рядом с исходным кодом крошек добавьте такой хук:

add_filter('kama_breadcrumbs_default_loc', function($l10n){ 	// Локализация 	return array( 		'home' => 'Front page', 		'paged' => 'Page %d', 		'_404' => 'Error 404', 		'search' => 'Search results by query - <b>%s</b>', 		'author' => 'Author archve: <b>%s</b>', 		'year' => 'Archive by <b>%d</b> год', 		'month' => 'Archive by: <b>%s</b>', 		'day' => '', 		'attachment' => 'Media: %s', 		'tag' => 'Posts by tag: <b>%s</b>', 		'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', 		// tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'.  		// Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' 	); });

Далее, используйте вызов в шаблоне как обычно, крошки будут переведены на англ.:

function_exists('kama_breadcrumbs') && kama_breadcrumbs();

#3 Добавление произвольной ссылки в начало крошек

Допустим нам нужно добавить после пункта «Главная» ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).

Для этого добавьте такой хук рядом с кодом крошек:

add_action('kama_breadcrumbs_home_after', 'my_breadcrumbs_home_after', 10, 4); function my_breadcrumbs_home_after( $false, $linkpatt, $sep, $ptype ){ 	// если мы в рубрике с ID 5 или в дочерней рубрике, 	// то дополним начало крошек ссылкой на страницу с ID 7 	$qo = get_queried_object(); 	if( is_category() && ( $qo->term_id == 5 || $qo->parent == 5 ) ){ 		$page = get_post( 7 ); 		return sprintf( $linkpatt, get_permalink($page), $page->post_title ) . $sep; 	}  	return $false; }

#4 Добавление еще таксономий в крошки

По умолчанию в крошках обрабатывается только одна таксономи. Но иногда нужно несколько, для этого в версии 3.3 я вставил хуки: 'attachment_tax_crumbs', 'post_tax_crumbs', 'term_tax_crumbs'.

Допустим, у нас есть тип записи realty и 3 таксы для него: country, type_deal, type_realty. Нужно, чтобы у страницы записи в крошках отображались все таксы в указанном порядке. Также нужно, чтобы на каждой странице таксы указывались все предыдущие таксы и текущая в указанном порядке: country > type_deal > type_realty

// apply_filters('term_tax_crumbs', '', $term, $that ); add_filter('term_tax_crumbs', 'more_tax_crumbs', 10, 3); add_filter('post_tax_crumbs', 'more_tax_crumbs', 10, 3); function more_tax_crumbs( $empty, $term, $that ){ 	$is_post_filter = doing_filter('post_tax_crumbs'); // else 'term_tax_crumbs'  	if( ( $is_post_filter && is_singular('realty') ) || is_tax('country') ){ 		global $post;  		$out = '';  		$out = $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // базовая такса - country  		// тип сделки 		$term = get_query_var('type_deal'); 		if( $term && ($term = get_term_by('slug', $term, 'type_deal')) ) 			$out .= $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // тип сделки  		// тип недвижимости 		$term = get_query_var('type_realty'); 		if( $term && ($term = get_term_by('slug', $term, 'type_realty')) ){ 			// запись 			if( $is_post_filter ){ 				$_crumbs = $that->_tax_crumbs( $term, 'self' ); 				$out .= $that->_add_title( $_crumbs, $post );  			} 			// такса 			else { 				$_crumbs = $that->_tax_crumbs( $term, 'parent' ); 				$out .= $that->_add_title( $_crumbs, $term, esc_html($term->name) );  			}  		}  		return $out; 	}  	return $empty; } 

меню

wp-kama.ru

Как сделать хлебные крошки  в WordPress

Есть несколько путей решения данной задачи.

1. С помощью функции плагина Yoast WordPress SEO

Если вы пользуетесь плагином Yoast WordPress SEO, то у вас есть возможность сделать хлебные крошки для сайта с его помощью, подробно этот плагин я разбирал в этой теме. Для этого достаточно  лишь зайти на страницу Хлебные крошки в настройках плагина, и там увидите код, который нужно скопировать и вставить в нужное место:

[php]
< ?php if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb(‘

‘,»);
} ?>
[/php]

Я использую именно этот способ. Код вставил в файл single.php темы оформления, в самом верху страницы.  Если вас не устраивает внешний вид крошек, то можете задать им свои css-стили, для них присваивается идентификатор #breadcrumbs которому и можем прописывать все что душа пожелает.

Внимание. Если вы новичок, то перед внесением изменений в файлы WordPressa, советую всегда делать их резерные копии, на всякий случай) В данном случае скопируйте и сохраните на компьютере single.php перед изменением.

2. Плагин Breadcrumb NavXT

Если вы не используете Yoast WordPress SEO то можете просто установить отдельный плагин для хлебных крошек. К таким плагинам относится Breadcrumb NavXT но можете использовать и аналоги .

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

Я предлагаю и тут разместить код в файл single.php   Мы размещаем навигацию в самом верху контейнера, отвечающего за вывод страниц с записью на экран.  Как правило эти контейнеры называются <div id=»container»> или <div id=»content»> или что-то похожее, все зависит от вашей темы, сразу после них и вставляем.  Вот и сам код:

[php]</pre>
<div>< ?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?></div>
<pre>
[/php]

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

3. Хлебные крошки с помощью хаков в WordPress

Вы можете внести самостоятельно нужный код в функции вашей темы — файл functions.php  и вызвать крошки там, где вам нужно без всяких плагинов.

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

В сети присутствует немало разных хаков с вариантами хлебных крошек.

Один из лучших вариантов на мой взгляд это скрипт от dimox. Разрешение на размещение скрипта от автора получено, так что выкладываю:

[php]
function dimox_breadcrumbs() {

/* === ОПЦИИ === */
$text[‘home’] = ‘Главная’; // текст ссылки "Главная"
$text[‘category’] = ‘Архив рубрики "%s"’; // текст для страницы рубрики
$text[‘search’] = ‘Результаты поиска по запросу "%s"’; // текст для страницы с результатами поиска
$text[‘tag’] = ‘Записи с тегом "%s"’; // текст для страницы тега
$text[‘author’] = ‘Статьи автора %s’; // текст для страницы автора
$text[‘404’] = ‘Ошибка 404’; // текст для страницы 404

$showCurrent = 1; // 1 — показывать название текущей статьи/страницы, 0 — не показывать
$showOnHome = 0; // 1 — показывать "хлебные крошки" на главной странице, 0 — не показывать
$delimiter = ‘ » ‘; // разделить между "крошками"
$before = »; // тег перед текущей "крошкой"
$after = »; // тег после текущей "крошки"
/* === КОНЕЦ ОПЦИЙ === */

global $post;
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = »;
$linkAfter = »;
$linkAttr = ‘ rel="v:url" property="v:title"’;
$link = $linkBefore . ‘
if (is_home() || is_front_page()) {

if ($showOnHome == 1) echo ‘</pre>
<div id="crumbs"><a href="’ . $homeLink . ‘">’ . $text[‘home’] . ‘</a></div>
<pre>’;

} else {

echo ‘</pre>
<div id="crumbs">’ . sprintf($link, $homeLink, $text[‘home’]) . $delimiter;

if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(», false)) . $after;

} elseif ( is_search() ) {
echo $before . sprintf($text[‘search’], get_search_query()) . $after;

} elseif ( is_day() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;

} elseif ( is_month() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo $before . get_the_time(‘F’) . $after;

} elseif ( is_year() ) {
echo $before . get_the_time(‘Y’) . $after;

} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}

} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;

} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;

} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo $delimiter; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif ( is_tag() ) { echo $before . sprintf($text[‘tag’], single_tag_title(», false)) . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;

} elseif ( is_404() ) {
echo $before . $text[‘404’] . $after;
}

if ( get_query_var(‘paged’) ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;
}

echo ‘</div>
<pre>’;

}
} // end dimox_breadcrumbs()
[/php]

Вставлять данный код нужно, как вы уже догадались, в functions.php вашего шаблона (не забываем делать резервную копию) в любое место между  <?php  и  ?>  (Для новичков - копировать левую колонку с цифрами не нужно, они лишь для удобства, показывают номер строки кода на блоге)  Как вы заметили, в строчках с 3 по 16ю идут настройки скрипта, которые вы можете менять по своему усмотрению. И теперь для вывода навигации делаем уже знакомую процедуру - вставляем в single.php следующий код:

[php]
< ?php if (function_exists(‘dimox_breadcrumbs’)) dimox_breadcrumbs(); ?>
[/php]

Сам скрипт проверил, все отлично работает, так что если вы предпочитаете обходиться без плагинов, то этот вариант для вас. Теперь вы знаете, что такое хлебные крошки, для чего они нужны, и как их сделать для своего блога на WordPress. А если нет, то перечитайте все сначала :) Если после 2-3 прочтений вы что-то так и не поняли, то задавайте вопросы в комментариях, постараюсь помочь) Думаю этот гусь тоже не отказался бы от хлебных крошек, глядишь не такой злой был бы :) 

ruskweb.ru

Значение и пример хлебных крошек

Для того чтоб вы имели представление о том, как выглядят хлебные крошки на сайте, приведу пример со своего блога:

пример хлебных крошек

Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.

Чаще всего такую цепочку можно найти под шапкой сайта, непосредственно перед заголовком статьи.

Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: Главная страница -> Раздел -> Название статьи. Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: Главная страница –> Раздел –> Подраздел –> Название статьи.

Кроме навигации по сайту, в SEO хлебные крошки также играют не последнюю роль. Они улучшают юзабилити сайта, перелинковку, также иногда они могут попасть в сниппет. Это позволит повысить кликабельность в выдаче, а также поможет поисковикам быстрее распознать структуру вашего ресурса. Для этого нужна микроразметка хлебных крошек. О том, как ее сделать, поговорим ниже.

Хлебные крошки: как сделать на своем блоге?

Для того чтоб добавить на Вордпресс хлебные крошки, можно использовать плагин, либо написать необходимый код для их вывода.

Для начала рассмотрим, как вывести хлебные крошки с php-кодом. Сразу скажу, что ниже будет приведен этот же код, но с элементами микроразметки, советую сразу взять его.

Вот образец кода, который нужно вставить в файл functions.php:

Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.

Далее для вывода хлебных крошек на странице добавьте следующий код в single.php или header.php в зависимости от вашего шаблона и места, где вы хотите распложить этот функционал:

После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в styles.css такой код:

Тут указаны цвет и размеры шрифтов, отступы, цвет ссылок при наведении курсора и без него. Все эти значения вы можете заменять своими, экспериментировать.

Хлебные крошки на WordPress: плагин

Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.

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

После установки в настройках вы сможете задать вариант пути (рубрики, даты, метки), максимальную длину заголовка, символы между разделами. Кроме того, можно отключить вывод названия страницы, на которой находится посетитель, чтобы не дублировать заголовок статьи. Для того чтобы хлебные крошки отображались на странице, вам опять-таки нужно прописать код в файле single.php или header.php.

Внести изменения в стили можно по аналогии с тем, как это было описано выше.

Микроразметка хлебных крошек

Мы уже говорили о том, насколько важна микроразметка сайта. Хлебные крошки в сниппете моего блога выглядят так:

Хлебные крошки в сниппете

Такой вид более понятен и приятен для пользователя, нежели просто url страницы.

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

Если поисковики не распознали хлебные крошки, тогда им нужно помочь. На своем блоге я использую код, приведенный в начале статьи. В него я добавила элементы микроразметки. Если вы тоже выводите хлебные крошки php-кодом, можете заменить свой код на этот:

Делать микроразметку для навигационной цепочки, созданной с помощью плагина, я не пробовала. Но, думаю, это не сложно. Можно по-аналогии с моим кодом видоизменить код плагина. Давайте разберем приведенный код.

Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="https://data-vocabulary.org/Breadcrumb".

itemprop="url" – определяет значение url, его нужно добавить в каждый тег a

itemprop="title – определяет значение заголовка элемента цепочки

Весь код оборачивается в div с параметром xmlns:v="https://rdf.data-vocabulary.org/#">, чтобы подключить словарь schema.org.

После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.

Если у вас возникнут дополнительные вопросы по теме данной статьи, обязательно спрашивайте в комментариях.

Напоследок предлагаю посмотреть видео о внутренней перелинковке.

pro-wordpress.ru

Хлебные крошки на сайте — что это и зачем они нужны?

Сейчас немного отвлечемся. Вы читали в детстве сказки братьев Гримм? По сюжету одной из них брат и сестра Гензель и Грета по настоянию злой мачехи были отправлены в лес с целью их там оставить по причине голодного времени и невозможностью их прокормить (неправда ли, жестокая история реальной жизни, актуальная кое-где и в наши дни?).

Однако, брат успел собрать камешки и разбросать их по пути следования, таким образом они сумели найти дорогу домой. А вот когда история повторилась и брат с сестрой снова были отправлены в лес, Гензель не сумел собрать камешки и пришлось ему использовать хлебные крошки, чтобы отметить путь. Но, к сожалению, лесные птицы всех их склевали, что, сами понимаете, привело к печальному итогу, дети не смогли найти обратную дорогу.

Закончилось, конечно все счастливым исходом, как и полагается в сказках, но мне одно непонятно, почему же тогда навигация сайта или блога, которая призвана облегчить читателям путешествие по нему, вдруг ассоциируется с хлебными крошками? Ведь дети не смогли отыскать по ним дорогу домой, тогда уж лучше подошли бы камешки. Камешки WordPress, неплохо звучит?

Ну ладно, это все лирика, хотя отвлечься иногда не мешает. Теперь перехожу к собственно теме сегодняшней статьи. Я не случайно начал с этого, ведь, действительно, отличная навигация по сайту способствует тому, что посетители задерживаются на нем подолгу.

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

Итак, мы выяснили, что одной из задач, которую в нашем случае с успехом выполняет плагин Breadcrumb NavXT, является оптимизация навигации. Но есть и другая миссия, о которой я уже упомянул, и сейчас расскажу немного подробнее.

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

Полезна такая стратегия и для коммерческих ресурсов (скажем, интернет-магазинов), которые благодаря ей приобретают не просто новых посетителей, но клиентов, готовых немедленно платить (ведь НЧ запросы подразумевают чаще всего конкретику).

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

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

А для этого необходимо привлечь все возможные методы, которые включают, например, вывод похожих записей в конце статей (в качестве инструмента можно применить WordPress Related Posts либо то же самое осуществить без плагина). Ну и хлебные крошки, которые активирует плагин Breadcrumb NavXT, вполне могут поучаствовать в этой «глобальной» перелинковке.

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

Установка плагина Breadcrumb в WordPress и редактирование крошек

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

Наиболее удобный способ установить плагин Breadcrumb через админку Вордпресс. Для продвинутых пользователей может быть актуальным другой вариант, связанный с загрузкой распакованного архива расширения посредством софта, например, того же менеджера Файлзилла, но не суть. Кстати, скачать Breadcrumb NavXT можно отсюда.

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

«>

Всё это вы сможете сразу проанализировать и принять решение о целесообразности использования любого выбранного вами плагина. Это тоже надо иметь ввиду.

Чтобы после установки и активации расширение сразу начало функционировать, потребуется вставить код вызова Breadcrumb NavXT в нужные шаблоны темы Вордпресс, отвечающие за отображение статических страниц и статей. Вот этот код:

<div class="breadcrumb">  <?php  if(function_exists('bcn_display'))  {   bcn_display();  }  ?>  </div>

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

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

Итак, вывод страничек записей (примером может служить данная статья) осуществляется обычно посредством файла single.php, а статических страниц (например, «О блоге») — page.php. В каждый из этих шаблонов следует вставить приведенный выше фрагмент. Для этого вам следует отыскать строчку с функцией вызова хидера (шапки) сайта:

<?php get_header(); ?>

И вставить код сразу под ней. Получится примерно так:

<?php get_header(); ?>  <div class="breadcrumb">  <?php  if(function_exists('bcn_display'))  {  	bcn_display();  }  ?>  </div>

Конечно, если вы желаете разместить крошки еще, скажем, и в рубриках, то этот же код вам нужно будет поместить в шаблоне category.php (либо в archive.php в зависимости от темы).

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

«>

Для некоторой коррекции внешнего вида хлебных крошек можно добавить некоторые свойства каскадных таблиц стилей CSS для класса «breadcrumb» в файл style.css темы, например, такие:

.breadcrumb {  font:15px "Trebuchet MS", Verdana, Arial;  padding-bottom: 10px;  line-height:1.5;  }  .breadcrumb a {  color: #1B7499;  }  .breadcrumb a:hover {  color: #EF0E0E;  }  

Здесь цвет ссылки (.breadcrumb a) и ее окраска при наведении курсора (.breadcrumb a:hover) определяется параметром свойства color. После применения этих правил навигационная цепочка будет выглядеть вот таким образом:

«>

Конечно, ее надо бы еще существенно укоротить, поскольку она слишком длинная, да к тому же присутствие ключевых слов в названии статьи может оказаться лишним. Возможно, при наличии разметки на страницах сайта это не будет переспамом в глазах поисковиков, но лучше все же подстраховаться. Да и длинная цепочка не прибавляет хлебным крошкам привлекательности. Желательно уместить все в одну строчку, сейчас и попробуем это сделать.

Эту задачу можно спокойно решить, проставив галочку в настройках, о которых мы еще дальше поговорим. Но есть более изысканное решение с привлечением соответствующих стилей, которые нужно прописать в том же файле style.css вашей темы WordPress:

.breadcrumb span[property="name"] {   display: inline-block;   padding: 0;   margin-top: -3px;   vertical-align: middle;   max-width: 230px;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis;  }

Надо сказать, что в последней версии плагина Breadcrumb учтены уже все современные требования, в том числе касающиеся SEO продвижения. Поэтому в коде хлебных крошек внедрена разметка Schema.org, наличие которой, возможно, уже в недалеком будущем будет положительно влиять на ранжирование страниц сайта в поисковой выдаче.

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

«>

Но можно пойти еще дальше. Например, чтобы отобразить полностью текст ссылки в цепочке навигации при наведении на него курсора, снимем с него ограничение длины с помощью свойства max-width: none (это правило тоже нужно внедрить в style.css):

.breadcrumb span[property="name"]:hover {   max-width: none;  }

Теперь, если вы наведете курсор мышки на содержание любой ссылки, ее текст отобразится полностью во всей своей красе:

«>

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

goldbusinessnet.com

Хотели бы вы вывести хлебные крошки на своем WordPress? Иерархическая навигация — это дополнительная система навигации, которая сообщает пользователю о том, где именно на данный момент он находится на сайте относительно главной страницы. В сегодняшней статье мы покажем вам как вывести ссылки иерархической навигации (хлебные крошки) в WordPress.

breadcrumb-example[1]

Что такое хлебные крошки и зачем они вам нужны?

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

Хлебные крошки отличаются от стандартной системы навигации меню в WordPress.

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

Поисковые системы вроде Google уже начали отображать хлебные крошки под названием сайта в результатах поиска. Это позволит вашему сайту стать более заметным в поисковой выдаче и повысит ваш процент кликабельности. Подробнее об этом можно прочитать в официальной справке Google, потому как всё не так просто, как может показаться на первый взгляд. Не всегда Google может принять решение о том, что нужно отобразить крошки в выдаче именно для вашего сайта.

breadcrumbs-seo[1]

Давайте теперь посмотрим как же добавить хлебные крошки в WordPress.

Добавляем хлебные крошки с помощью плагина Breadcrumb NavXT

Это, по сути, самый простой способ добавления хлебных крошек на WordPress сайт. Он очень гибкий, простой в использовании, и содержит такое количество опций, что вы дажене сможете себе представить.

Первым делом вам необходимо установить и активировать плагин Breadcrumb NavXT. После активации переходим на страницу Настройки » Breadcrumb NavXT для конфигурации настроек плагина.

breadcrumbnavxt-settings[1]

Настройки по-умолчанию должны сработать для большинства сайтов. Однако, вы можете вносить свои изменения для кастомизации на своё усмотрение.

Страница настроек разделена на две различные секции. На вкладке general вы можете определить общее поведение плагина на вашем сайте.

Здесь можно изменить шаблон хлебных крошек. Вы также можете заметить, что эти ссылки шаблонов используют параметры Schema.org в тегах ссылок.

Вкладка post types под настройками плагина позволит вам настроить ссылки хлебных крошек для записей, страниц и любых произвольных типов записей.

Вы можете выбрать как вы хотите отображать иерархию записей. По-умолчанию плагин будет использовать Название сайта > Рубрика > Заголовок записи. Вы можете заменить рубрики на теги, даты или родительские записи.

Вкладка taxonomies и authors содержат схожие шаблоны для ваших ссылок хлебных крошек.

Не забудьте нажать на кнопку сохранения изменений как только закончите настройку.

Выводим Breadcrumb NavXT на своем сайте

Этот плагин предполагает редактирование файлов вашей темы. Вам нужно добавить следующий код в файл header.php вашей или дочерней темы в то место, где вам нужно вывести навигацию по хлебным крошкам.

  <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">   <?php if(function_exists('bcn_display'))   {   bcn_display();   }?>  </div>  

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

Добавляем хлебные крошки с помощью плагина Yoast SEO

Первым делом вам необходимо установить и активировать плагин Yoast SEO.

После активации переходим на страницу SEO » Advanced и отмечаем галочкой опцию ‘Enable breadcrumbs’.

yoastbreadcrumb-1[1]

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

После окончания настройки нажмите на кнопку сохранения изменений.

Выводим хлебные крошки от Yoast на своем сайте

Некоторые темы WordPress уже имеют поддержку хлебных крошек Yoast «из коробки». Можно перейти на свой сайт, открыть любую запись или страницу и посмотреть, отобразит ли ваша тема хлебные крошки.

Если же тема не делает этого автоматически, тогда вам понадобится добавить небольшой сниппет кода в свою тему WordPress.

Просто добавляем следующий код в свою или дочернюю тему в файл header.php. Код следует поместить в конце файла.

  <?php if ( function_exists('yoast_breadcrumb') )  {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>  

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

Мы надеемся, что эта статья помогла вам вывести хлебные крошки на своем WordPress сайте.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

wpincode.com

Для чего нужны хлебные крошки на сайте

Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:

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

Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами  — совсем другое дело. Плюс в интернет-магазинах он тоже отлично смотрится.

Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте условные операторы. Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.

Breadcrumbs wordpress

Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить. 

Плагины и хлебные крошки в WordPress

Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.

Breadcrumbs wordpress

Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:

Yoast SEO

Breadcrumbs wordpress

Основная задача модуля, в принципе, никак не связана с нашей сегодняшней темой, но не упомянуть его нельзя. Одна из дополнительных фишек плагина Yoast SEO — хлебные крошки. То есть вам не придется устанавливать новый модуль, а просто активируете соответствующую опцию. В работе я использую именно этот вариант.

Breadcrumb NavXT

Breadcrumbs wordpress

Breadcrumb NavXT — самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.

Breadcrumb

Breadcrumbs wordpress

В принципе, сложно найти решения, которые были бы интереснее предыдущих двух, хотя есть неплохие попытки. Так, например, в модуле Breadcrumb для WordPress внедрена поддержка шорткодов, плюс сама цепочка ссылок имеет оригинальное оформление (смотрите по ссылке Live Demo!»). Непонятно только поддерживаются ли дизайны в бесплатной версии. Также вы можете настраивать тип разделителя и добавлять текст в начале элемента. По словам разработчиков скрипт максимально простой и легкий.

Prime Strategy Bread Crumb

Breadcrumbs wordpress

Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы Prime Strategy Bread Crumb обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками. 

Хлебные крошки в Yoast SEO

Я не буду детально описывать все тонкости работы, почитать об этом можете в обзоре SEO by Yoast, сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.

После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:

Breadcrumbs wordpress

Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).

Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:

Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.

Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:

Breadcrumbs wordpress

То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации.

Плагин Breadcrumb NavXT для WordPress

Также при создании хлебных крошек под Вордпресс используется планин Breadcrumb NavXT. Модуль обладает хорошей функциональностью, о которой я частично упоминал выше, плюс содержит много интересных опций. Разобраться в нем сможет практически каждый пользователь и легко поменять нужные настройки элемента навигации.

Устанавливаете плагин через админку либо скачиваете с официального репозитория. Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.

Breadcrumbs wordpress

Здесь есть 4 закладки параметров:

  • В «Основных» можно выбрать тип разделителя, убрать линк на главную и настроить показ текущей страницы. Формат строки задается через шаблоны.
  • «Записи» — содержит опции для постов.
  • «Таксономии» — отвечают за метки / категории.
  • «Другое» — форматы страниц автора, архивов, 404 ошибки.

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

После указания параметров хлебных крошек Breadcrumbs в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:

Аналогично работе с Yoast SEO выбор места размещения кода зависит от установленной темы. Если предполагается вывод блока в шапке, тогда используете header.php. Учитывая то, что этот файл общий для всех страниц макета, увидите цепочку ссылок на каждой из них. Также можно показывать элемент только в избранных разделах — в таком случае вставляете код в single.php, page.php, archive.php и т.п. В целом, Breadcrumb NavXT — неплохой инструмент. 

Хлебные крошки в WordPress без плагина

Допускается реализация функции Breadcrumbs в WordPress без плагинов. Однако перед тем как перейти к описанию разных вариантов, я выскажу свое субъективное мнение почему это не лучшая идея:

  • Интеграция наверняка вызовет сложности у начинающих пользователей.
  • Редактирование параметров непосредственно в коде не особо наглядно — задание шаблонов отображения через админку куда удобнее нежели правка напрямую.
  • Модули имеют больше возможностей — взять хотя бы локализацию, поддержку Schema.org, виджеты.
  • Не все коды, найденные в сети, актуальны, корректны и регулярно обновляются, в то время когда, как минимум, Yoast SEO и Breadcrumb NavXT в WordPress стабильно работают.

Если честно не думаю, что создание хлебных крошек в Вордпресс без плагина принесет вам серьезный прирост производительности. Да, если вы крутой веб-разработчик, создаете проект для себя, то вполне можно обойтись «чистым кодом», во всех остальных случаях готовый модуль намного проще.

Одно из самых компактных и плюс-минус актуальных решений найдено тут. Первым делом вы добавляете новую пользовательскую функцию get_breadcrumb() в файл functions.php:

Затем в макете отображения постов single.php или любом другом вызываете ее:

Также автор предлагает парочку стилей оформления:

В итоге получите что-то вроде:

Breadcrumbs wordpress

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

Как убрать хлебные крошки в WordPress

В принципе, эта задача обратная к процессу установки элемента. Поэтому перед тем как его отключить нужно понять как именно все реализовано в вашем конкретном случае. Алгоритм приблизительно следующий:

  1. Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.
  2. Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.
  3. Еще раз проверяем отображение страниц проекта в браузере.

В принципе, отключить или убрать хлебные крошки в WordPress не так уж и сложно, главное разобраться как они добавлены. Внимательно правьте код, дабы не удалить ничего важного (можно предварительно закомментировать строки).

Итого. В статье детально разобрал как сделать хлебные крошки в WordPress, информации по настройке вам должно хватить с головой. Советую перед установкой подумать действительно ли вам необходим данный блок. Что касается реализации, то лично я не вижу смысла внедрять элемент пути по сайту в Вордпресс без плагина, учитывая, что в вашем веб-проекте наверняка будет присутствовать Yoast SEO. Что касается других модулей, то они пригодятся лишь в случае какой-то оригинальной функциональности. Breadcrumb NavXT кажется весьма неплохим, но я обеими руками за решение от Yoast.

Если у вас есть какие-то вопросы по работе с хлебными крошками Breadcrumbs и WordPress плагинами для них, пишите ниже, — будем разбирать.

P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.

wordpressinside.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector