Хлебные крошки на сайт

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

Нужны ли хлебные крошки на сайте

Как уже ранее я упоминал, хлебные крошки :

 - улучшают навигацию на блоге или сайте.

 - делают правильную внутреннюю перелинковку блога ( а так же читайте, как реализовать внутреннюю перелинковку при помощи плагина Terms Descriptions).

 - указывают место положение читателю в структуре ресурса.

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

Установка  плагина Breadcrumb NavXT

Для того, чтобы установить плагин Breadcrumb NavXT, его первым дело нужно скачать. А далее, скачанный  Breadcrumb NavXT помещаем в папку:

/wp-content/plugins/

Далее перейдите в административную панель WordPress блога и в меню находящемся слева нажать на вкладку «Плагины», нажать на вкладку «Неактивные», в ней найти строчку «Breadcrumb NavXT» и нажать «Активировать». Вот, по большому счету и все, хлебные крошки на сайте установлены, осталось только разобраться с тем, где они будут отражаться. И установить в  этом месте php-код плагина Breadcrumb NavXT.

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

Я установил данный код в файл Single.php (Одна запись), точно так же, как показано на изображении ниже:

 

Breadcrumb NavXT

 

А этот php-код для плагина Breadcrumb NavXT  я установил в файл style.css, для того чтобы хлебные крошки на сайте отражались в нужном стиле(шрифт,стиль написания):

.breadcrumb {font:bolder 12px «Trebuchet MS», Verdana, Arial;padding-bottom: 10px;} .breadcrumba{color:#1B7499;}.breadcrumba:hover {color: #EF0E0E;}

 

Плагин Breadcrumb NavXT

На wordpress хлебные крошки будут отображаться вот таким образом:

Хлебные крошки Breadcrumb Navxt

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

Настройка плагина Breadcrumb NavXT

Так как плагин Breadcrumb NavXT буржуйский, то в нем нужно прописать настройки на русском языке, чтобы хлебные крошки на сайте отражались правильно. Для этого в административной панели WordPress блога пройдите во вкладку «Параметры» и найдите строку «Breadcrumb NavXT». Сделайте в настройках следующие действия:

Настройка Breadcrumb NavXT

Настройка Breadcrumb NavXT будет отображена на блоге следующим образом:

Breadcrumb NavXT

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

Как сделать хлебные крошки на сайте без плагинов

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

/wp-content/themes/

И пропишите в нем следующий php-код:

<div id="breadcrumbs">

  <?php if (is_home()) { ?>  

 <?php } elseif (is_single()) { ?>

     <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> /            

     <?php foreach((get_the_category()) as $cat) { 

     $cat=$cat->cat_ID; 

     echo(get_category_parents($cat, TRUE, ' / ')); } ?>Пост "<?php the_title(); ?>"

 <?php } elseif (is_page()) { ?>

     <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Страница "<?php the_title(); ?>"    

 <?php 

     } elseif (is_category() and get_category($cat)->parent) { ?>

     <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> /            

     Рубрика <?php foreach((get_the_category()) as $cat) { 

                    $cat=$cat->cat_ID; 

     echo(get_category_parents($cat, TRUE, ' / ')); } ?>

 <?php 

     } elseif (is_category()) { ?>

     <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> /            

     Рубрика "<?php {echo single_cat_title();} ?>"

 <?php } elseif (is_tag()) { ?><a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Архив тега     

 <?php } elseif (is_day()) { ?><a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> /  Архив записей

 <?php } elseif (is_month()) { ?><a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Архив записей

 <?php } elseif (is_year()) { ?><a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> /  Архив записей

 <?php } elseif (is_author()) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Страница автора 

 <?php } elseif (is_search ()) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Результаты поиска

 <?php } elseif (is_404()) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Ошибка 404 

 <?php } elseif (is_page('map.php')) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Карта советов

 <?php } elseif (is_page('tag_page.php')) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Карта меток

 <?php } elseif (is_page('contact.php')) { ?>

       <a href="<?php echo get_option('home'); ?>">&laquo; На главную</a> / Форма для контактов

 <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?><h3>Архивы</h3>

 	<?php } ?>
</div>

А для того чтобы подключить файл breadcrumbs.php к блогу. Необходимо разместить следующий php-код в нужном для вас месте:

<?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

Далее придаем нужный нам стиль, прописывая его в файле style.css

#breadcrumbs {  
	width: auto;
	font-size: 13px;
	color: #000;
  text-align : left; 
  overflow : hidden; 
}
#breadcrumbs a, #breadcrumbs a:visited { 
  color : #808080; 
  text-decoration : none; 
  outline:none;
} 
#breadcrumbs a:hover, #breadcrumbs a:active { 
  color : #000; 
  text-decoration : none; 
  outline:none;
}

 А на этом я закончу на сегодня разговор о хлебных крошках на сайте и о плагине Breadcrumb NavXT. А чтобы не пропустить выход новых статей, советую подписаться на рассылку новых постов по E-mail.

С уважением, Дороднов Иван!

Поделиться в соц. сетях

0

Получайте свежие посты прямо на E-mail: