Создаем хлебные крошки для WordPress сайта
Хлебные крошки в Вордпресс (Breadcrumbs) или в любой другой CMS — это дополнительная навигация по сайту, что отображает ваше положение относительно иерархии проекта. То есть, грубо говоря, данное меню показывает в каком разделе, странице или категории вы в текущий момент находитесь. Многие пользователи считают этот элемент именно «меню», т.к. он содержит активные ссылки с возможностью перехода. Не буду спорить о терминологии, а лучше расскажу обо всех сложностях и нюансах, возникающих при настройке хлебных крошек в WordPress. Основные разделы статьи:
- Назначение элемента.
- Плагины хлебных крошек в Вордпресс.
- Реализация через Yoast SEO.
- Сниппеты хлебных крошек от Yoast SEO (отдельный пост).
- Обзор Breadcrumb NavXT.
- Создание без плагинов.
- Алгоритм удаления элемента.
Для чего нужны хлебные крошки на сайте
Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:
- Во-первых, оно полезно с точки зрения юзабилити — навигация сориентирует людей на сайте и прояснит его структуру.
- Во-вторых, эта фишка работает и для оптимизации, т.к. по сути, является еще одним вариантом перелинковки, а также увеличивает число переходов и время пребывания (+ может отображаться в выдаче).
Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами — совсем другое дело. Плюс в интернет-магазинах он тоже отлично смотрится.
Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте условные операторы. Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.
Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить.
Плагины и хлебные крошки в WordPress
Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.
Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:
Yoast SEO
Основная задача модуля, в принципе, никак не связана с нашей сегодняшней темой, но не упомянуть его нельзя. Одна из дополнительных фишек плагина Yoast SEO — хлебные крошки. То есть вам не придется устанавливать новый модуль, а просто активируете соответствующую опцию. В работе я использую именно этот вариант.
Breadcrumb NavXT
Breadcrumb NavXT — самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.
Breadcrumb
В принципе, сложно найти решения, которые были бы интереснее предыдущих двух, хотя есть неплохие попытки. Так, например, в модуле Breadcrumb для WordPress внедрена поддержка шорткодов, плюс сама цепочка ссылок имеет оригинальное оформление (смотрите по ссылке Live Demo!»). Непонятно только поддерживаются ли дизайны в бесплатной версии. Также вы можете настраивать тип разделителя и добавлять текст в начале элемента. По словам разработчиков скрипт максимально простой и легкий.
Prime Strategy Bread Crumb
Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы Prime Strategy Bread Crumb обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками.
Хлебные крошки в Yoast SEO
Я не буду детально описывать все тонкости работы, почитать об этом можете в обзоре SEO by Yoast, сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.
После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:
Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).
Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?> |
Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.
Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:
То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации. Также советую заглянуть в пост про Сниппеты хлебных крошек от Yoast SEO где есть парочка интересных приемчиков для их интеграции.
Плагин Breadcrumb NavXT для WordPress
Также при создании хлебных крошек под Вордпресс используется планин Breadcrumb NavXT. Модуль обладает хорошей функциональностью, о которой я частично упоминал выше, плюс содержит много интересных опций. Разобраться в нем сможет практически каждый пользователь и легко поменять нужные настройки элемента навигации.
Устанавливаете плагин через админку либо скачиваете с официального репозитория. Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.
Здесь есть 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 " » "; the_category(' • '); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo " » "; echo the_title(); } elseif (is_search()) { echo " » 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; } |
В итоге получите что-то вроде:
Если вам этого достаточно, то почему нет. Также могу посоветовать вариант от Dimox’а который постарался учесть все недостатки существующих сниппетов. Исходного кода там в разы больше, из него вполне можно создавать полноценный модуль:)
Как убрать хлебные крошки в WordPress
В принципе, эта задача обратная к процессу установки элемента. Поэтому перед тем как его отключить нужно понять как именно все реализовано в вашем конкретном случае. Алгоритм приблизительно следующий:
- Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.
- Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.
- Еще раз проверяем отображение страниц проекта в браузере.
В принципе, отключить или убрать хлебные крошки в WordPress не так уж и сложно, главное разобраться как они добавлены. Внимательно правьте код, дабы не удалить ничего важного (можно предварительно закомментировать строки).
Итого. В статье детально разобрал как сделать хлебные крошки в WordPress, информации по настройке вам должно хватить с головой. Советую перед установкой подумать действительно ли вам необходим данный блок. Что касается реализации, то лично я не вижу смысла внедрять элемент пути по сайту в Вордпресс без плагина, учитывая, что в вашем веб-проекте наверняка будет присутствовать Yoast SEO. Что касается других модулей, то они пригодятся лишь в случае какой-то оригинальной функциональности. Breadcrumb NavXT кажется весьма неплохим, но я обеими руками за решение от Yoast.
Если у вас есть какие-то вопросы по работе с хлебными крошками Breadcrumbs и WordPress плагинами для них, пишите ниже, — будем разбирать.
P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.
комментариев 80 к статье “Создаем хлебные крошки для WordPress сайта”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Плагин WP-PostRatings рейтинга постов в WordPress (5,79 из 7, голосов - 934)
- 5 wordpress плагинов для кнопок социальных закладок (5,24 из 7, голосов - 42)
- Кэширование в wordpress — выбираем лучший плагин для кэширования (5,63 из 7, голосов - 35)
- 50+ лучших плагинов для WordPress сайта (5,71 из 7, голосов - 34)
- Лучшие плагины картинок в WordPress — галереи, слайдеры, для миниатюр и т.п. (6,07 из 7, голосов - 30)
- Лучшие плагины статистики в WordPress — просмотр посещаемости сайта и не только (4,65 из 7, голосов - 37)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Столкнулся на данный момент с проблемой, что ни один плагин «крошек», включая этот, не работает с кастом пост тайпами так, как люди привыкли видеть при работе с обычными постами. Лично для меня, основной проблемой есть то, что «родительская» ссылка в цепочке указывает либо на домашнюю страницу, либо на кастомную таксономию, привязанную к данному типу поста, и никак не на архив записей этого типа. Может знаешь какие-то варианты/плагины, чтоб решить эту проблему?
AzzePis, если честно, не совсем понял суть вопроса) пару раз вчитался и все равно. Посмотрел у себя все выводит нормально для страниц и постов полный путь с категориями и подстраницами.
Приведу пример. Есть пост — «новость1» в категории «категория1″… крошки будут выглядеть так:
Домашняя страница» категория1 » новость1
а если зайти на уровень выше — в категорию, то так:
Домашняя страница» категория1
Если использовать custom post type, ситуация будет следующая… есть пост — «кастомпост1» в посттайпе «тайп1″… зайдя в этот пост, увидим:
Домашняя страница» кастомпост1
а зайдя на уровень выше, скорее всего увидим:
Домашняя страница»
AzzePis, ситуация с custom post type и крошками у меня не возникала, поэтому ничего не смогу подсказать.
Почему то не выходит у меня поставить этот плагин. Даже ошибку не могу понять! =(
А в плане внутренней оптимизации этот плагин даст результаты?
Ichigo, если сайт имеет сложную структуру из множества страниц и разделов, то будет полезно. Для стандартного блога, как я и говорил, перелинковка уже и так делается за счет тегов, категорий, указанный в посте.
Плагин использую с большим удовольствием :)
Этот плагин может быть полезен еще и для того, чтобы сэкономить время при активной публикации постов в ГГЛ — там нужно указывать путь от главной до статьи со ссылкой. А так выделил «хлебные крошки» — и вставил, не нужно разделы копировать и тем более с клавиатуры набирать.
Да и перелинковка никогда лишней не бывает ;)
Александр, а я в ГГЛ пишу весьма условный путь, то есть например, «WordPressinside — плагины — хлебные крошки» и т.п., не указываю точно название, а чтобы побыстрее, народ пока не возмущался)
Tod, я очень часто прокликиваю путь от главной до статьи с моей купленной ссылкой, и если путь не указан — отправляю на доработку. Ссылки в ГГЛ достаточно дорогие, потому должны быть качественными. Вот такая я скАтина :)
Поставил и себе этот плагин. Точнее сказать он у меня уже стоял давно, но всё руки не доходили вставить код крошек.
Правда в хедер я его ставить не стал, а поставил в сингл. Чтобы выводился он в одиночных записях, рядом с количеством просмотров.
Спасибо вообще за ваш сайт, я столько искал подобную информацию, особенно о настройках плагинов ( они ведь все идут в основном на англ.), полезными оказались для меня и комментарии к статье
Спасибо, установил себе, работает без пробелм :-) Добавил только в single.php — не вижу смысла — «забивать» header лишними ссылками.
Полный путь не выводится. Перемещаюсь по меню, захожу в статьи, а крошки выводятся в виде «Главная страница» — «текущая статья». Т.е пропускают подрубрики.
Ваня, надо разбираться, смотреть настройки, тестировать и т.п. Плагин рабочий, что-то не так подключилось.
Товарищи помогите!!! Как в этом плагине заменить слово «Главная» на иконку домика ?????
Urbix, сложно сказать, я уже не помню всех настроек плагина, может можно убрать отображение пункта «Главная» и в самом начале перед выводом хлебных крошек в шаблоне добавить иконку домика со ссылкой. То есть плагин будет выводить путь, а домик сделать самому через html.
Помогите пожалуйста!!! Всё делаю по вашей инструкции и всё равно не получается. В какое именно место файла header.php нужно добавить код ??? В начале? Я не шарю в html.
Anton, код нужно добавить в место шаблона, где будут выводиться хлебные крошки — если это header.php то ориентировочно где-то в конце этого файла. Без понимания данного процессе интеграции плагина, увы, ничего не получится — есть разные шаблоны и однозначного ответа типа «вставьте после 30-ой строки» я дать не могу, все индивидуально.
Согласен с автором, сначала тулил эти крошки на блог, ощутимого эффекта, не перелинковки незаметил от них, а вот уже на джумла где у меня доходит и до пятого уровня вложенности — им цены нет.
Кстати у вас первого увидел что впринципе для наших блогов вордпрессовских эти крохи и не нужны, а то по всему инету их нахваливают, чуть ли не супер сео-плагин!
Спасибо за интересный блог!
Добрый день. Подскажите, если знаете, что нужно и где поменять в коде плагина breabcrumbs чтобы вместо:
Главная страница » Раздел » Подраздел » Текущая страница выводилось Главная страница » Раздел » Подраздел » т.е. название страницы которая открыта не отображалось?! Спасибо
Ник, просмотрите внимательно все пункты настроек — там должно, по идее, что-то такое бывать. К сожалению, в блоге плагин не установлен, глянуть не могу. Если настройки нет, можно попробовать два (немного грубоватых) решения — отредактировать шаблон/файл плагина убрав отображение текущей страницы или скрыть его через CSS свойство.
Спасибо огромное, но Вы не могли бы подсказать, можно ли как то убрать кроши с главной страницы karasevokeramika.ru?
Дмитрий, я так понял проблему вы решили? на сайте не нашел хлебных крошек на главной. Теоретически тут 2 варианта — поискать соответствующую опцию в настройках модуля или добавить в код шаблона условие отображать на всех страницах кроме главной.
Чтобы убрать крошки с главной, можно поставить галочку на «Поместить ссылку на главную страницу блога в путь».
Подскажите почему у меня крошки располагаются в самом верху сайта, создается блок над сайтом сразу же после . Или может я не туда кинул код.? пробовал кидать по разным местам, все равно там же остается…
Dima, код реально «где-то не там», скорее всего вы ошиблись с «открытием/закрытием» PHP кода или что-то в этом роде. Посмотрите внимательно текст файла шаблона, там идет в php или в html участок кода, куда добавляете функцию.
Присоединяюсь к Нику. У меня тот же вопрос. Как отключить название материала в пути? Версия 5.0.1
Джо-Джо, посоветую то же самое — посмотреть настройки плагина. Где-то должна быть соответствующая настройка, возможно во вкладке «Текущая позиция».