Всем привет друзья. В сегодняшней статье я расскажу вам о том, что такое хлебные крошки, для чего они нужны и как добавить их на свой wordpress блог при помощи плагина и без него. Начнем!
Хлебные крошки – удобный способ перелинковки блога
Один из простых способов одновременно упростить навигацию по сайту и его перелинковку, это Хлебные крошки (breadcrumbs). Свое название он получил в честь того способа, благодаря которому герои немецкой сказки «Гензель и Гретель» пытались найти дорогу из леса.
Правда, детям крошки не помогли – их склевали птицы, а вот в сайтостроении функция, названная в честь неудачного способа спасения, прижилась и используется в ресурсах самого разного назначения, от личных блогов до интернет-магазинов.
Вы наверняка видели эту навигационную цепочку на самых разных интернет ресурсах. Обычно ее размещают над статьей, и выглядит она примерно так:
Главная страница > Рубрика > Подрубрика > Текущая страница
Причем все «звенья», кроме последнего — это внутренние ссылки.
Благодаря этой цепочке, читатель в любой момент может понять, на каком уровне сайта он находится и имеет возможность пройти как по всей цепочке, так и сразу перейти в интересующий его раздел или же вернуться на главную страницу ресурса.
Какую пользу несут хлебные крошки для сайта и блога
Как сказано выше, во-первых, это упрощение навигации. Например, читатель зашел в статью, прочитал ее и решил почитать другие статьи раздела. Благодаря хлебным крошкам, ему не нужно искать карту сайта или список рубрик. Он просто вернется на шаг назад.
Вы ненавязчиво приглашаете читателя перейти по ссылкам, то есть даете ему еще одну причину задержаться на вашем сайте. Это, в свою очередь, улучшает поведенческие факторы, то за что поисковые роботы, в первую очередь, отличают блоги и сайты.
Чем сложнее структура сайта, тем важнее установить на него breadcrumbs. Так как посетителям, особенно впервые оказавшимся на данном ресурсе, сложно разобраться во всех блоках, страницах, разделах и подразделах. Если им не будет подсказок, они так и будут уходить, прочитав лишь одну статью.
Вторая задача этого элемента, тесно связанная с первой – внутренняя оптимизация сайта, точнее еще один способ связать ссылками как можно большее количество статей. Причем, в отличие от ручной перелинковки, здесь все происходит автоматически. Над каждой опубликованной статьей сразу появляется нужная навигационная цепочка.
Данную функцию можно добавлять на сайты и блоги разными способами. Рассмотрим два самых простых варианта для WordPress – установку с помощью плагина и с помощью внесения небольших изменений в код.
Как добавить хлебные крошки на блог плагином
Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.
Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».
Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».
и над этой строчкой вставляем следующий кусочек кода:
Если вы хотите разместить навигационную цепочку в другом месте, значит этот же код размещаете там.
После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.
Осталось перейти на блог и полюбоваться на результат.
Как добавить хлебные крошки на блог без плагина
Так как любые плагины, это дополнительная нагрузка на блог, замедляющая его работу, то лучше просто немного изменить код, тем более что в данном случае, это проще, чем установить плагин.
Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:
Function the_breadcrumb() { echo "You are here: "; if (!is_front_page()) { echo "Home"; echo " » "; if (is_category() || is_single()) { the_category(" "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo "Home"; } }
и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.
Теперь нужно вот этот код:
разместить там, где вы хотите видеть навигационную цепочку, например, опять же над заголовком статьи. Для этого идем в single.php, ищем строчку с the_title и над ней вставляем этот код и сохраняем изменения.
Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).
Кроме того, нужно убедиться, что изменения одинаково хорошо смотрятся на разных браузерах – не наплывают на другие части темы и, одновременно, хорошо заметны.
Все, «Хлебные крошки» помогают вашим читателям, а вы можете гордиться тем, что самостоятельно разобрались в их установке. Всем спасибо за внимание!
P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог:
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про то, как сейчас у меня реализованы хлебные крошки, помогающие читателю понять, внутри какой структуры находится данная статья. Наверное, они в первую очередь необходимы проектам со сложной системой вложенных категорий (рубрик), но лично мне они понравились чисто внешне.
Есть и оптимизаторская подоплека в использовании крошек — они являются элементом внутренней перелинковки, о которой я писал не так давно. Другие дело, что статический вес они нагоняют на рубрики и главную страницу, что лично мне совсем не нужно. Однако, у меня уже был период, когда крошки стояли довольно продолжительное время (более года, и это совпало с периодом наибольшего роста посещаемости).
Зачем крошки и почему без плагина?
Реализованы они тогда были на основе плагина — довольно таки функционального, но с довольно бедными возможностями визуального оформления крошек.
Конечно же, можно было бы использовать и стили для создания красивости, но тогда я не очень то шибко с ним дружил. Только написав по CSS стилям, стал и сам в этом немного разбираться. Получилось как в анекдоте про негодующего на непонятливость студентов преподавателя, который в сердцах заявил: «Три раза объяснил! Сам понял! А вы...».
Вот, потом крошки я убрал и уже даже точно не помню почему, но точно не из-за соображений оптимизации. Вообще, если опираться на и мои статьи, то крошки будут лишними в тонком деле создания идеальной схемы перелинковки. Но, тем не менее, стоит ли мне верить после .
Теорий много по данному вопросу. Если в упомянутых статьях я пытался умничать и искать истину в высоких материях (аякс, правильная схемы перелинковки) то вот этот товарищ, например, рассказывает как оптимизировать wordpress в тезисах, без деталей, но вполне понятно. Надо быть проще и люди к тебе потянутся, а за ними и поисковики, возможно. Ладно вернем к крошкам.
Сделать их совсем не сложно и плагинов ставить не придется. В этом есть свой плюс, ибо один кривоватый плагин может нагнуть довольно мощный сервер. У меня, например, похожие проблемы возникли после установки описанного чуть ранее плагина внутренней перелинковки (выезжающая панелька в правой области, которая появляется на моем блоге при прокрутки его страницы до начала комментариев).
Я, как вы помните (правда не понятно, зачем вам это помнить, но все же), сейчас сижу на от Инфобокса . Замечательная и недорогая штука, но вот чуть больше месяца назад у меня — как будто бы меня вернули к обычному .
Волнообразно накатывали жуткие тормоза, что довольно часто происходит на обычном хостинге, если кто-то с твоего же сервера начинает отжирать общие ресурсы не мерено или ддосят кого-либо из твоих виртуальных соседей.
Начал писать гневные письма в техподдержку, требовать сатисфакции и потрясать ссылкой на упомянутую чуть выше статью про их Parallels, который я там хвалил, а он вон какой гадкий оказался.
Мне отвечали (вежливо, но довольно убедительно), что у меня нагрузка идет очень высокая. Я им отвечал, что она у меня с начала года в разы снизилась (имея в виду посещаемость и количество просмотров). Ну, в общем, они меня убедили подумать в сторону того, а что я, собственно, последнее время такое с блогом делал, что могло так нехорошо отразиться на его работе.
В силу возникших сложностей с поисковым трафиков я думал в основном о способах все вернуть взад, ну или предавался меланхолии, вспоминая славные деньки до обвала. В общем, с трудом вспомнил, что примерно в это же время я и ставил этот самый плагин upPrev. Полез в его настройки и прочитал правильно фразу на вкладке «Кеш»:
Использование на больших сайтах (более 1000 сообщений) может привести к падению сайта
Точнее, я ее просто не дочитал до конца в момент настройки и поставил галочку на автомате, решив что кеш это вообще замечательно, а в отношения Вордпресс, так вообще полный цимус (вспомните моего и позволяющего платить за хостинг в разы меньше). В общем, кеш в upPrev отключил и тормоза исчезли.
Конечно же, этот пример не говорит однозначно о вреде плагинов, но они могу являться причиной тормозов (может быть даже по началу и незаметных). В общем, если кто-то upPrev тоже ставил, то вы знаете что делать, если хостер сообщит вам о превышении допустимой нагрузки или вы сами это почувствуете.
Собственно поэтому, по возможности, стараюсь обходиться минимальным . Тем более, что довольно интересно использовать разные функции, ибо сам себе кажешься умнее, чем есть на самом деле. Особенно это здорово, когда PHP ты знаешь, а точнее совсем не знаешь. Вот тогда прям таки настоящий ребус получается, как, например, тот, что был описан мною .
Ну, и кроме всего прочего данные хлебные крошки производят очень приятное визуальное впечатление:
А для подгона их под дизайн своего блога у вас будет выбор из шести цветовых гамм.
Реализация красивых хлебных крошек для Вордпресс
Для начала нужно будет подключится к своему серверу (виртуальному хостингу) по ФТП. Например, с помощью описанной Файлзилы. Потом заходите в папку с вашей текущей темой оформления, которая обычно живет по такому пути:
/wp-content/themes/ее название
Вообще, темы Вордпресса я описывал , а точнее рассказывал из каких файлов (шаблонов) они могут состоять и за какие фрагменты макета блога они отвечают. Однако, кроме чисто дизайнерских решений в папке с темой вы найдете и файл functions.php (если его нет, то просто создаете его).
Он служит для прописывания всяческих функций или фильтров, которые позволяют реализовать много чего полезного не копаясь непосредственно в файлах движка, изменения в которых после могут быть потеряны. А все, что внесете в functions.php, будет жить вплоть до смены вами темы оформления.
Итак, добавляете в этот расчудесный файл следующую функцию:
//Breadcrumb как у Google function the_breadcrumb() { if (!is_home()) { echo "
"; }Только не впихивайте ее внутрь уже существующей функции. Наверное, проще всего будет найти слово function и вставить приведенную выше конструкцию сразу перед ней (хотя, лучше будет разделить переносом строки для наглядности).
Это каркас. Теперь нужно будет добавить к нему еще немного стилей. Сначала вам желательно определиться с расцветочкой, но можно будет ее откорректировать и по ходу.
В архиве будет шесть графических файлов в формате PNG, каждый из которых представляет из себя с полосками выбранного вами оттенка и разными степенями осветления:
Одна из полосок будет использоваться по умолчанию, другая будет показана при подведении к ней курсора мыши, а третья — при щелчке по ссылке из хлебных крошек. Все это задается, естественно, в стилях CSS, которые мы сейчас и пропишем.
Но сначала распакуйте архив с фонами и залейте их в папку с вашей темой в имеющуюся там директорию:
/wp-content/themes/папка темы/images
Теперь откройте на редактирование (лучше не в админке Вордпресс, а подключившись к сайту по ФТП) файл со стилями style.css из папки с вашей темой оформления. Можно прямо в его конец добавить следующий код:
#breadcrumb {display:block;float:none;margin:0 0 40px 0;font-weight:600;} #breadcrumb ul {font-family: Helvetica, sans-serif;list-style: none;} .crumbs {display: block;} .crumbs li.first {padding-left: 8px;} .crumbs li a, .crumbs li a:link, .crumbs li a:visited {color: #616d7e;display: block;float: left;font-size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;} .crumbs li a {background-image: url(images/bg-crumbs-blue.png);background-position: 100% 0%;background-repeat: no-repeat;position: relative;} .crumbs li a:hover {background-position: 100% -48px;color: #333;cursor: pointer;} .crumbs li a:active {background-position: 100% -96px;color: #333;} .crumbs li.first a span {border-left: 1px solid #d9d9d9;height: 29px;left: 0;position: absolute;top: 0;width: 3px;}
В строке background-image: url (images/bg-crumbs-blue.png) вы вольны будете изменить название графического файла фона на тот, чей цвет больше всего подходит дизайну вашего блога. Про то, как работает , а так же про все его возможные вариации (color, position, image, repeat, attachment). На самом деле жуть, как интересно, ибо открывает массу возможностей.
Вывод крошек в постах Вордпресса и небольшой их тюнинг
Собственно, базу мы подготовили и осталось теперь только определиться, где-именно наши хлебные крошки будут видны посетителям. Очевидно, что на главной они будут лишними. Лично я решил их выводить только в постах, а значит нам нужно будет добавить код их вызова в тот файл (шаблон) вашей темы оформления, который за это отвечает.
В большинстве случаев это будет файл single.php, но возможно, что у вас вместо него работает index.php (см. выше ссылку на статью про устройство тем Вордпресс). Тогда для вывода хлебных крошек только в постах, вам придется создать файл single.php, скопировав в него содержимое index.php, а затем добавив код вызова крошек только в single.
Он (код) будет выглядеть так:
Я не долго думая запихнул его в самом начале, сразу после подгрузки шапки блога:
Собственно, на блоге крошки прорезались, но побродив по страницам я обнаружил один неприятный момент — некоторые заголовки моих статей оказывались длиннее, чем ширина графической подложки. Буковки вылазили на ее пределы и было не айс.
Можно было бы, конечно, удлинить в графическом редакторе () полоски подложки, но это было бы слишком просто, а мы не ищем легких путей. Или, наоборот.
В общем, я немного сократил количество символов (заменил в коде the_title () на trim_title_chars (60, "...")), которое отображается в ссылке на текущий пост, ибо названия у меня слишком длинные и в заготовки подложек попросту не влазят:
Function the_breadcrumb() { ... if(is_single()) { echo "
Вот, но для этого в наш многострадальный файл functions.php пришлось добавить еще одну функцию:
Function trim_title_chars($count, $after) { $title = get_the_title(); if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count); else $after = ""; echo $title . $after; }
Замечательная штука и может везде, где вам понадобится, заменить the_title () на trim_title_chars (60, "..."). Например, у меня это реализовано в . Естественно, что цифра 60 означает количество отображаемых символов Тайтал и вы вольны его заменить на нужное вам.
Но потом мне не понравилось, что слова обрезаются посередине или еще как-то некрасиво, поэтому я в итоге заменил trim_title_chars (60, "...") на trim_title_words (5, "..."). Догадайтесь — чего там 5? Ну, очевидно, что слов, а дальше будет стоять троеточие.
Echo "
Правда, в functions.php нужно добавить еще одну функцию:
Function trim_title_words($count, $after) { $title = get_the_title(); $words = split(" ", $title); if (count($words) > $count) { array_splice($words, $count); $title = implode(" ", $words); } else $after = ""; echo $title . $after; }
Вот и все, что я хотел сказать по этому многозначительному поводу.
P.S. перенес мой маленький отчет в комментарии к посту о .
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)
Файл functions.php из папки с темой WordPress и реальные примеры его использования
Граватар - как создать глобальный аватар и настроить вывод иконки Gravatar в теме Вордпресса
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Заголовки статей H1, H2, H3 в Вордпресс, а так же способы отображения категорий (the_content, the_excerpt и другие)
Как использовать Ajax для закрытия ссылок и как задать условие вывода чего-либо в постах нужных рубрик Вордпресса (in_category)
Как в WordPress можно выводить посты из категории с миниатюрами (их создание в Auto Post Thumbnail и catch_that_image)
Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner и число запросов к БД
Как узнать ID рубрики, категории, записи или страницы в WordPress и как вернуть столбец с ID в админку Вордпресса
Как защитить Joomla 1.5 от вирусов и постоянных взломов, а также поставить дополнительную защиту на админку Joomla и WordPress
Здравствуйте, уважаемые читатели! Сегодня речь пойдет о том, что такое хлебные крошки, какие функции они выполняют на блоге, а самое главное — как установить и настроить плагин Breadcrumb NavXT, позволяющий создать хлебные крошки WordPress .
Что такое хлебные крошки
«Хлебные крошки» показывают путь на блоге, по которому необходимо пройти от главной до текущей страницы. Это своего рода навигационная цепочка, каждое звено которой является ссылкой на страницу более высокого уровня. Самый высокий уровень — это главная блога. В идеале путь к любой странице блога от главной должен занимать максимум 3 клика мыши. Фактически, это главная — категория — запись или главная — категория — категория — запись , но никак не длиннее. Это необходимо для удобства не только пользователей, но и поисковых систем. Посты с более глубоким заложением поисковики могут индексировать с некоторой задержкой. К тому же их важность в глазах поисковиков уменьшается с увеличением уровня вложенности. Как следствие — ссылки на самые важные и интересные статьи на блоге старайтесь проставлять на главной.
Подобную фишку на сайте называются по-разному — навигатор, навигационная цепочка, путь на сайте, но самым популярное название — это именно «хлебные крошки». Такое название пошло от сказки про Гензеля и Грету, в которой герои разбрасывали хлебные крошки, чтобы найти дорогу назад.
Помимо удобства и навигации они выполняют еще одну важную функцию — улучшает внутреннюю перелинковку страниц блога. Ранее я уже рассказывал о трех важных и интересных плагинах, для внутренней перелинковки — , которые настоятельно рекомендую установить каждому на свой блог. Breadcrumb NavXT смело можно причислить к этому списку.
Когда поисковики индексируют какую-то статью блога, они сразу видят к какой рубрики она относятся и полный путь до главной, что помогает им определить структура блога. Только не забудьте еще добавить на блог как для поисковиков, так и для пользователей.
Установка и настройка плагина Breadcrumb NavXT
Установка Breadcrumb NavXT несколько отличается от , поэтому рассмотрим ее подробно:
2. Распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Для этого воспользуйтесь — FileZilla.
3. Активируйте плагин через раздел «Плагины» панели администратора WordPress.
4. Теперь необходимо вставить следующий код:
Второе по популярности место — это шапка сайта. Для этого код необходимо вставить только в один шаблон — header.php . Точного места я не могу сказать, все зависит от темы. Здесь подойдет способ научного тыка — вставляете код, сохраняете, смотрите результат, не нравится — меняете местоположения кода в шаблоне.
Некоторые продвинутые темы по умолчанию выводят хлебные крошки на блоге, но я бы посоветовал все-таки использовать плагин Breadcrumb NavXT, потому что он имеет более гибкие настройки. В таких случаях следует заменить стандартный код в шаблонах темы, отвечающий за вывод хлебных крошек, на код плагина, указанный выше. Стандартный код во многом должен быть похож на приведенный код плагина, поэтому найти его не составит труда (обычно он заключен в тег div, ID или class которого имеет тоже название — breadcrumb).
После добавления кода, можно изменить внешний вид хлебных крошек WordPress. Для этого следует добавить стили к классу breadcrumb в файл style.css используемой темы. Конечно, для этого необходимо знать основы CSS, поэтому советую ознакомиться с бесплатным самоучителем по CSS от Влада Мержевича, который вы можете скачать с моего блога.
Настройки плагина располагаются в разделе «Параметры» — «Breadcrumb NavXT». В интернете можно найти русификатор к нему, но, к сожалению, на последние версии плагина он встает очень криво — большая часть настроек так и остается на английском языке. Поэтому я рассматривать буду настройки именно на английском, давая перевод и свои комментария по самым важным пунктам.
Первая закладка называется «General» — Общие.
Breadcrumb Separator — символ, который будет использоваться в качестве разделителями между звеньями навигационной цепочки.
Breadcrumb Max Title Length — в качестве звена навигационной цепочки используется заголовок страницы, эта опция задает максимальную длину заголовка, 0 — используется заголовок целиком, не обрезая его.
Home Breadcrumb — указывать или нет в хлебных крошках главную блога. Советую включить и задать ей имя в соответствии с названием вашего блога.
— текст, который будет виден на главной блога, если это не ссылка.
Переходим на вкладку Current Item , что означает «Текущей пункт» или «Текущее местоположение».
Link Current Item — выводить название текущей страницы в качестве ссылки на нее же или нет.
Paged Breadcrumb — поддержка постраничной навигации. После включения будут отображаться номера в хлебных крошках.
— шаблон, определяющий название текущей позиции при включенной поддержки постраничной навигации.
Следующий раздел называется «Post & Pages» — Записи и страницы.
Post Taxonomy Display — показывать все варианты путей, ведущих к записи.
Post Taxonomy — в вариантах путей к записи можно отображать. Для своего блога выбрал стандартный вариант — Рубрики.
Page Template и Page Template (Unlinked) — аналогичны рассмотренным выше Post Template и Post Template (Unlinked), только выводится будут для опубликованных статей.
На очереди раздел «Categories & Tags» .
В этом разделе задаются шаблоны для формирования хлебных крошек рубрик и тэгов. Просто действуйте по аналогии с рассмотренными выше шаблонами для записей.
В разделе можно задать шаблоны для страницы автора (Author ), даты/архива (Date ), результатов поиска (Search ) и ошибки 404 .
Остальные опции я не использую, поэтому умничать о их назначении не буду.
Ну вот во всем и разобрались! Поздравляю! На этом свое повествование заканчиваю и прощаюсь с вами, но не надолго, ибо скоро на моем блоге выйдет очередная интересная статья!
Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.
Первая причина популярности плагина "Хлебные крошки"
Это удобство для навигации по . После установки и настройке плагина Breadcrumb NavXT в верхней части страницы появляется удобное меню навигации которое поэтапно показывает пользователю не только название страницы на которой он находится но и последовательно все страницы сайта на которых он побывал ранее. Что безусловно очень удобно, особенно при изучении большого количества материала и просмотра нескольких страниц.
Вторая причина востребованности этого плагина
Дополнительная перелинковка страниц, и как следствие + в ранжировании поисковиков. (Собственно, прозвище "Хлебные крошки" произошло от сказки братьев Гримм под названием Гензель и Гретель по сюжете которой дети чтобы не заблудится в лесу бросали хлебные крошки… Но это так, лирическое отступление.) Вернёмся всё же к нашему плагину.
Скачиваем и устанавливаем плагин Breadcrumb NavXT.
Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "Breadcrumb NavXT "
Установка обычная ничем не отличается от установки остальных плагинов. А вот с настройками придётся повозиться.
Переходим по вкладке "Параметры"…
… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка"Основные" , все остальные вкладки настроек: "Записи и страницы", "Таксономии", "Другое" , можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:
Сохраняем изменения настроек, и на этом здесь все.
Теперь приступаем к самому интересному.
Необходимо отредактировать шаблон вашей темы.
К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.
Переходим в консоль и выбираем «Внешний вид»→«Редактор»:
В результате переходим в раздел редактирования тем. В этом разделе для редактирования необходимо выбрать именно ту тему которую вы сейчас используете. Как правило многие администраторы сайтов устанавливают несколько шаблонов сайтов но используется всего один. Поэтому редактировать следует тот который используется.
Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)
Выглядит это так:
Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: single.php, index.php и page.php, category.php Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)
Затем берём код:
И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (header ):
Естественно сохраняем каждый изменённый файл. После чего плагин Breadcrumb NavXT начнёт работать.
Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.
Но бывают случаи когда дизайн вашей темы сайта не совпадает с дизайном отображаемой строки Хлебных крошек.
В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.
Делается это так. Берём этот код:
.breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
} .breadcrumb a:hover {
color: #EF0E0E;
}
Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке "Таблица стилей" вашей темы
… и вставляем код в самом низу редактора
… сохраняемся, нажав "Обновить файл" Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.
Ну вот, теперь пожалуй всё.
«Хлебные крошки» — это важный элемент навигации веб-сайта, который повышает его юзабилити. Особенно это касается сайтов со сложной структурой. Я, к сожалению (а, может, и не к сожалению), не использую их на большинстве своих сайтов, возможно, потому, что у них слишком простая структура (для такого сайта, как этот, они, вроде бы, и не нужны).
Когда я решаю какую-либо задачу на WordPress-сайте, то всегда стараюсь обходится без плагинов , где это бывает возможно. Зачастую одна и та же задача может быть решена с меньшим количеством кода и бывает менее ресурсоемкой по сравнению с применением плагинов.
Особенности функции
«Хлебные крошки» выводятся для следующих типов страниц WordPress-сайта:
- постраничная навигация с главной страницы (вида site.ru/page/2/);
- архив рубрики;
- архив тега;
- архив за день;
- архив за месяц;
- архив за год;
- архив автора;
- произвольный тип записи;
- страница;
- пост;
- результаты поиска;
- страница с ошибкой 404.
- Добавляется порядковый номер страницы, если это 2-я или больше страница архивов.
- Можно задать любой символ разделителя между ссылками.
- Можно задать текст для ссылка «Главная».
- Интегрирована микроразметка Schema.org.
Отображается полная цепочка ссылок до текущей страницы. Например, если текущая страница находится в рубрике второго уровня, то цепочка будет выглядеть следующим образом:
Во всех решениях, которые я встречал (за исключением плагинов), такая цепочка выглядела вот так:
Т.е. одно звено потеряно.
Аналогично у меня выглядят и «крошки» для страниц. К примеру, для страницы 3-го уровня вложенности цепочка будет такой:
Главная > Страница 1-го уровня > Страница 2-го уровня > Страница 3-го уровня
Функция «Хлебные крошки» для WordPress (обновлено: 03.03.2019)
/* * "Хлебные крошки" для WordPress * автор: Dimox * версия: 2019.03.03 * лицензия: MIT */ function dimox_breadcrumbs() { /* === ОПЦИИ === */ $text["home"] = "Главная"; // текст ссылки "Главная" $text["category"] = "%s"; // текст для страницы рубрики $text["search"] = "Результаты поиска по запросу "%s""; // текст для страницы с результатами поиска $text["tag"] = "Записи с тегом "%s""; // текст для страницы тега $text["author"] = "Статьи автора %s"; // текст для страницы автора $text["404"] = "Ошибка 404"; // текст для страницы 404 $text["page"] = "Страница %s"; // текст "Страница N" $text["cpage"] = "Страница комментариев %s"; // текст "Страница комментариев N" $wrap_before = "
"; // закрывающий тег обертки $sep = ""; // разделитель между "крошками" $before = ""; // тег после текущей "крошки" $show_on_home = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $show_home_link = 1; // 1 - показывать ссылку "Главная", 0 - не показывать $show_current = 1; // 1 - показывать название текущей страницы, 0 - не показывать $show_last_sep = 1; // 1 - показывать последний разделитель, когда название текущей страницы не отображается, 0 - не показывать /* === КОНЕЦ ОПЦИЙ === */ global $post; $home_url = home_url("/"); $link = ""; $link .= "%2$s"; $link .= ""; $link .= ""; $parent_id = ($post) ? $post->post_parent: ""; $home_link = sprintf($link, $home_url, $text["home"], 1); if (is_home() || is_front_page()) { if ($show_on_home) echo $wrap_before . $home_link . $wrap_after; } else { $position = 0; echo $wrap_before; if ($show_home_link) { $position += 1; echo $home_link; } if (is_category()) { $parents = get_ancestors(get_query_var("cat"), "category"); foreach (array_reverse($parents) as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } if (get_query_var("paged")) { $position += 1; $cat = get_query_var("cat"); echo $sep . sprintf($link, get_category_link($cat), get_cat_name($cat), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_current) { if ($position >= 1) echo $sep; echo $before . sprintf($text["category"], single_cat_title("", false)) . $after; } elseif ($show_last_sep) echo $sep; } } elseif (is_search()) { if (get_query_var("paged")) { $position += 1; if ($show_home_link) echo $sep; echo sprintf($link, $home_url . "?s=" . get_search_query(), sprintf($text["search"], get_search_query()), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_current) { if ($position >= 1) echo $sep; echo $before . sprintf($text["search"], get_search_query()) . $after; } elseif ($show_last_sep) echo $sep; } } elseif (is_year()) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . get_the_time("Y") . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } elseif (is_month()) { if ($show_home_link) echo $sep; $position += 1; echo sprintf($link, get_year_link(get_the_time("Y")), get_the_time("Y"), $position); if ($show_current) echo $sep . $before . get_the_time("F") . $after; elseif ($show_last_sep) echo $sep; } elseif (is_day()) { if ($show_home_link) echo $sep; $position += 1; echo sprintf($link, get_year_link(get_the_time("Y")), get_the_time("Y"), $position) . $sep; $position += 1; echo sprintf($link, get_month_link(get_the_time("Y"), get_the_time("m")), get_the_time("F"), $position); if ($show_current) echo $sep . $before . get_the_time("d") . $after; elseif ($show_last_sep) echo $sep; } elseif (is_single() && ! is_attachment()) { if (get_post_type() != "post") { $position += 1; $post_type = get_post_type_object(get_post_type()); if ($position > 1) echo $sep; echo sprintf($link, get_post_type_archive_link($post_type->name), $post_type->labels->name, $position); if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } else { $cat = get_the_category(); $catID = $cat->cat_ID; $parents = get_ancestors($catID, "category"); $parents = array_reverse($parents); $parents = $catID; foreach ($parents as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } if (get_query_var("cpage")) { $position += 1; echo $sep . sprintf($link, get_permalink(), get_the_title(), $position); echo $sep . $before . sprintf($text["cpage"], get_query_var("cpage")) . $after; } else { if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } } } elseif (is_post_type_archive()) { $post_type = get_post_type_object(get_post_type()); if (get_query_var("paged")) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_post_type_archive_link($post_type->name), $post_type->label, $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . $post_type->label . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_attachment()) { $parent = get_post($parent_id); $cat = get_the_category($parent->ID); $catID = $cat->cat_ID; $parents = get_ancestors($catID, "category"); $parents = array_reverse($parents); $parents = $catID; foreach ($parents as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } $position += 1; echo $sep . sprintf($link, get_permalink($parent), $parent->post_title, $position); if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } elseif (is_page() && ! $parent_id) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . get_the_title() . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } elseif (is_page() && $parent_id) { $parents = get_post_ancestors(get_the_ID()); foreach (array_reverse($parents) as $pageID) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_page_link($pageID), get_the_title($pageID), $position); } if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } elseif (is_tag()) { if (get_query_var("paged")) { $position += 1; $tagID = get_query_var("tag_id"); echo $sep . sprintf($link, get_tag_link($tagID), single_tag_title("", false), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . sprintf($text["tag"], single_tag_title("", false)) . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_author()) { $author = get_userdata(get_query_var("author")); if (get_query_var("paged")) { $position += 1; echo $sep . sprintf($link, get_author_posts_url($author->ID), sprintf($text["author"], $author->display_name), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . sprintf($text["author"], $author->display_name) . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_404()) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . $text["404"] . $after; elseif ($show_last_sep) echo $sep; } elseif (has_post_format() && ! is_singular()) { if ($show_home_link && $show_current) echo $sep; echo get_post_format_string(get_post_format()); } echo $wrap_after; } } // end of dimox_breadcrumbs()Функцию необходимо поместить в файл functions.php вашей WordPress-темы. После этого в то место шаблона, где хотите выводить «хлебные крошки», добавьте следующий код:
Единственное, что теперь останется сделать — оформить их с помощью CSS. Для этого к блоку «хлебных крошек» предусмотрен класс.breadcrumbs , для разделителя — .breadcrumbs__separator а для текущей «крошки» — .breadcrumbs__current .
