Мар
6
60

Создаем хлебные крошки для 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)
Загрузка...

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

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

  • AzzePis   03.11.2010

    Столкнулся на данный момент с проблемой, что ни один плагин «крошек», включая этот, не работает с кастом пост тайпами так, как люди привыкли видеть при работе с обычными постами. Лично для меня, основной проблемой есть то, что «родительская» ссылка в цепочке указывает либо на домашнюю страницу, либо на кастомную таксономию, привязанную к данному типу поста, и никак не на архив записей этого типа. Может знаешь какие-то варианты/плагины, чтоб решить эту проблему?

  • Tod   03.11.2010

    AzzePis, если честно, не совсем понял суть вопроса) пару раз вчитался и все равно. Посмотрел у себя все выводит нормально для страниц и постов полный путь с категориями и подстраницами.

  • AzzePis   03.11.2010

    Приведу пример. Есть пост — «новость1» в категории «категория1″… крошки будут выглядеть так:
    Домашняя страница» категория1 » новость1

    а если зайти на уровень выше — в категорию, то так:
    Домашняя страница» категория1

    Если использовать custom post type, ситуация будет следующая… есть пост — «кастомпост1» в посттайпе «тайп1″… зайдя в этот пост, увидим:
    Домашняя страница» кастомпост1
    а зайдя на уровень выше, скорее всего увидим:
    Домашняя страница»

  • Tod   03.11.2010

    AzzePis, ситуация с custom post type и крошками у меня не возникала, поэтому ничего не смогу подсказать.

  • Леха   07.11.2010

    Почему то не выходит у меня поставить этот плагин. Даже ошибку не могу понять! =(

  • Ichigo   10.11.2010

    А в плане внутренней оптимизации этот плагин даст результаты?

  • Tod   12.11.2010

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

  • Ляйсан Шагалиева   14.11.2010

    Плагин использую с большим удовольствием :)

  • Александр   14.11.2010

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

    Да и перелинковка никогда лишней не бывает ;)

  • Tod   15.11.2010

    Александр, а я в ГГЛ пишу весьма условный путь, то есть например, «WordPressinside — плагины — хлебные крошки» и т.п., не указываю точно название, а чтобы побыстрее, народ пока не возмущался)

  • Александр   17.11.2010

    Tod, я очень часто прокликиваю путь от главной до статьи с моей купленной ссылкой, и если путь не указан — отправляю на доработку. Ссылки в ГГЛ достаточно дорогие, потому должны быть качественными. Вот такая я скАтина :)

  • Илья   04.03.2011

    Поставил и себе этот плагин. Точнее сказать он у меня уже стоял давно, но всё руки не доходили вставить код крошек.

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

  • Евгений   18.04.2011

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

  • Арсений   27.06.2011

    Спасибо, установил себе, работает без пробелм :-) Добавил только в single.php — не вижу смысла — «забивать» header лишними ссылками.

  • Ваня   10.02.2012

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

  • Tod   12.02.2012

    Ваня, надо разбираться, смотреть настройки, тестировать и т.п. Плагин рабочий, что-то не так подключилось.

  • Urbix   29.03.2012

    Товарищи помогите!!! Как в этом плагине заменить слово «Главная» на иконку домика ?????

  • Tod   30.03.2012

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

  • Anton   12.11.2012

    Помогите пожалуйста!!! Всё делаю по вашей инструкции и всё равно не получается. В какое именно место файла header.php нужно добавить код ??? В начале? Я не шарю в html.

  • Tod   12.11.2012

    Anton, код нужно добавить в место шаблона, где будут выводиться хлебные крошки — если это header.php то ориентировочно где-то в конце этого файла. Без понимания данного процессе интеграции плагина, увы, ничего не получится — есть разные шаблоны и однозначного ответа типа «вставьте после 30-ой строки» я дать не могу, все индивидуально.

  • xppx   04.12.2012

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

  • Ник   29.12.2013

    Добрый день. Подскажите, если знаете, что нужно и где поменять в коде плагина breabcrumbs чтобы вместо:
    Главная страница » Раздел » Подраздел » Текущая страница выводилось Главная страница » Раздел » Подраздел » т.е. название страницы которая открыта не отображалось?! Спасибо

  • Tod   30.12.2013

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

  • Дмитрий   14.01.2014

    Спасибо огромное, но Вы не могли бы подсказать, можно ли как то убрать кроши с главной страницы karasevokeramika.ru?

  • Tod   15.01.2014

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

  • Дмитрий Туторов   19.03.2014

    Чтобы убрать крошки с главной, можно поставить галочку на «Поместить ссылку на главную страницу блога в путь».

  • Dima   31.07.2014

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

  • Tod   01.08.2014

    Dima, код реально «где-то не там», скорее всего вы ошиблись с «открытием/закрытием» PHP кода или что-то в этом роде. Посмотрите внимательно текст файла шаблона, там идет в php или в html участок кода, куда добавляете функцию.

  • Джо-Джо   04.09.2014

    Присоединяюсь к Нику. У меня тот же вопрос. Как отключить название материала в пути? Версия 5.0.1

  • Tod   05.09.2014

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

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


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

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

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

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

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

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