Главная » Создание сайтов » Хлебные крошки WordPress
Русфонд

Хлебные крошки WordPress

6 февраля 2013 - Рубрики Создание сайтов

1369 просмотров

В сайдбар справа добавлена кнопка Google+. Если вам поможет данный материал, прошу вас нажмите на кнопку - порекомендуйте сайт в Google.

Добрый день, друзья!

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

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

Теперь к вопросу о том как установить их на сайте. В папке вашей темы WordPress есть файл functions.php. В него заносим следующую функцию (которая и будет выводить нам путь. Уточню, что данный скрипт был взят с блога dimox.name[pwal id="29187694" description=""]

 

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"><a href="' . $homeLink . '">' . $home . '</a></div>';

  } else {

    echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';

    if ( is_category() ) {
      $thisCat = get_category(get_query_var('cat'), false);
      if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ' ' . $delimiter . ' ');
      echo $before . 'Архив рубрики "' . single_cat_title('', false) . '"' . $after;

    } elseif ( is_search() ) {
      echo $before . 'Результаты поиска по запросу "' . get_search_query() . '"' . $after;

    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;

    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $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 '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a>';
        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("#^(.+)\s$delimiter\s$#", "$1", $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];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a>';
      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[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $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 . 'Записи с тегом "' . 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()

Далее идем в файл темы WordPress header.php и в нужном месте вставляем следующий код

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

У меня данная строка написана сразу после

<div id="content">

 

[/pwal]Что еще? практически все, только стили добавим… У меня в style.css прописан следующий код

/* оформляем хлебные крошки*/
#crumbs {
	border:1px dotted #CCC;
	background-color: #F6F6F6;
	padding:5px;
	text-transform: uppercase;
	margin-top:-20px;
	margin-bottom:5px;
}

Ну вот и все на сегодня!!!

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

П.С. не забудьте оставить комментарий к статье, а также поделиться ссылкой с друзьями и коллегами через социальные сервисы или скопировав ссылку на статью ниже. Кроме того, вы можете предложить тему статьи через кнопку слева "Предложить тему статьи". Там же можно оставить пожелания, идеи по развитию сайта, а также благодарности (ну а вдруг)
П.П.С. предлагаю вам также вступить в Группа Вконтакте!группу Вконтакте, где вы сможете пообщаться с участниками на интересующие вас темы. Смелее!!!
Если вы больше времени проводите в Twitter, то за обновлениями на сайте можно следить, подписавшись на мою лентуTwitter: follow me!

Возможно вам также будут интересны статьи :

 

Предыдущие материалы из данной категории:

Комментариев: 1 , , , , , , , , , , , , ,

Понравилась статья? Поделитесь ссылкой




Комментарии к «Хлебные крошки WordPress»:

  1.  AndrewSn 31 июля 2015 18:57:11

    Хлебные крошки это важный элемент навигации веб-сайта, который повышает его юзабилити.

Оставьте комментарий:




:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

Я человек, а не бот.