HOW YOU CAN SUPPORT UKRAINE
Мар
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 сайта”

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

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

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