Создаем «хлебные крошки» для сайта на WordPress

Share on Pinterest
Share with your friends










Отправить

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

Каковы преимущества использования «хлебных крошек»?

  • Улучшение юзабилити веб-сайта. Благодаря навигационной цепочке пользователям намного удобнее ориентироваться в структуре веб-ресурса и определять свое местоположение в нем.
  • Seo-продвижение. Хлебные крошки являются одним из элементов внутренней перелинковки, которая, в свою очередь способствует ускорению индексации сайта, повышению ее качества, а так же повышению релевантности страниц. Все эти факторы положительно сказываются на ранжировании веб-сайта в поисковых системах.
  • Привлекательность веб-ресурса на странице результатов поиска Googleи Яндекс. Какое-либо выделение сайта среди остальных результатов выдачи поисковых систем может положительно сказаться на уровне CTR сайта, а соответственно и на его посещаемости. С применением «хлебных крошек» в результатах поисковой выдачи Яндекс и Google сайт для пользователей выглядит более привлекательно и презентабельно.

Установка хлебных крошек на WordPress

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

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

1. Скачайте плагин Breadcrumb NavXT, установите и активируйте его.
2. Осуществите настройку плагина: Панель управления -> Настройки -> BreadcrumbNavXT

Общие настройки

хлебные крошки1

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

хлебные крошки2

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

Текущая позиция

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

Записи/Страницы

Здесь можно настроить ссылки на страницы ресурса. На изображении ниже указан пример настроек:

хлебные крошки3

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

хлебные крошки4

Установка «хлебных крошек» вручную

Для установки хлебных крошек используются следующие файлы:

  • functions.php
  • single.php
  • page.php
  • arhvie.php
  • search.php
  • style.css

Зайдите в «Функции темы»:
Панель администратора –> Внешний вид–>Редактор–>Шаблоны–>Функции темы
и вставьте вверху или внизу код:

// хлебные крошки
function dimox_breadcrumbs() {
  $showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
  $delimiter = '»'; // разделить между "крошками"
  $home = 'Главная'; // текст ссылка "Главная"
  $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать
  $before = '<span class="current">'; // тег перед текущей "крошкой"
  $after = '</span>'; // тег после текущей "крошки"
  global $post;
  $homeLink = get_bloginfo('url');
  if (is_home() || is_front_page()) {
    if ($showOnHome == 1) echo '<div id="crumbs">' . $home . '</div>';
  } else {
    echo '<div id="crumbs">' . $home . ' ' . $delimiter . ' ';
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $before . single_cat_title('', false). $after;
    } elseif ( is_day() ) {
      echo '' . get_the_time('Y') . ' ' . $delimiter . ' ';
      echo '' . get_the_time('F') . ' ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;
    } elseif ( is_month() ) {
      echo '' . 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;
        echo '' . $post_type->labels->singular_name . ' ' . $delimiter . ' ';
        if ($showCurrent == 1) echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        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];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '' . $parent->post_title . ' ' . $delimiter . ' ';
      if ($showCurrent == 1) echo $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[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      if ($showCurrent == 1) echo $before . get_the_title() . $after;
    } elseif ( is_search() ) {
      echo $before . 'Результаты поиска по запросу "' . get_search_query() . '"' . $after;
    } elseif ( is_tag() ) {
      echo $before . 'Записи с тегом "' . single_tag_title('', false) . '"' . $after;
    } elseif ( is_author() ) {
      global $author;
      $userdata = get_userdata($author);
      echo $before . 'Статьи автора ' . $userdata->display_name . $after;
    } elseif ( is_404() ) {
      echo $before . 'Error 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>



';
  }
} // end dimox_breadcrumbs()

Укажите необходимые настройки и сохраните.

Добавьте код в single.php, arhvie.php, search.php, page.php:

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

Теперь можно настроить дизайн. Для этого в файл style.css поместите код:

/* Хлебные крошки */
#crumbs {
padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%;
 border-radius:0 0 8px 8px;
 -moz- border-radius:0 0 8px 8px;
 -webkit- border-radius:0 0 8px 8px;}

Хлебные крошки на веб-сайте установлены!

Share on Pinterest
Share with your friends










Отправить


Похожие записи

Напишите ответ