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

Главная » Создание блога » Обходимся без плагинов » Как сделать хлебные крошки на WordPress без плагина

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

2013-03-28 автор: Виталий Кириллов

Всем привет! Сегодня на SEO-Mayak.com я буду рассказывать: как сделать хлебные крошки на WordPress без плагина.

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

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

hlebnye kroshky

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

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

У меня статьи находятся на страницах 3 уровня вложения и хлебные крошки выглядят так:

Главная » Создание блога » Настройка WordPress » Защита от копирования контента и изображений с сайта.

На своем кулинарном блоге я не использую родительские рубрики и у страниц получается 2 степень вложенности:

Главная » Мясные блюда » Мясной рулет с яйцом

Какую Вы структуру вложенности страниц изначально для cайта выбрали, такие и крошки будут.

Устанавливаем хлебные крошки на WordPress без плагина

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

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

И перед данной строчкой вставляем код:

<div id="breadcrumbs">
   <?php if (is_home()) { ?>

  <?php } elseif (is_single()) { ?>
      <a href="<?php echo get_option('home'); ?>">Главная</a> »
      <?php foreach((get_the_category()) as $cat) {
      $cat=$cat->cat_ID;
      echo(get_category_parents($cat, TRUE, ' » ')); } the_title(); ?>

     <?php } ?>
 </div>

При редактировании файлов советую пользоваться текстовым редактором Notepad++.Сохраняем изменения и в принципе код уже должен работать. Чтобы это проверить, достаточно открыть любую статью и в верхней ее части должны появиться хлебные крошки.

Остается немножко подправить внешний вид ссылок. Открываем для редактирования файл style.css и для идентификатора:

id="breadcrumbs"

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

/* Стили для хлебных крошек */

#breadcrumbs {
    width: auto;    /* Общая ширина страницы */
    font-size: 14px;   /* Размер шрифта */
    color:  #215B9B;   /* Цвет текста, который не является ссылкой */
    text-shadow: #5DB6FA 0px 1px 1px;  /* Тени для текста (необязательно) */
    text-align: left;   /* Прижимаем текст к левому краю страницы */
    margin: 3px 30px 0px 30px;  /* Внешние отступы */
    padding-bottom: 5px;   /* Внутренние отступы */
    border-bottom: 2px solid #f2f2f2;  /* Добавляем разделительную черту снизу */
}

/* цвет ссылок */

#breadcrumbs a, #breadcrumbs a:visited {
    color: #215B9B;  /* Цвет ссылки */
    text-decoration: none;  /* Отменяем подчеркивание ссылок */
}

/* цвет ссылок при наведении курсора */

#breadcrumbs a:hover, #breadcrumbs a:active {
     color: #C6C600;  /* цвет ссылки при наведении курсора */
     text-decoration: none;  /* Отменяем подчеркивание ссылок при наведении курсора */
}

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

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

Устанавливаем дополнительную навигацию

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

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

← Как узнать, проверить ТИЦ сайта. Когда апдейт (ап) ТИЦ у Яндекса (предыдущая статья)
(следующая статья) Защита от копирования контента и изображений с сайта →

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

<div class="navigation-post">
 <div style="text-align: left;">
   <?php previous_post_link('&larr; %link (предыдущая статья)') ?></div>
 <div style="text-align: right;">
   <?php next_post_link('(следующая статья) %link &rarr;') ?></div>
</div>

По-моему такое дополнение к навигации по блогу будет не лишним.

Читайте также про расширенные хлебные крошки с микроразметкой.

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов