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

хлебные крошки+на сайте,дополнительная навигация,навигация, хлебные крошки,breadcrumbs,phpПривет Всем!

Сегодня поговорим о “хлебных крошках” или о дополнительной навигации на сайте.Это своего рода путь от главной страницы до той страницы, на которой Вы в данный момент находитесь.То есть, к примеру:

Главная→Категория→Название статьи

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

Установить “хлебные крошки” у себя на сайте можно двумя способами: с помощью плагина и без плагина.

Как установить и настроить плагин Breadcrumb NavXT читайте в статье “Плагин хлебные крошки“.

В этой статье мы рассмотрим второй вариант,т.е. установка “хлебных крошек” без плагина.

Будем действовать по тому же принципу,как в создании постраничной навигации.

Для начала создадим отдельный файл и назовём его breadcrumbs.php.

Теперь в наш новый файл запишем такой код:

<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>

Далее закидываем файл в папку с шаблоном,т.е.:

wp-content→themes→название темы

После этого заходим в админку блога и редактируем файл single.php-одиночная запись.

Вставляем сюда такую строчку:

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

Я вставила сразу после строки:

<div class='content'>

Всё, дополнительная навигация готова! Остаётся только отредактировать стиль.Открываем файл style.css и добавляем в самый конец такой код:

/*breadcrumbs - start*/
/* цвет шрифта и его размер, отступы, ширина */ 
#breadcrumbs {
width:auto;
font-size:14px;
color:#232323;
text-align:center;
overflow:hidden;
background-clip: border-box;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(207, 207, 207);
border-bottom-style: dashed;
border-bottom-width: 1px;
border-top-color: rgb(207, 207, 207);
border-top-style: dashed;
border-top-width: 1px;
}
/* цвет ссылок */
#breadcrumbs a, #breadcrumbs a:visited {
color:#232323;
text-decoration:none;
outline:none;} 
/* цвет ссылок при наведении курсора */
#breadcrumbs a:hover, #breadcrumbs a:active {
color:#1387d4;
text-decoration:none;
outline:none;}

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

Удачи в Ваших экспериментах!

Похожие посты:

  1. Как сделать постраничную навигацию без плагина.
  2. Плагин постраничной навигации WP-PageNavi.
  3. Иконка на блоге
  4. Статистика сайта
  5. Плагин Page Links To-ссылка на внешний сайт.
  6. Как создать анонсы статей на главной странице блога.


ПОНРАВИЛАСЬ СТАТЬЯ!? ПОДЕЛИТЕСЬ С ДРУЗЬЯМИ:



Комментарии (9) на “Хлебные крошки WordPress без плагина.”

  • Здравствуйте! Что-то действий многовато у Вас. Я описал в этой статье вариант по проще.

    http://sylar.ru/programmirovanie-2/kak-uskorit-blog-zamena-plaginov.html

    Уж простите за ссылку, но так действительно проще. И у Вас этих крошек не видно. Я их сразу и не заметил

    • admin пишет:

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

      • Почему не применял? Применял, и все получилось с первого раза ) Беда в том что их попросту некуда примостить к моему дизайну. А так крошики рабочие, что там, вставить функцию и вывести ее в нужном месте )) А сайт у Вас прикольный ) Уже много прочитал!

        • admin пишет:

          Спасибо, Владимир! На Вашем сайте я тоже нашла много полезной для себя информации.

  • Юлия пишет:

    Здравствуйте, спасибо, код прекрасен.
    А как его расширить так, чтобы он выводился еще и на страницах, и в архиве рубрик?(в соотв контейнеры я его добавила, но, видимо, сама функция не подразумевает вывод).

    • admin пишет:

      Спасибо, Юлия, за отзыв! К сожалению, этот код не предусматривает вывод “крошек” на страницы.

  • Натали пишет:

    Спасибо за статью! У меня тоже все получилось! Я даже не знала что оказывается все так просто и можно обойтись без лишнего плагина!
    Спасибо Вам!!!!

  • Артем пишет:

    Хорошая статья! Достали уже все эти плагины.
    Обязательно воспользуюсь, спасибо!

Добавить комментарий для Юлия

(следующая статья)
Пользовательский поиск
Я на Twitter Я Вконтакте Я на Facebook
BannerFans.com
Управление