Как сделать хлебные крошки для WordPress
Для тех, кто не знает, хлебные крошки — это способ навигации, который показывает ваше текущее расположение на сайте (кстати, они используются не только на сайтах) и путь, по которому к нему можно попасть, начиная с главной страницы.
Для того, чтобы добавить хлебные крошки на сайт на WordPress вам не нужен специальный плагин «хлебные крошки», не нужно самому долго и мучительно придумывать как «сделать» хлебные крошки на сайте, не нужно долго мучить поисковики различными мудрёными фразами, а достаточно скопировать и вставить эту строчку в то место в шаблоне, куда вам нужно.
<?php the_breadcrumb() ?> |
Теперь распишем саму функцию, сразу говорю, готовьтесь, что будет много кода.
Дело в том, что я выкладываю полностью законченный и 100% рабочий вариант. Здесь учтены все типы страниц, которые только могут быть на WordPress: посты, страницы, вложенные страницы (поддерживается любое количество уровней вложенности), рубрики,
Также отображается номер текущей страницы, что тоже довольно полезно.
Короче засуньте весь этот код в файл functions.php:
function the_breadcrumb(){ global $post; if(!is_home()){ echo '<a href="'.site_url().'">Главная</a> &raquo; '; if(is_single()){ // записи the_category(', '); echo " &raquo; "; the_title(); } elseif (is_page()) { // страницы if ($post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>'; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ' &raquo; '; } echo the_title(); } elseif (is_category()) { // категории global $wp_query; $obj_cat = $wp_query->get_queried_object(); $current_cat = $obj_cat->term_id; $current_cat = get_category($current_cat); $parent_cat = get_category($current_cat->parent); if ($current_cat->parent != 0) echo(get_category_parents($parent_cat, TRUE, ' &raquo; ')); single_cat_title(); } elseif (is_search()) { // страницы поиска echo 'Результаты поиска для "' . get_search_query() . '"'; } elseif (is_tag()) { // теги (метки) echo single_tag_title('', false); } elseif (is_day()) { // архивы (по дням) echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> &raquo; '; echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> &raquo; '; echo get_the_time('d'); } elseif (is_month()) { // архивы (по месяцам) echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> &raquo; '; echo get_the_time('F'); } elseif (is_year()) { // архивы (по годам) echo get_the_time('Y'); } elseif (is_author()) { // авторы global $author; $userdata = get_userdata($author); echo 'Опубликовал(а) ' . $userdata->display_name; } elseif (is_404()) { // если страницы не существует echo 'Ошибка 404'; } if (get_query_var('paged')) // номер текущей страницы echo ' (' . get_query_var('paged').'-я страница)'; } else { // главная $pageNum=(get_query_var('paged')) ? get_query_var('paged') : 1; if($pageNum>1) echo '<a href="'.site_url().'">Главная</a> &raquo; '.$pageNum.'-я страница'; else echo 'Вы находитесь на главной странице'; } } |
Я специально оставил комменты в коде (зелёным цветом), то есть, если вы например не используете архивы на своём сайте, то можете удалить ненужные для вас с 40-й по 51-ю строчки. Вопросы оставляйте в комментариях.
Кстати, видел на других блогах функцию хлебных крошек длиной в 5-10 строк 🙂 Люди копипастят даже не задумываясь, понятно, что у них очень урезанные варианты.
Миша
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
misha.blog
Плагин Breadcrumb NavXT поможет создать на блоге хлебные крошки или навигационную цепочку ссылок на любой странице блога, включая главную, рубрик и меток. Зачем это делается? Такая навигационная цепочка поможет читателю понять, где он находиться, облегчиться его перемещение по блогу, а значит поможет ему найти необходимые материалы на блоге.
Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.
Плагин доступен к скачиванию по адресу — http://wordpress.org/extend/plugins/breadcrumb-navxt/, устанавливается на блог, но чтобы хлебные крошки заработали на блоге, необходимо внести изменения в код шаблона.
Определитесь, где должны отображаться хлебные крошки на блоге. В зависимости от принятого решения откройте на редактирование (рекомендую использовать программу NotePad++) такие файлы:
- single.php — чтобы они выводились на странице одиночных заметок
- archive.php — если желаете выводить хлебные крошки на страницах архивов
- search.php — и крошки будут выводиться на страницах с результатами поиска
- page.php — навигационная цепочка будет размещена на страницах блога
- category.php — если желаете выводить хлебные крошки на страницах рубрик и меток
В эти файлы или какой-то один файл вставьте этот код:
1 2 3 4 5 6 | <div> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
Сохраните изменения в файле и можете перейти на главную страницу блога, открыть страницы блога, посты. Удостоверится, что плагин Breadcrumb NavXT корректно выводит хлебные крошки.
Панель настройки плагина Breadcrumb NavXT находится «Параметры» пункт «Breadcrumb NavXT» Когда Вы зайдете в панель впервые, он попросит обновить настройки — перейдите по ссылке. Она состоит из 4-х вкладок: Основные, Записи и страницы, Таксономии, Другие. Каждая вкладка состоит из несколько разделов.
Вкладка «Основные»
Основные
- Разделитель — значок, который будет выводится между ссылками в хлебных крошках(1)
- Длина заголовка — если Вы даете очень длинные названия постам, навигационная цепочка может образовать 2 строки, а могут ссылки перекрыть боковую панель(иногда такое можете наблюдать на блогах под управлением WordPress. Поэтому ставьте флажок и ограничьте количество выводимых символов в крошках(2).
Текущая позиция
- Показывать текущую позицию в виде ссылки — если да, то когда, Вы будете читать заметку, но в навигационной цепочке ее название будет ссылкой, если находитесь на странице рубрики — то ссылкой на страницу рубрики(тоесть саму на себя. Я не ставлю флажок.(3)
- Постраничная навигация — опция полезна(4), если на блоге хлебные крошки отображаются на страницах рубрик или меток. Тогда на втором развороте и последующем в навигационной цепи ссылок будет выводиться номер страницы рубрики. Он определяется плагином PageNavi или другим дополнением, которое выводит постраничную навигацию на блоге. Пример виден на скриншоте ниже(6). Он отображает хлебные крошки, которые выводятся на втором развороте рубрики Автоновости.
Интересно выполнена настройка вывода ссылок или текста в цепочке с ссылками.
- В поле Шаблон — определяется как именно будет форматироваться ссылка или надпись на второй разворот страницы рубрики: если в поле ввода стереть слово страница(5), то надпись на блоге изменит вид — со «страница 2» на просто «2».(6) Вместо слова «Страница» можно написать слово «часть», «разворот» и так далее.
Ссылка на главную — блок отвечает за форматирование ссылки на главную страницу блога.
- Ссылка на главную — да, будет выводиться ссылка на главную страницу блога, нет — выводится как текст.
- Шаблон ссылки на главную — Если ссылка на главную да, — прописываем каким будет анкор ссылки(7). Редактируется только слово, которое размещено между тегами <a></a>
- Шаблон ссылки на главную (некликабельная) — если флажок снят, то приписываем, каким будет текст (8), который будет размещен в начале хлебных крошек.
Ссылка на блог в блоке размещены такие опции Ссылка на блог, Шаблон ссылки на блог, Шаблон ссылки на блог (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.
Ссылка на главный сайт в блоке размещены такие опции Ссылка на главный сайт , Шаблон ссылки на главный сайт, Шаблон ссылки на главный сайт (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.
Вкладка «Записи и страницы»
Записи — настроить внешний вид хлебных крошек, которые будут отображены на страницах и постах.
- Шаблон ссылки на запись — изменить код ссылки, которая будет выводиться на страницах записей.
- Шаблон ссылки на запись (некликабельная) — определить, каким образом будет оформляться название поста, если он, согласно с настройками(3), выводиться текстом.
- Вывод иерархии — да, если посты привязываются к нескольким категориям или меткам одновременно.
- Иерархия записи — выбрать лучший вариант выборки для построения хлебных крошек плагином Breadcrumb NavXT, варианты: Рубрики, Даты, Метки, Под-страницы. Последний вариант мне не очень понятен, я не мог добиться построения крошек по этому принципу. Не рекомендую использовать выборку «Даты», так как создается хлебные крошки, где между главной страницей и постом создаются отдельные ссылки на страницу архивов по годам, потом месяцам, потом дням.
Страницы — возможно изменить оформление хлебных крошек, которые будут выводиться на страницах.
Вкладка «Таксономии» состоит из 3-х разделов. В них можно настроить внешний вид хлебных крошек, которые будут выводиться на страницах рубрик, меток, архивов. Не забывайте, перед внесением изменений в свойства этой вкладки, Вы должны вставить код(он размещен выше по тексту) в файлы archive.php, category.php, search.php, создать метки и/или рубрики
Вкладка «Другое» — настройка внешнего вида и кода хлебных крошек, которые будут формироваться плагином Breadcrumb NavXT на архивных страницах страницах, выборка материалов на которых выполняется по имени автора постов. Обратите внимание, что в навигационной цепочке ссылок используется имя автора, разместившего посты, которое размещено в профиле(опция «Отображать как»).
Я плагин Breadcrumb NavXT впервые установил на один из блогов 3 года назад, и вот в конце 2013 года повторно с ним познакомился. Скажу честно — он стал удобнее в настройке, опций меньше, работает также. Новички могут без страха устанавливать его на свои блоги, и польза и первые навыки по редактированию WordPress тем получат.
seomans.ru
seomans.ru
Хлебные крошки с микроразметкой для WordPress
Приветствую, друзья. Сегодня на моем блоге юбилейный, 400-ый пост. Очень хотелось мне по случаю такой даты дать какой-то реально полезный контент, чтобы он был, интересен, полезен и актуален. И тема для такой статьи созрела на ровном месте – я хотел разобраться с формированием красивых сниппетов в поиске, а закопался, при этом, еще в две темы:
- установку хлебных крошек на свой WordPress блог (хотел без плагина, чтобы не нагружать сайт),
- и настройку микроразметки (без нее пользы от хлебных крошек немного).
Содержание:
- Элемент навигации
- Внешний вид сниппета в поисковой выдаче
- Микроразметка хлебных крошек
- PHP функция для вывода без плагина
- Проверка микроразметки хлебных крошек
Элемент навигации
Я уже давно слышал и читал о хлебных крошках, только так и не мог толком понять, какая от них польза для обычного блога с простой и понятной структурой. Сами посудите, у меня есть главная страница, все посты распределены по рубрикам и все. То есть, максимальный путь от домашней страницы до конечной статьи – это 2 клика. В каждой статье есть ссылка на рубрику, к которой она относится, так что посетителю заблудиться просто негде.
Другое дело, если сайт сложный и структура у него такая, что можно ходить полчаса кругами и не найти то, что искал. Если у вас какой-нибудь интернет магазин с десятками категорий, каждая из которых разбита на дочерние рубрики, те, в свою очередь, еще и еще, а дальше каждый товар на цвета поделен – тут я понимаю важность хлебных крошек – они нужны пользователю как элемент навигации и повышают юзабилити сайта.
Кстати, название “хлебные крошки” от этого и пошло, изначально это была лишь навигация по сайту. Помните сказку «Гензель и Греттель», где детишки бросали на своем пути кусочки хлеба, чтобы потом най
biznessystem.ru
Что такое хлебные крошки и как они влияют на SEO
Хорошая навигация, крайне важна для сайта. И тут вам на помощь придут хлебные крошки. Давайте посмотрим, что это и как их использовать.
«Хлебные крошки» — это тип вторичной навигации сайта, которая показывает местоположение пользователя на веб-сайте или в веб-приложении.
Обычно хлебные крошки можно найти на крупных сайтах, где все страницы организованы согласной строгой иеархии. В своей простейшей форме хлебные крошки представляют собой горизонтально расположенные текстовые ссылки, разделенные символом больше — «>» . Этот символ указывает уровень этой страницы относительно других страниц сайта.
Когда нужно использовать хлебные крошки?
На самом деле, далеко не всегда есть необходимость в использовании этого элемента навигации. Но давайте посмотрим, когда все-же нужно их использовать.
Используйте навигацию «хлебная крошки» для больших веб-сайтов и веб-сайтов, которые имеют иерархически организованные страницы. Отличным сценарием являются сайты электронной коммерции, в которых большое разнообразие продуктов сгруппировано в логические категории.
Вы не должны использовать хлебные крошки для одноуровневых веб-сайтов, которые не имеют логической иерархии или группировки. Отличный способ определить, выиграет ли веб-сайт от навигации по хлебным крошкам, — построить карту сайта или диаграмму, представляющую архитектуру навигации веб-сайта, а затем проанализировать, улучшат ли хлебные крошки возможность пользователя перемещаться внутри и между категориями.
Навигация в виде хлебных крошек должна рассматриваться исключительно как дополнительная функция и не должна заменять эффективные основные навигационные меню. Это удобная функция; вторичная навигационная схема, которая позволяет пользователям определять, где они находятся; и альтернативный способ навигации по вашему сайту.
Виды хлебных крошек
Существует три основных тип хлебных крошек. Давайте посмотрим на них поближе.
1.Основанные на местоположении.
Наверное, это самый узнаваемый вид хлебных крошек. Он показывает пользователю, где он находится в иерархии веб-сайта. Этот тип обычно используется для схем навигации, которые имеют несколько уровней (обычно более двух уровней). В приведенном ниже примере интернет магазина вы можете увидеть уровни в иеархии.
2.Основанные на атрибутах.
Показывают аттрибуты страницы. Например, на этом скриншоте показано, что мы находимся на странице с компьютерами с процессором Intel Core i7.
3.Основанные на истории.
Основанные на истории хлебные крошки предоставляют посетителю путь, по которому они прошли через сайт.
В основном это выглядит так: Главная> Предыдущая страница> Предыдущая страница> Предыдущая страница> Текущая страница.
Этот тип хлебных крошек непопулярен, так как его можно легко заменить кнопкой «Назад», которая обычно рекомендуется дизайнерами и экспертами по графическому интерфейсу.
Для чего нужны хлебные крошки
- Улучшают навигацию сайта. Если разместить хлебные крошки на сайт, то посетитель сразу увидит в какой категории он находиться, а также в любой момент может подняться на уровень выше. Для сайтов с большим количеством вложенных страниц советую обязательно использовать хлебные крошки, это очень важный элемент внутренней оптимизации сайта.
- Улучшают внутреннюю перелинковку. Если взглянуть на хлебные крошки, которые размещены на моем сайте, то сразу видно, что со всех страниц идет ссылка на главную и на рубрику, таким образом, эти страницы получают наибольший вес, что очень хорошо. Категорию можно продвинуть по какому-нибудь ключевому слову. А что касается главной страницы, то я считаю, что ее нужно обязательно продвигать по высокочастотному запросу.
- Улучшают индексацию сайта. Хлебные крошки – это всего лишь внутренние ссылки. Если робот перейдет на страницу сайта, то он будет «ходить» по этим ссылкам. Таким образом можно сделать вывод, что поисковик будет быстрее находить другие посты вашего ресурса и индексировать их.
- Влияют на URL-ы в выдаче. Если на сайте присутствуют хлебные крошки, то поисковые системы иногда показывают их в выдаче. А это позволяет увеличить CTR и соответственно посещаемость вашего ресурса.
- Улучшают релевантность страницы. Практически все оптимизаторы прописывают ключевое слово в заголовке h2. Так вот, если сделать хлебные крошки, то этот заголовок будет дублироваться на странице, и соответственно будут дублироваться ключевые слова :smile:.
Как видите, крошки способны существенно улучшить ваш ресурс для посетителя и для поискового робота. Если вы надумали установить их на свой сайт, то сейчас я покажу, как сделать хлебные крошки в wordpress, а если у вас другой движок сайта, то обратитесь, пожалуйста, за помощью к Яндексу.
Как сделать хлебные крошки.
Если у вас сайт на WordPress, то самый простой путь, это использовать плагин. И один самых популярных SEO плагинов — Yoast, уже имеет этот фукционал.
Для включения хлебных крошек, зайдите в меню плагина Yoast, зайдите в Отображение в поисковой выдаче и перейдите на вкладку «Хлебные крошки».
Хлебные крошки в вордпресс также можно сделать с помощью специального плагина Breadcrumb NavXT. Например, я стараюсь не использовать много плагинов на своем блоге, потому что плагины нагружают блог, но на всякий случай покажу, как с помощью Breadcrumb NavXT сделать крошки. Возможно, этот вариант кому-то подойдет больше.
Для начала скачайте плагин по этой ссылке потом необходимо распаковать его и активировать. Если хотите произвести настройки плагина, то зайдите в Панель управления — Настройки — Breadcrumb NavXT.
Здесь я советую перейти на вкладку «основные» и поставить галочку напротив надписи: «Показывать текущую позицию в виде ссылки». Это позволит улучшить внутреннюю перелинковку. Для того чтобы в хлебных крошках отображалась ссылка на главную страницу, нужно вставить свой шаблон рядом с надписью «шаблон ссылки на главную». Я вставил вот такой код:
Вам нужно здесь изменить анкор и ссылку на главную страницу своего сайта:
Мы сделали все настройки, теперь нужно вставить еще один кусочек кода, для того, чтобы вывести крошки на сайт:
Ну и в таблице стилей я прописал точно такие стили, как и в предыдущем случаи:
Получилось вот так:
Ну а теперь, на этом все на сегодня. До встречи в следующих постах.
vachevskiy.ru