Хлебные крошки для WordPress без плагина и с помощью Breadcrumb NavXT

Доброго времени суток, уважаемые владельцы сайтов!

Сегодня затронем первую тему по поводу навигации сайта.

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

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

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

Зачем нужны хлебные крошки?

Что касается хлебных крошек, то существует множество мнений, от важности данной функции для перелинковки до необходимости установки при сложной структуре сайта.

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

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

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

В большинстве случаев мы не встретим обычных сайтов со сложной структурой. Как правило, это идут обычные ресурсы на движке WordPress, где структура контента идет таким образом: Главная - Рубрика - Статья.

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

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

Поэтому, если у вас обычный простой сайт, то можно не ставить хлебные крошки. Достаточно вывести название рубрики в контенте.

На моем сайте название рубрики выводится в начале каждого поста.

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

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

к содержанию ↑

Делаем без плагина

В данном пункте я покажу вам 2 способа, как их сделать. Первый будет очень простым с точки зрения оформления. Будет простой вид крошек, который я приводил в пример ранее. А во втором случае мы сделаем уже красивое оформление.

Пойдем с первого способа. Он достаточно прост и состоит их 2х шагов:

  1. Размещение кода в файле шаблона functions.php;
  2. Размещение кода вывода крошек в нужном месте.

Чтобы лучше понять, как это сделать, записал для вас видео-урок. Потом идет текстовая пошаговая инструкция по данному процессу.

Берем 1й код и копируем его в файл functions.php вашего шаблона оформления.

Можно разместить его в самом конце содержимого файла перед закрывающим тегом ?>. Если его нет, то можно вставить в самое начало файла перед открывающим тегом (см. скриншот ниже).

Когда будете размещать 1й код, проследите, чтобы кодировка файла была UTF-8 (без BOM). Если ее не будет, то некоторые символы и русские слова будут отображаться некорректно. В редакторе Notepad кодировка выставляется через пункт "Кодировка - Кодировать в UTF-8 (без BOM)".

Далее берем второй код и размещаем его в то место, где нужно вывести сами хлебные крошки.

Они должны отображаться на всех страницах сайта, кроме главной. Исходя из этого, нужно разместить второй код в файлы, отвечающие за вывод записи (single.php), вывод архивов и рубрик (archive.php и category.php) и вывод страниц (page.php).

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

Для примера я взял один из стандартных шаблонов - TwentyTen. В нем код будет иметь следующее расположение (файл single.php).

Если немного разбираетесь в кодах, то увидите, что вывод крох я разместил внутри блока <div id="content" role="main"> перед выводом самого контента. Благодаря тому, что разместил его внутри блока, не пришлось задавать никакие выравнивания и стили для ссылок. На сайте отображение имеет следующий вид.

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

Если нужно будет задать какие-то отступы, то просто вторую часть кода оборачиваете в блок с каким-то классом и задаете ему выравнивание. Например, вот так.

И вот стили с внутренними отступами внутри блока (padding) и внешними (margin).


Итак, первый способ без плагина мы рассмотрели. Теперь рассмотрим второй способ, когда хлебные крошки будут иметь вид не просто ссылок, а сделанное оформление будет придавать им вид кнопок.

Реализация точно такая же, как и в первом случае. Имеются коды, которые нужно вставить в те же самые файлы и в те же места, что и ранее. Вот даю 1ю часть кода, размещаем в файле function.php.

В строках 21 и 25 в конце имеется часть кода trim_title_words(7, '...'), в которой в скобках указано числовое значения количества выводимых слов в названии записи, страницы или категории. Бывает, что название записи очень длинное и оно не вмещается или же занимает слишком много места. В скобках можно изменить мое значение (7) на свое.

И вторая часть кода, которую размещаем в необходимое место в нужных файлах.

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

Стили размещаем в файле style.css. Проследите, чтобы в этих стилях было прописано правильное имя картинки (строка 11). Также замечу, что со стилями может придется помучиться, так как все зависит от вашего шаблона. Мне пришлось дописывать стили в исходный код и модернизировать уже существующие. Надеюсь, что вам не придется этого делать. Если возникнут сложности, то пишите в комментариях, постараюсь помочь.

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

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

Итак, 2 способа с кодами мы разобрали. теперь можно рассмотреть плагин Breadcrumb NavXT, если у вас не получилось сделать способами ранее или же просто не получается.

к содержанию ↑

Плагин Breadcrumb NavXT

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

Для начала скачиваем плагин по кнопке ниже и устанавливаем его.

После установки, сразу размещаем слеующий код в ранее рассмотренные файлы, где нужно вывести отображение крошек.

Когда это сделали, плагин уже будет выполнять свою задачу. Но имеется один нюанс, который нужно исправить с помощью настроек плагина. По умолчанию, ссылка на главную страницу выводится названием сайта, которое может быть длинным. Тогда "хлебные остатки" будут иметь чудовищно громоздкий вид.

Нужно этот момент отрегулировать. Для этого переходим в настройки плагина через админ панель WordPress.

Окажемся в настройках, где имеется 4 вкладки. Нас не устраиваем только 2 момента:

  1. Название ссылки на главную страницу;
  2. Количество символов в ссылках.

Чтобы исправить эти моменты, нам нужна только первая вкладка "Основные".

  • Сначала можно выставить необходимую длину заголовка каждой ссылки. Если это нужно, то ставим чек-бокс напротив пункта "Ограничить длину заголовка" и выставляем нужное значение в символах. Рекомендую выставить в районе 60-70ти символов;
  • Далее нужно сделать, чтобы текущая позиция не была ссылкой. По умолчанию так и сделано, поэтому следующий пункт не трогаем. Проследите, чтобы чек-бокс там не стоял;
  • Затем нужно изменить название ссылки главной страницы. Для этого двигаемся ниже и в пункте "Шаблон ссылки на главную" в предоставленном коде в самом конце заменяем %htitle% на слово "Главная".

Когда я выставил такие параметры, то ссылки стали не такими длинными и вместо названия сайта в ссылке на главную страницу стало выводиться слово "Главная".

На этом настройки Breadcrumb NavXT закончены. Их конечно имеется еще масса, но они нас не интересуют. Там уже более профессиональные вещи, которые обычному сайту совершенно не нужны.

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

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

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

Все, друзья! До скорой!

С уважением, Константин Хмелев!

P.S. Если же вы все таки решили сделать хлебные крошки у себя на сайте, чтобы дать поисковым роботам лучше понять структуру сайта (что очень хорошо), то я рекомендую их отобразить где-то в конце страницы, но никак не перед выводом контента, чтобы не занимать лишнее место. Я, например, внутри статей разместил их в самом низу после формы комментариев.

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

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 28
  • Здравствуйте, пытался вывести хлебные крошки первым способом, но на любой странице выводится только главная, а далее название статьи, на которой нахожусь, то есть нет промежуточного раздела, через который можно перейти к статье, происходит отображение только двух ссылок, подскажите пожалуйста что не так?

    • Здравствуйте!

      Вероятнее всего, что структура сайта такая. Какой вид ссылок настроен? В ссылках выводится название рубрики? Если нет, то возможно, что и в хлебных крошках не будет. Попробуйте сделать хлебные крошки с плагином и посмотрите будет ли работать полный путь? Если нет, то значит что на вашем сайте стоят какие-то настройки, которые не выводят рубрику. Если же будет работать, то значит, что код конфликтует с шаблоном.

      • Постоянные ссылки у меня по умолчанию, название рубрик не выводится, с плагином не работает, какие могут быть настройки, которые не выводят рубрику?

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

          • Хорошо, а может быть дело в рубриках? У меня рубрик нет вообще, значит на втором месте должны выводится рубрики? Как я понял должно быть так "адрес домена/рубрика/название страницы". Но у меня нет рубрик, скорее всего поэтому и их просто не показывает, может быть такое? Если это так, то как сделать рубрики к страницам? Именно к страницам, а не к записям

          • С этого и нужно было начинать. Если рубрик нет, то как же они будут отображаться в навигационной цепочке? Их и не будет, а на страницах (не в статьях) их и не должно быть.

          • А как перенести ту страницу, с которой будет перенаправление на статью в рубрики? И если у страниц не должно быть рубрик, то ту страницу, где можно осуществить переход, надо будет переносить в записи? Как вообще сделать это, объясните пожалуйста

          • Ничего не понял про перенаправление. Опишите подробно, что необходимо? Какое еще перенаправление для страниц? Страница существует сама по себе и не находится ни в какой рубрике. А вот запись (статья) всегда находится в какой-то рубрике (даже если вы ее не создавали), так как по умолчанию в WordPress имеется стандартная рубрика "без рубрики", в которую и попадает запись.

          • Постараюсь подробнее

            На моём сайте в меню есть кнопка "статьи сайта", при нажатии на эту кнопку происходит переход на новую страницу, на которой существует выбор тематики, на которые написаны статьи. При нажатии на выбранную вами тематику происходит перенаправление на статью, при нажатии на другую тематику происходит перенаправление на следующую статью и так далее.

            У меня вопрос такой: как переделать страницу (на которой тематики) в запись. Так как на сколько я понял страницы не отображаются, а отображаются только рубрики в хлебных крошках, ну как переделать статьи в рубрики?

            У меня страницы имеют вид "адрес домена/страница ( а не рубрика)/название страницы (статьи)"

            А надо вот так "адрес домена/рубрика/название страницы (статьи)"

            Надеюсь сумел правильно истолковать свой вопрос

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

            Про выбор тематики, я так понял, что вы имеете ввиду обычную карту сайта со списком ссылок на записи, рубрики и страницы?? Или у вас там другая реализация? Если обычная карта сайта, то стоит ее создать точно так же для записи, а не для страницы.

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

  • Здравствуйте, спасибо за интересную статью, установил хлебные крошки первый вариант все работает, единственное, у меня есть родительская рубрика с одной записью и подрубрика с несколькими записями когда переходишь по адресу подрубрики путь отображается так - главная»подрубрика вместо - главная»родительская рубрика»подрубрика. А если переходить по адресу родительской рубрики путь перехода выглядит так - главная»подрубрика вместо -главная»родительская рубрика подскажите как это можно исправить?

    • Здравствуйте. Честно говоря, я не совсем понял/, что вы мне хотели объяснить предоставленными в пример путями злебных крошек. По вашему примеру в хлебных крошках должно быть 2 ссылки на главную страницу (главная»подрубрика вместо - главная»). Я так понял, что проблема в том, что местами поменялись родительская рубрика и подрубрика?

  • Константин, подскажите пожалуйста.

    У меня товар находится одновременно в 2-х категориях. В хлебных крошка светится не та которая мне нужна, как это исправить? И по какому принципу отбирается категория которая будет отображаться в крошках?

    • Здравствуйте. Как отобразить ту категорию, которая вам нужна, точно сказать не могу. Осмелюсь лишь предположить. Обычно, основной категорией выбирается та, чек-бокс на которой был поставлен в самом начале. Поэтому, можно попробовать следующее - снять все галочки, обновить запись, а затем выбрать заново нужные категории для записи, но первой выставить ту, которая нужна для отображения. Не факт, что это сработает, но попробовать можно.

      • Спасибо за быстрый ответ!
        Оказывается у меня по алфавиту идет отбор, пришлось перед нужными категориями ставить цифры)

  • Понадобилось сделать отступы сбоку и сверху. Помогла ваша статья. Спасибо

  • Спасибо! У меня все получилось! УРА!

  • Здравствуйте! Спасибо за статью.
    При размещении столкнулся с проблемой: когда устанавливаю код в category.php

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

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

  • Добрый день! Я сделал по первому способу, но не отображается подкатегория в хлебных крошках. Как сделать, что бы поддерживалась структура главная-рубрика-подрубрика-запись?

  • здравствуйте. подскажите пожалуйста. сделал по 1ому способу...на любой странице выводится только главная, а далее название статьи, на которой нахожусь, то есть нет промежуточного раздела, через который можно перейти к статье, происходит отображение только двух ссылок. Прочитал в комментариях что при таком раскладе лучше сделать по 2ому способу, сделал и удалось но частично...на одних станицах выводится "Интерактивная доска > Дидактические материалы > Белорусский язык и литература" а на других страницах "Главная » Русский язык и литература" т.е меняется слова в меню это первое и второе теряется промежуток Дидактические материалы...подскажите пож-ста (и еще нет файла категорий в теме, только архив сингл и пейдж)

    • всё сделал

    • Здравствуйте. По поводу хлебных крошек. Судя по всему, проблема в построении ваших УРЛ адресов, т.к. хлебные крошки берут путь именно из него. Более подробно сказать не могу, т.к. давно этой темой не интересуюсь. Касаемо файла, то у вас за все страницы со списком анонсов отвечает файл архивов.

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

    • В идеале нужно, чтобы последнего элемента на текущей странице вообще не было, т.к. это дублирование. Если находимся в статье, то крошки не должны выводить название статьи, то же самое и с рубриками. Я уже давно не использую простой вариант крошек, а применяю варианты только с микроразметкой. Сам использую вариант крошек от dimox.name (http://dimox.name/wordpress-breadcrumbs-without-a-plugin/)

  • ценная статья

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *