или что-то похожее, все зависит от вашей темы, сразу после них и вставляем. Вот и сам код:
< ?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>
В настройках плагина можно менять разделители, иерархию и шаблоны вывода текста в ссылках, если что-то не устраивает. Для настройки внешнего вида опять же можно прописывать стили, только тут уже к классу .breadcrumb
3. Хлебные крошки с помощью хаков в WordPress
Вы можете внести самостоятельно нужный код в функции вашей темы — файл functions.php
и вызвать крошки там, где вам нужно без всяких плагинов.
Из плюсов данного способа – уменьшаем нагрузку на блог, т.к. избавляемся от лишнего плагина. Из минусов – использование хаков, и тем более их настройка под себя может вызвать трудности у новичков.
В сети присутствует немало разных хаков с вариантами хлебных крошек.
Один из лучших вариантов на мой взгляд это скрипт от . Разрешение на размещение скрипта от автора получено, так что выкладываю:
function dimox_breadcrumbs() {
/* === ОПЦИИ === */
$text[‘home’] = ‘Главная’; // текст ссылки "Главная"
$text[‘category’] = ‘Архив рубрики "%s"’; // текст для страницы рубрики
$text[‘search’] = ‘Результаты поиска по запросу "%s"’; // текст для страницы с результатами поиска
$text[‘tag’] = ‘Записи с тегом "%s"’; // текст для страницы тега
$text[‘author’] = ‘Статьи автора %s’; // текст для страницы автора
$text[‘404’] = ‘Ошибка 404’; // текст для страницы 404
$showCurrent = 1; // 1 — показывать название текущей статьи/страницы, 0 — не показывать
$showOnHome = 0; // 1 — показывать "хлебные крошки" на главной странице, 0 — не показывать
$delimiter = ‘ » ‘; // разделить между "крошками"
$before = »; // тег перед текущей "крошкой"
$after = »; // тег после текущей "крошки"
/* === КОНЕЦ ОПЦИЙ === */
global $post;
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = »;
$linkAfter = »;
$linkAttr = ‘ rel="v:url" property="v:title"’;
$link = $linkBefore . ‘
if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo ‘
’ . $text[‘home’] . ‘
echo ‘
’ . sprintf($link, $homeLink, $text[‘home’]) . $delimiter;
if (is_category()) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(», false)) . $after;
} elseif (is_search()) {
echo $before . sprintf($text[‘search’], get_search_query()) . $after;
} elseif (is_day()) {
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;
} elseif (is_month()) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo $before . get_the_time(‘F’) . $after;
} elseif (is_year()) {
echo $before . get_the_time(‘Y’) . $after;
} elseif (is_single() && !is_attachment()) {
if (get_post_type() != ‘post’) {
$slug = $post_type->rewrite;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
} else {
$cat = get_the_category(); $cat = $cat;
if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
}
} elseif (!is_single() && !is_page() && get_post_type() != ‘post’ && !is_404()) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif (is_attachment()) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat;
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif (is_page() && !$post->post_parent) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} elseif (is_page() && $post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo $delimiter; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif (is_tag()) { echo $before . sprintf($text[‘tag’], single_tag_title(», false)) . $after; } elseif (is_author()) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;
} elseif (is_404()) {
echo $before . $text[‘404’] . $after;
}
if (get_query_var(‘paged’)) {
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ‘)’;
}
echo ‘
}
} // end dimox_breadcrumbs()
Вставлять данный код нужно, как вы уже догадались, в functions.php
вашего шаблона (не забываем делать резервную копию
) в любое место между и ?>
(Для новичков - копировать левую колонку с цифрами не нужно, они лишь для удобства, показывают номер строки кода на блоге)
Как вы заметили, в строчках с 3 по 16ю идут настройки скрипта, которые вы можете менять по своему усмотрению. И теперь для вывода навигации делаем уже знакомую процедуру - вставляем в single.php следующий код:
< ?php if (function_exists(‘dimox_breadcrumbs’)) dimox_breadcrumbs(); ?>
Сам скрипт проверил, все отлично работает, так что если вы предпочитаете обходиться без плагинов, то этот вариант для вас. Теперь вы знаете, что такое хлебные крошки, для чего они нужны, и как их сделать для своего блога на WordPress. А если нет, то перечитайте все сначала:) Если после 2-3 прочтений вы что-то так и не поняли, то задавайте вопросы в комментариях, постараюсь помочь) Думаю этот гусь тоже не отказался бы от хлебных крошек, глядишь не такой злой был бы:)
Хлебные крошки в WordPress – вспомогательный элемент навигации, который показывает положение пользователя относительно всей иерархии ресурса. Проще говоря, это меню показывает, где именно сейчас находится посетитель.
Хлебные крошки называются меню по причине того, что они отображают разделы с ссылками, благодаря которым можно «прыгать» по иерархии сайта.
К слову, такая навигация была иронично названа по аналогии с одной из сказок. Ее суть заключалась в том, что дети, которых завели в лес, не смогли найти обратного пути домой, ведь всю дорогу разбрасывали хлебные крошки. В итоге они были склеваны птицами, поэтому дороги обратно дети не нашли (им нужно было кидать камешки).
Собственно хлебные крошки очень полезны для посетителей, ведь они могут сориентировать пользователя в правильном направлении и дать общее представление о структуре сайта. Неплохой такой вариант вспомогательной навигации, которая не идет в ущерб основной. Ну а также они предоставляют возможность перелинковки страниц, что хорошо для SEO. Но всегда существуют свои нюансы. Так, если взять стандартный шаблон, то тут от хлебных крошек толку будет мало (когда пользователь находится в рубриках, то крошки, по сути, просто повторили бы эту информацию).
Breadcrumb полезны в таких случаях:
- когда они отлично смотрятся с дизайном площадки (в этом случае меню используется не для оптимизации, а только для пользы и удобства посетителей);
- когда площадка имеет действительно сложную структуру (например, корпоративный ресурс со сложной и запутанной структурой).
Всего существует несколько типов крошек, которые используются как в русскоязычном сегменте интернета, так и за рубежом:
- Location. Данный тип определяет путь, и он является постоянным, т.е. он не будет меняться по мере передвижения пользователя по ресурсу;
- Path. Этот тип показывает посетителю тот путь, который он уже прошел. Главным минусом таких крошек является то, что если пользователь придет из поисковой машины, то крошки не будут показываться;
- Attribute. Такие крошки показываются в виде меток на конкретных страницах и позволяют определить рубрику на сайте. Данный вариант наиболее удобен и работает практически на всех ресурсах.
Раскрутка сайтов по НЧ запросам имеет ряд достоинств, что особенно важно для коммерческих проектов; крошки иногда отбивают необходимость во вложении средств, необходимых для приобретения внешних ссылок. То есть вести раскрутку по НЧ запросам можно только при помощи одной лишь оптимизации за счет создания корректной перелинковки (иногда это действительно работает, но не стоит ожидать слишком многого от такого решения). Главное тут то, что посетители, которые пришли с поисковиков по таким запросам, очень часто конвертируются в деньги, а не просто в минутных гостей (со средне- и высокочастотными запросами такой номер не проходит).
В некотором роде хлебные крошки похожи на кровеносную систему, которая предоставляет возможность донести кислород до самых отдаленных «внутренних органов». Конечно, можно самостоятельно добавлять вручную линки на прочие материалы по теме, но для этого потребуется писать отдельный материал. Для создания меню хлебных крошек в первую очередь рассмотрим вариант без необходимости установки плагинов, а затем все же рассмотрим парочку из них, которые, на наш взгляд, являются самыми лучшими.
Вариант без установки плагина
Рассмотрим способ, как реализовать крошки на вашей площадке без установки каких-либо плагинов. Он довольно прост с точки зрения реализации, поэтому ждать чего-то оригинального от этого решения не стоит. Зато все работает без плагинов, что говорит об отсутствии нагрузки на сайт.
Способ состоит из пары шагов:
- вписывание кода в файл functions.php;
- вписывание кода крошек в нужное место.
Итак, берем первый код и вставляем его в файл functions.php вашего активного шаблона:
function the_breadcrumb() {
if (!is_front_page()) {
echo "Главная";
echo " » ";
if (is_category() || is_single()) {
the_category(" ");
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
else {
echo "Home";
}
}
Его можно разместить в самом конце документа перед символами «?>» (без кавычек). Если в конце тега нет, то код можно закинуть в самое начало перед открывающимся тегом. При размещении кода смотрите, чтобы кодировка была UTF-8, или в противном случае некоторые русские буквы и слова будут отображаться неправильно. Задать кодировку можно при помощи редактора Notepad при помощи пункта «Кодировка – Кодировать в UTF-8 (без ВОМ).
Теперь используем другой код и прописываем его там, где и требуется вывести хлебные крошки:
the_breadcrumb ();
?>
Считается, что крошки должны размещаться везде, кроме главной страницы. То есть необходимо разместить этот код в файлах single.php, archive.php, page.php и category.php. Где конкретно размещать его – дело ваше, но по дефолту он вставляется перед выводом основного контента. Если есть возможность размещать код в главном блоке, то сделайте это, ведь потом не придется играться со стилями, чтобы крошки отображались как полагается.
Как видите, нужно лишь немного покопаться в файлах темы. Да и к тому же, способ работает без вспомогательных модулей. Ну а кому хочется получить возможность менять крошки на свое усмотрение, то придется ставить сторонние плагины. Отлично работает SEO by Yoast и Breadcrumb NavXT. Давайте рассмотрим первый из них.
Плагин SEO by Yoast
В качестве альтернативы вышеописанному способу можно использовать плагин SEO by Yaost, который способен создавать очень привлекательные крошки. Его основные достоинства:
- нет необходимости в установке сторонних модулей;
- плагин способен выводить рубрики и подрубрики, тем самым отображая полную картину площадки;
- есть возможность поменять текст ссылки, ведущей на главную;
- выделение последних страниц жирным;
- возможность изменения разделителя и префикса;
- установка формата таксономии;
- при помощи CSS можно экспериментировать с внешним видом крошек.
Но все же заметим, что в ряде случаев плагин может отображать крошки не совсем правильно, но по мере развития плагина, уверены, разработчики устранят ошибки и добавят все недостающие функции.
Начнем с загрузки и инсталляции. Получить плагин можно по ссылке : https://wordpress.org/plugins/wordpress-seo/. Установка стандартна – заливаем содержимое в папку wp-content/plugins и активируем его в админке. Теперь можно переходить и к настройке:
- В админ панели переходим в раздел «SEO – Дополнительно»;
- Произойдет загрузка дополнительных настроек плагина (он создан не только для отображения крошек), но конкретно нас интересует раздел «Навигационная цепочка»;
- Активируем крошки, но для их появления на площадке необходимо будет разместить специальный код (найти его сможете в конце этого списка);
- Выбираем один из разделителей, который поддерживается HTML5;
- Далее выбираем текст главной страницы сайта (например, «Главная», «Домой» и т.д.);
- Префикс – это символ или слово, которое будет отображаться перед всеми крошками на ресурсе (обычно ставят стрелочку);
- Далее можно выбрать префиксы конкретно для архивов, страниц результатов поиска, страницы 404;
- Выделять последний пункт жирным может и кому-то покажется полезным, но последняя страница часто идентична заголовку, поэтому тут решайте сами, как поступить;
- Последний пункт настроек – таксономия (можно выбрать между рубриками, форматами, метками);
- Сохраняем внесенные изменения.
После выполнения настройки необходимо добавить код в шаблон:
{yoast_breadcrumb("");} ?>
Вот и все, во всех остальных моментах работы с плагином разобраться не составит особого труда.
Плагин Breadcrumb NavXT
Плагин имеет огромное количество настроек, а главное – работает как качественные часики за несколько тысяч долларов. Как уже упоминалось выше, постраничная навигация WordPress возможна и без установки сторонних модулей, но с помощью Breadcrumb NavXT все упрощается – каждый пользователь сможет настроить навигационную цепь так, как ему нравится.
Загрузить плагин можно на странице : http://wordpress.org/extend/plugins/breadcrumb-navxt/ ( не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
При необходимости код можно добавить и в другие файлы вашей темы. Теперь нужно перейти в меню настроек и немного «поколдовать» с его опциями, благодаря которым можно делать с этими крошками, что только душа пожелает (разработчики действительно выполняли его на совесть).
Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).
Поле «Максимальная длинна» указывает длину анкора в символах. Мы рекомендуем указать ограничение в 60 символов, что полезно в плане оптимизации. Выше мы уже упоминали о пользе крошек для SEO; то есть крошки будут индексироваться поисковыми машинами, и использоваться они будут не только для передачи пустого веса. Оговоримся, что поисковые машины могут непредсказуемо относиться к ссылкам с идентичными анкорами, поэтому рекомендуем их укорачивать (это необязательно, но все же можно немного потратить времени на это).
Если проставить галочку напротив «Домашняя ссылка», то в крошках будет показываться ссылка на главную. И при необходимости можно выбрать анкор. Поля «Префикс» и «Суффикс» позволяют указать текст, который будет стоить перед или после линка на главную. Ну а поле «Текст домашней ссылки» позволит указать текст, который будет показан при наведении на линк домашней страницы.
Стоит взять во внимание: этот текст может учитываться поисковыми системами, как анкор. То есть, стоит указать ключевики, которые касаются вашей главной страницы. После этого сохраняем все внесённые изменения при помощи соответствующей кнопки.
Но это ведь только одна вкладка «Общие», поэтому можно пробежаться и по остальным вкладкам. Так, на следующей есть пункт настройки для линка, который будет указывать на страницу, где вы находитесь. Линк на текущую позицию улучшает внутреннюю оптимизацию ресурса, поэтому галочку поставить возле этого поля рекомендуем. Также не забываем, что мы рекомендовали не превышать 60 символов, во избежание создания крупных заголовков.
Следующее поле «Текст текущей позиции» можно не трогать, просто потому, что оно хорошо показывает смысл перехода (этот текст будет видеть посетитель, когда наведет курсор мыши на ссылку). Вкладка «Записи/Страницы» позволяет настроить показ ссылок на страницы со контентом и статические страницы площадки (для статей можно задать надпись «Текущая статья»).
На вкладке «Рубрики», по сути, все настройки походят на те, которые были на предыдущих страницах. При настройке мы не стали задавать префиксы и суффиксы, но внесли изменения в поле «Архивы». В результате всего этого, мы получили такие привлекательные крошки, где все исправно работает.
Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:
- Во-первых, оно полезно с точки зрения юзабилити — навигация сориентирует людей на сайте и прояснит его структуру.
- Во-вторых, эта фишка работает и для оптимизации, т.к. по сути, является еще одним вариантом , а также увеличивает число переходов и время пребывания (+ может отображаться в выдаче).
Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами — совсем другое дело. Плюс в он тоже отлично смотрится.
Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте . Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.
Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить.
Плагины и хлебные крошки в WordPress
Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.
Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:
Основная задача модуля, в принципе, никак не связана с нашей сегодняшней темой, но не упомянуть его нельзя. Одна из дополнительных фишек плагина Yoast SEO — хлебные крошки. То есть вам не придется устанавливать новый модуль, а просто активируете соответствующую опцию. В работе я использую именно этот вариант.
— самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.
Breadcrumb
В принципе, сложно найти решения, которые были бы интереснее предыдущих двух, хотя есть неплохие попытки. Так, например, в модуле Breadcrumb для WordPress внедрена поддержка шорткодов, плюс сама цепочка ссылок имеет оригинальное оформление (смотрите по ссылке Live Demo!»). Непонятно только поддерживаются ли дизайны в бесплатной версии. Также вы можете настраивать тип разделителя и добавлять текст в начале элемента. По словам разработчиков скрипт максимально простой и легкий.
Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками.
Хлебные крошки в Yoast SEO
Я не буду детально описывать все тонкости работы, почитать об этом можете в , сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.
После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:
Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).
Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:
Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.
Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:
То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации.
Плагин Breadcrumb NavXT для WordPress
Также при создании хлебных крошек под Вордпресс используется планин Breadcrumb NavXT. Модуль обладает хорошей функциональностью, о которой я частично упоминал выше, плюс содержит много интересных опций. Разобраться в нем сможет практически каждый пользователь и легко поменять нужные настройки элемента навигации.
Через админку либо скачиваете с официального репозитория . Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.
Здесь есть 4 закладки параметров:
- В «Основных» можно выбрать тип разделителя, убрать линк на главную и настроить показ текущей страницы. Формат строки задается через шаблоны.
- «Записи» — содержит опции для постов.
- «Таксономии» — отвечают за метки / категории.
- «Другое» — форматы страниц автора, архивов, 404 ошибки.
Советую пройтись по каждой вкладке, посмотреть все фишки. Формат отображения позволяет вносить любые изменения в данную навигацию — добавлять свой текст/символы, менять стили и т.п.
После указания параметров хлебных крошек Breadcrumbs в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:
Аналогично работе с 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
"Home"
;
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
"""
;
echo
the_search_query()
;
echo
"""
;
}
}
|
/**
* Generate breadcrumbs
* @author CodexWorld
* @authorURL www.codexworld.com
*/
function get_breadcrumb() {
echo "Home";
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 """;
echo the_search_query();
echo """;
}
}
Затем в макете отображения постов single.php или любом другом вызываете ее:
| breadcrumb {
padding
:
8px
15px
;
margin-bottom
:
20px
;
list-style
:
none
;
background-color
:
#f5f5f5
;
border-radius
:
4px
;
}
.breadcrumb
a {
color
:
#428bca
;
text-decoration
:
none
;
}
|
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. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про то, как сейчас у меня реализованы хлебные крошки, помогающие читателю понять, внутри какой структуры находится данная статья. Наверное, они в первую очередь необходимы проектам со сложной системой вложенных категорий (рубрик), но лично мне они понравились чисто внешне.
Есть и оптимизаторская подоплека в использовании крошек — они являются элементом внутренней перелинковки, о которой я писал не так давно. Другие дело, что статический вес они нагоняют на рубрики и главную страницу, что лично мне совсем не нужно. Однако, у меня уже был период, когда крошки стояли довольно продолжительное время (более года, и это совпало с периодом наибольшего роста посещаемости).
Зачем крошки и почему без плагина?
Реализованы они тогда были на основе плагина — довольно таки функционального, но с довольно бедными возможностями визуального оформления крошек.
Конечно же, можно было бы использовать и стили для создания красивости, но тогда я не очень то шибко с ним дружил. Только написав по CSS стилям, стал и сам в этом немного разбираться. Получилось как в анекдоте про негодующего на непонятливость студентов преподавателя, который в сердцах заявил: «Три раза объяснил! Сам понял! А вы...».
Вот, потом крошки я убрал и уже даже точно не помню почему, но точно не из-за соображений оптимизации. Вообще, если опираться на и мои статьи, то крошки будут лишними в тонком деле создания идеальной схемы перелинковки. Но, тем не менее, стоит ли мне верить после .
Теорий много по данному вопросу. Если в упомянутых статьях я пытался умничать и искать истину в высоких материях (аякс, правильная схемы перелинковки) то вот этот товарищ, например, рассказывает как оптимизировать wordpress в тезисах, без деталей, но вполне понятно. Надо быть проще и люди к тебе потянутся, а за ними и поисковики, возможно. Ладно вернем к крошкам.
Сделать их совсем не сложно и плагинов ставить не придется. В этом есть свой плюс, ибо один кривоватый плагин может нагнуть довольно мощный сервер. У меня, например, похожие проблемы возникли после установки описанного чуть ранее плагина внутренней перелинковки (выезжающая панелька в правой области, которая появляется на моем блоге при прокрутки его страницы до начала комментариев).
Я, как вы помните (правда не понятно, зачем вам это помнить, но все же), сейчас сижу на от Инфобокса
. Замечательная и недорогая штука, но вот чуть больше месяца назад у меня — как будто бы меня вернули к обычному .
Волнообразно накатывали жуткие тормоза, что довольно часто происходит на обычном хостинге, если кто-то с твоего же сервера начинает отжирать общие ресурсы не мерено или ддосят кого-либо из твоих виртуальных соседей.
Начал писать гневные письма в техподдержку, требовать сатисфакции и потрясать ссылкой на упомянутую чуть выше статью про их Parallels, который я там хвалил, а он вон какой гадкий оказался.
Мне отвечали (вежливо, но довольно убедительно), что у меня нагрузка идет очень высокая. Я им отвечал, что она у меня с начала года в разы снизилась (имея в виду посещаемость и количество просмотров). Ну, в общем, они меня убедили подумать в сторону того, а что я, собственно, последнее время такое с блогом делал, что могло так нехорошо отразиться на его работе.
В силу возникших сложностей с поисковым трафиков я думал в основном о способах все вернуть взад, ну или предавался меланхолии, вспоминая славные деньки до обвала. В общем, с трудом вспомнил, что примерно в это же время я и ставил этот самый плагин upPrev. Полез в его настройки и прочитал правильно фразу на вкладке «Кеш»:
Использование на больших сайтах (более 1000 сообщений) может привести к падению сайта
Точнее, я ее просто не дочитал до конца в момент настройки и поставил галочку на автомате, решив что кеш это вообще замечательно, а в отношения Вордпресс, так вообще полный цимус (вспомните моего и позволяющего платить за хостинг в разы меньше). В общем, кеш в upPrev отключил и тормоза исчезли.
Конечно же, этот пример не говорит однозначно о вреде плагинов, но они могу являться причиной тормозов (может быть даже по началу и незаметных). В общем, если кто-то upPrev тоже ставил, то вы знаете что делать, если хостер сообщит вам о превышении допустимой нагрузки или вы сами это почувствуете.
Собственно поэтому, по возможности, стараюсь обходиться минимальным . Тем более, что довольно интересно использовать разные функции, ибо сам себе кажешься умнее, чем есть на самом деле. Особенно это здорово, когда PHP ты знаешь, а точнее совсем не знаешь. Вот тогда прям таки настоящий ребус получается, как, например, тот, что был описан мною .
Ну, и кроме всего прочего данные хлебные крошки производят очень приятное визуальное впечатление:
А для подгона их под дизайн своего блога у вас будет выбор из шести цветовых гамм.
Реализация красивых хлебных крошек для Вордпресс
Для начала нужно будет подключится к своему серверу (виртуальному хостингу) по ФТП. Например, с помощью описанной Файлзилы. Потом заходите в папку с вашей текущей темой оформления, которая обычно живет по такому пути:
/wp-content/themes/ее название
Вообще, темы Вордпресса я описывал , а точнее рассказывал из каких файлов (шаблонов) они могут состоять и за какие фрагменты макета блога они отвечают. Однако, кроме чисто дизайнерских решений в папке с темой вы найдете и файл functions.php (если его нет, то просто создаете его).
Он служит для прописывания всяческих функций или фильтров, которые позволяют реализовать много чего полезного не копаясь непосредственно в файлах движка, изменения в которых после могут быть потеряны. А все, что внесете в functions.php, будет жить вплоть до смены вами темы оформления.
Итак, добавляете в этот расчудесный файл следующую функцию:
//Breadcrumb как у Google
function the_breadcrumb() {
if (!is_home()) {
echo "
- ";
echo "". bloginfo("name") . "";
echo "
";
}
if (is_category() || is_single()) {
$cats = get_the_category();
$cat = $cats;
$output .= "term_id)."" style="z-index:8;">
".$cat->name."";
echo "- ".$output."
";
}
if(is_single())
{
echo "- ";the_title();echo "
";
}
if(is_page())
{
echo "- ";the_title();echo "
";
}
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 "
";trim_title_chars(60, "...");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 "
";trim_title_words(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 кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Как использовать Ajax для закрытия ссылок и как задать условие вывода чего-либо в постах нужных рубрик Вордпресса (in_category)
Как в WordPress можно выводить посты из категории с миниатюрами (их создание в Auto Post Thumbnail и catch_that_image)
