Мар
6
80

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

Wordpress BreadcrumbsХлебные крошки в Вордпресс (Breadcrumbs) или в любой другой CMS — это дополнительная навигация по сайту, что отображает ваше положение относительно иерархии проекта. То есть, грубо говоря, данное меню показывает в каком разделе, странице или категории вы в текущий момент находитесь. Многие пользователи считают этот элемент именно «меню», т.к. он содержит активные ссылки с возможностью перехода. Не буду спорить о терминологии, а лучше расскажу обо всех сложностях и нюансах, возникающих при настройке хлебных крошек в WordPress. Основные разделы статьи:

Для чего нужны хлебные крошки на сайте

Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:

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

Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами  — совсем другое дело. Плюс в интернет-магазинах он тоже отлично смотрится.

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

Оформление хлебных крошек на сайте

Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить. 

Плагины и хлебные крошки в WordPress

Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.

Плагины для хлебных крошек

Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:

Yoast SEO

Yoast SEO

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

Breadcrumb NavXT

Breadcrumb NavXT

Breadcrumb NavXT — самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.

Breadcrumb

Модуль Breadcrumb

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

Prime Strategy Bread Crumb

Prime Strategy Bread Crumb

Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы Prime Strategy Bread Crumb обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками. 

Хлебные крошки в Yoast SEO

Я не буду детально описывать все тонкости работы, почитать об этом можете в обзоре SEO by Yoast, сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.

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

Включаем хлебные крошки в Yoast SEO

Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).

Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:

<?php
	if ( function_exists('yoast_breadcrumb') ) {
		yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	}
?>

Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.

Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:

Блок хлебных крошек в SEO by Yoast

То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации. Также советую заглянуть в пост про Сниппеты хлебных крошек от Yoast SEO где есть парочка интересных приемчиков для их интеграции.

Плагин Breadcrumb NavXT для WordPress

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

Устанавливаете плагин через админку либо скачиваете с официального репозитория. Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.

Настройка плагина Breadcrumb NavXT

Здесь есть 4 закладки параметров:

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

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

После указания параметров хлебных крошек Breadcrumbs в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Аналогично работе с Yoast SEO выбор места размещения кода зависит от установленной темы. Если предполагается вывод блока в шапке, тогда используете header.php. Учитывая то, что этот файл общий для всех страниц макета, увидите цепочку ссылок на каждой из них. Также можно показывать элемент только в избранных разделах — в таком случае вставляете код в single.php, page.php, archive.php и т.п. В целом, Breadcrumb NavXT — неплохой инструмент. 

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

Допускается реализация функции Breadcrumbs в WordPress без плагинов. Однако перед тем как перейти к описанию разных вариантов, я выскажу свое субъективное мнение почему это не лучшая идея:

  • Интеграция наверняка вызовет сложности у начинающих пользователей.
  • Редактирование параметров непосредственно в коде не особо наглядно — задание шаблонов отображения через админку куда удобнее нежели правка напрямую.
  • Модули имеют больше возможностей — взять хотя бы локализацию, поддержку Schema.org, виджеты.
  • Не все коды, найденные в сети, актуальны, корректны и регулярно обновляются, в то время когда, как минимум, Yoast SEO и Breadcrumb NavXT в WordPress стабильно работают.

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

Одно из самых компактных и плюс-минус актуальных решений найдено тут. Первым делом вы добавляете новую пользовательскую функцию get_breadcrumb() в файл functions.php:

/**
 * Generate breadcrumbs
 * @author CodexWorld
 * @authorURL www.codexworld.com
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Затем в макете отображения постов single.php или любом другом вызываете ее:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Также автор предлагает парочку стилей оформления:

breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

В итоге получите что-то вроде:

Простой пусть по сайту для WP

Если вам этого достаточно, то почему нет. Также могу посоветовать вариант от Dimox’а который постарался учесть все недостатки существующих сниппетов. Исходного кода там в разы больше, из него вполне можно создавать полноценный модуль:)

Как убрать хлебные крошки в WordPress

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

  1. Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.
  2. Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.
  3. Еще раз проверяем отображение страниц проекта в браузере.

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

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

Если у вас есть какие-то вопросы по работе с хлебными крошками Breadcrumbs и WordPress плагинами для них, пишите ниже, — будем разбирать.

P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 21, средний балл: 4,67 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , , , .

комментариев 80 к статье “Создаем хлебные крошки для WordPress сайта”

  • Руслан   29.04.2017

    Сделал через плагин SEO by yoast
    Отлично работает, советую.

  • Tod   30.04.2017

    Руслан, да, плагин просто лучший) Тем более, что он и так используется в блогах.

  • Антон   17.09.2017

    У меня вопрос «Заголовок для «Мякиша»» это название хлебной крошки, которое будет отображаться на сайте или в поиске? Или все вместе?

  • Tod   17.09.2017

    Антон, это текст, который будет отображаться вместо заголовка страницы. То есть по умолчанию идет «Главная — категория — название поста», а теперь будет «главная — категория — заголовок для мякиша».

  • Сергей   13.10.2017

    А возможно ли убрать хлебные крошки с главной страницы?

  • Tod   13.10.2017

    Сергей, нужно при вызове функции в шаблоне добавить коды из статьи про вывод текста только на главной — условие if (!is_front_page()).

  • Владимир   03.03.2018

    Breadcrumb NavXT — Помог вывести родительскую категорию

  • Александр   30.05.2018

    Здравствуйте, использую хлебные крошки от YoastSeo, выпадающее меню у меня сделано через постоянные ссылки пустые, то есть главный пункт — пустая постоянная ссылка с именем, к примеру «Проза» и в ней уже статические страницы книг. Как сделать, чтобы хлебные крошки от Yoast включали эти пустые ссылки в цепочку хлебных крошек?

  • Tod   30.05.2018

    Александр, если я правильно понял задачу, то вам нужно создать, а затем добавить для книги родительскую страницу «Проза». YoastSeo просто считывает «путь» к конкретному материалу, и если в нем нет родительского элемента, то ничего выводить при этом не будет. Это также повлияет на URL ссылки, она станет site.ru/proza/kniga (учитывайте данную фишку, если вам это важно).
    Меню при этом можно оставить как есть (если переход на сам раздел не нужен). Единственное, что я бы добавил тогда на саму новую страницу «Проза» немного текста по теме… дабы она не была пустой.

  • Antey   24.11.2018

    Хлебные крошки актуальны в 2018 году? Тема Twentyfourteen, там ведь уже есть свои крошки, т. е. рубрики высвечиваются
    Я установил этот плагин, но в нем нет раздело «Дополнительно». Yoast Seo.

  • Tod   26.11.2018

    Antey, хлебные крошки актуальны, т.к. являются дополнительной возможностью навигации для пользователя. На некоторых сайтах, где большая вложенность, это важный элемент юзабилити.
    По поводу SEO Yoast, то там поменялся слегка дизайн, сейчас эта функция находится в разделе «Отображение в поисковой выдаче» — вкладка «Хлебные крошки».

  • Анна   28.01.2019

    Добрый день! пробую вставить код для того чтобы не отображался на главной странице — в итоге ошибка, ругается на синтаксис какой то скобки…
    код прилагаю, помогите кто шарит!

    <?php if(!is_front_page()) {
    }?>

  • Tod   28.01.2019

    Анна, в другом посте писал про вывод на главной плюс был пример — я бы еще is_paged добавил в условие. Посмотрите внимательно код до и после, возможно блок с php уже открыт и вам не нужно добавлять блог <?php … ?> — если не получится пишите на stod84@gmail.com

  • Анна   29.01.2019

    Tod — спасибо! Да я по вашему посту и делала, лишняя скобка была)) Спасибо большое за помощь!

  • Сергей   19.05.2019

    привет
    помогите если можно
    то ли после включения каких то СЕО-плагинов то ли еще почему, сам момент как то не отследил
    крошки на страницах магазина стали выводиться сбоку и вертикально… и это создает дурацкое белое поле
    и ни отключение крошек ни самих плагинов, даже деинсталяция не помогает… что можно сделать? гуглить уже устал, конкретно такой момент никто не описывает
    я уже даже готов убрать их вобще
    пример silver-krest.ru/shop/
    спасибо

  • Tod   19.05.2019

    Сергей, это проблема стилей.. в style.css для класса .woocommerce-breadcrumb нужно удалить строку — margin: 0 0 1.618em; (она ломает верстку).

  • Сергей   19.05.2019

    Tod, спасибо большое… помогло
    не сразу правда, поковыряться пришлось (там у меня две темы сразу используется) но в итоге сработало
    сам предполагал что-то подобное и даже на эту строчку 1.618em обращал внимание но не был уверен
    а откуда это вылезло, предполагаю что включал плагин Rank Math SEO, и в нем зачем то включил крошки (хотя они были по умолчанию в самом вукоммерсе)… а потом отключил, и после этого вот все поплыло
    спасибо еще раз

  • Оля   23.05.2019

    Добрый день, помогите советом с хлебными крошками, пожалуйста!
    Как настроить, чтобы при нажатии на среднюю хлебную крошку открывалась определенная страница сайта, а не рубрика.
    Например, есть страница Путешествия, на нее выводятся записи из рубрики Путешествия.
    Когда, находясь в записи, нажимаешь на хлебную крошку Путешествия открывается страница рубрики, а мне нужно чтобы открывалась страница Путешествия.
    Надеюсь я понятно объяснила) есть ли такая возможность настройки?
    Тема Astra, хлебные крошки включены через тему, без доп плагинов.
    Заранее спасибо за ответ!!!

  • Tod   23.05.2019

    Оля, нужно создавать страницу «путешествия» и в ней с помощью модулей по типу Content Views, блоков шаблона, php кода выводить список постов блога. Просто для страниц можно указывать родительскую и тогда это будет отображаться в хлебных крошках.
    Далее с помощью плагина Redirection делаете переадресацию из рубрики на страницу (дабы пользователь никак не могу на нее попасть).

  • Оля   27.05.2019

    Спасибо за ответ! Помог плагин Redirect)

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости