Мар
6
59

Создаем хлебные крошки для 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 записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации.

Плагин 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. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.

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

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

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

  • Александр   06.09.2014

    Здравствуйте! Поставил себе на сайт этот чудесный плагин. Все работает, но работает не так как нужно на некоторых страницах. Наблюдаю следующую проблему. У меня есть отдельный шаблон для страниц, позволяющий вести личный блог пользователям. Сколько пользователей-блогеров, столько рубрик. Появляется новый желающий-блогер, создаем ему одноименную рубрику.В каждом блоге пользователя публикуется только его рубрика, так реализован на сайте мини-блог. Заходя на эту страницу пользователя, я могу кликнуть на анонс его поста и перейду в single шаблон этого поста. Но назад на страницу пользователя по хлебным крошкам вернуться не могу. Хлебные крошки возвращают на страницу рубрики, которой вообще не создавалось у меня на сайте. Что нужно поменять, чтобы хлебные крошки возвращали на страницу, с которой осуществился переход?

    Чтобы было понятно, страница пользователя с личным блогом выглядит так:
    http://название.ru/user123/

    А хлебные крошки после перехода в single записи блога, возвращают сюда:
    http://название.ru/category/user123/

    И нужно, чтобы хлебные крошки возвращали сюда:
    http://название.ru/user123/

    Помогите, пожалуйста, разобраться, уже долго сижу мучаюсь, не могу понять, что сделать.

  • Tod   08.09.2014

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

  • ККК   18.12.2014

    Кривой плагин. Даже не пытайтесь. После установки блог вообще не открывался, выдавал ошибку.

  • Tod   18.12.2014

    ККК, нужно посмотреть на требования плагина к версиям вордпресс — возможно, несовместимость. Сам по себе модуль рабочий, по крайней мере был)

  • Den   19.09.2015

    У меня проблема в следующем. Каталог сайтов.
    Главная-вторая страница-рубрика-подрубрика
    Не отображается вторая страница. Как решить эту проблему? За ранее спасибо.

  • Tod   20.09.2015

    Den, нужно понять почему не отображается вторая страница — может она скрыта, может какие-то специфические настройки у модуля. Можете установить плагин WordPress SEO by Yoast и отображать хлебные крошки через него (все равно без seo плагина не обойтись).

  • Den   20.09.2015

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

  • Tod   21.09.2015

    Den, если честно, не сталкивался с этой проблемой, не могу ничего посоветовать.

  • Den   21.09.2015

    Спасибо за честность.

  • Денис   15.11.2015

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

  • Tod   15.11.2015

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

  • Никита   14.01.2016

    Здравствуйте!
    По умолчанию плагин тянет в хлебные крошки название категории/записи/страницы.
    Из-за этого на некоторых страницах крошки весьма громоздкие + переспамом попахивает, например:

    Главная > Севилья. Полезная информация, справка > Достопримечательности Севильи. Что посмотреть > Дворец Алькасар в Севилье

    Нужно чтоб вместо названия статьи данные тянулись из пункта «Ярлык меню» или «Атрибут заголовка», которые можно задать, установив плагин all in seo pack.

    Не подскажете, можно ли задать такие условия в этом плагине?

  • Tod   14.01.2016

    Никита, вряд ли такое можно задавать в плагине. Можно как вариант посмотреть Yoast SEO, где есть встроенные хлебные крошки. Но там, по-моему, также информация считывается из заголовка, а не других полей. Как вариант, еще погуглить Breadcrumb plugin custom fields.

  • Ailu   14.01.2016

    не подскажите почему вместо нормальных названий рубрик, у меня пишется Carousel> Carousel1? Я так поняла, это меняется в настройках плагина Записи и Страницы, но как изменить код, чтобы он сам брал названия страниц и записей?

  • Никита   15.01.2016

    Ок, спасибо.
    Нашел информацию на странице поддержки плагина…
    В общем такая опция есть, но в платной версии плагина.
    https://wordpress.org/support/topic/menu-names-instead-of-page-titles?replies=4

  • Tod   15.01.2016

    Ailu, если честно, плохо понял суть проблемы. У вас Carousel> Carousel1 похоже на название категорий. Плагин, вроде как, по умолчанию, подставляет заголовки страниц/записей в хлебные крошки.

  • Nalitch   14.03.2016

    Сам пользовался данным плагином более года, пока не заметил, что Google Developers выдает в хлебных крошках ошибку структурированности данных. Конечно, возможно данная ошибка ни на что серьезно не влияет (как и нерекомендуемый href в последней ссылке крошек), но все-таки зеленые галочки от гугла всегда греют душу, да и от лишних плагинов при возможности нужно отказываться. Поэтому Breadcrumb NavXT совершенно не нужен и сказать откровенно только вредит, сами крошки легко делаются без него, причем с т.з. поисковиков технически правильней.
    Смотрите как сделать их вручную на http://dimox.name/wordpress-breadcrumbs-without-a-plugin/ .

  • Tod   15.03.2016

    Nalitch, SEO by Yoast форева) Там и крошки, и много всего другого есть. Статья про Breadcrumb NavXT достаточно древняя, тогда еще использовал модуль.

  • Nalitch   15.03.2016

    Tod, добрый день, а чем SEO by Yoast лучше All in One SEO?

  • Tod   15.03.2016

    Nalitch, в SEO by Yoast я использую те же хлебные крошки, xml карту сайта, МЕТА данные для категорий, исключаю /category/ из ЧПУ. Это помимо основных его функций) Ну, и обновляется гораздо чаще.

  • Анжелика   01.04.2016

    Благодарю за столь понятную статью, расписано всё подробно и очень чётко. Сразу всё поняла. Пойду делать «хлебные крошки»

  • Леонид   17.06.2016

    День добрый. Подскажите пожалуйста по шаблону Customizr.
    Как убрать дубли хлебных крошек, они встроены в шаблон.

  • Tod   24.06.2016

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

  • Саня   02.10.2016

    Здравствуйте.
    Скажите пожалуйста.. что делает функция (Ссылка на блог) ?
    Что конкретно она проявляет ?

  • Tod   03.10.2016

    Саня, там под некоторыми настройками есть описания — возможно в них найдете нужную информацию. Если речь идет о «Blog Breadcrumb», то как я понимаю, она добавляет в начало хлебных крошек ссылку на заглавную страницу блога (где располагается список всех постов). В некоторых сложных сайтах (порталах) главная и блог — это разные страницы (кстати, их можно выбирать в админке в разделе «Настройки» — «Чтение».

  • GadZZillA   04.10.2016

    На сайте есть две категории, в которых есть подкатегории. Одна группа категорий — населенные пункты, а вторая — категории новостей. Все новости так или иначе затрагивают категории из двух групп. Населенный пункт уже выводится иначе, без использования плагина. Это реализовано настройками новостной темы, которая используется на сайте. При добавлении плагина я заметил не самую нормальную вещь: в некоторых записях отображается путь к населенному пункту, например События24 > Города > Киев, а в некоторых выводится путь категорий новостей События24 > Все новости > Криминал. Это не совсем нормально и нужно исключить из отображения населенные пункты, а именно — категорию и подкатегории Города, чтобы отображались только категории новостей. Как это сделать?

  • Tod   05.10.2016

    GadZZillA, если я правильно понимаю, Breadcrumb NavXT ориентируется на формат ссылки URL. Если ссылка что-то вроде site.com/events24/cities/kyiv то и в хлебных крошках будет так отображаться. Поэтому я бы проверил эту теорию и тогда уже искал плагины/решения позволяющие формировать URL не так как это делает wordpress по умолчанию. Насколько помню это может сделать SEO Yoast, плюс есть другие модули.

  • Константин   11.01.2017

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

  • Tod   11.01.2017

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

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


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

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

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

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

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

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