WordPress: creating breadcrumbs without a plugin

Плагин Breadcrumb NavXT

Плагин имеет огромное количество настроек, а главное – работает как качественные часики за несколько тысяч долларов. Как уже упоминалось выше, постраничная навигация WordPress возможна и без установки сторонних модулей, но с помощью Breadcrumb NavXT все упрощается – каждый пользователь сможет настроить навигационную цепь так, как ему нравится.

Загрузить плагин можно на странице: http://wordpress.org/extend/plugins/breadcrumb-navxt/ (работает на Вордпресс не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.

Далее необходимо отобразить крошки в вашем шаблоне. Для этого открываем файл header.php и добавляем следующий код:

При необходимости код можно добавить и в другие файлы вашей темы. Теперь нужно перейти в меню настроек и немного «поколдовать» с его опциями, благодаря которым можно делать с этими крошками, что только душа пожелает (разработчики действительно выполняли его на совесть).

Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).

Поле «Максимальная длинна» указывает длину анкора в символах. Мы рекомендуем указать ограничение в 60 символов, что полезно в плане оптимизации. Выше мы уже упоминали о пользе крошек для SEO; то есть крошки будут индексироваться поисковыми машинами, и использоваться они будут не только для передачи пустого веса. Оговоримся, что поисковые машины могут непредсказуемо относиться к ссылкам с идентичными анкорами, поэтому рекомендуем их укорачивать (это необязательно, но все же можно немного потратить времени на это).

Если проставить галочку напротив «Домашняя ссылка», то в крошках будет показываться ссылка на главную. И при необходимости можно выбрать анкор. Поля «Префикс» и «Суффикс» позволяют указать текст, который будет стоить перед или после линка на главную. Ну а поле «Текст домашней ссылки» позволит указать текст, который будет показан при наведении на линк домашней страницы.

Стоит взять во внимание: этот текст может учитываться поисковыми системами, как анкор. То есть, стоит указать ключевики, которые касаются вашей главной страницы

После этого сохраняем все внесённые изменения при помощи соответствующей кнопки.

Но это ведь только одна вкладка «Общие», поэтому можно пробежаться и по остальным вкладкам. Так, на следующей есть пункт настройки для линка, который будет указывать на страницу, где вы находитесь. Линк на текущую позицию улучшает внутреннюю оптимизацию ресурса, поэтому галочку поставить возле этого поля рекомендуем. Также не забываем, что мы рекомендовали не превышать 60 символов, во избежание создания крупных заголовков.

Следующее поле «Текст текущей позиции» можно не трогать, просто потому, что оно хорошо показывает смысл перехода (этот текст будет видеть посетитель, когда наведет курсор мыши на ссылку). Вкладка «Записи/Страницы» позволяет настроить показ ссылок на страницы со контентом и статические страницы площадки (для статей можно задать надпись «Текущая статья»).

На вкладке «Рубрики», по сути, все настройки походят на те, которые были на предыдущих страницах. При настройке мы не стали задавать префиксы и суффиксы, но внесли изменения в поле «Архивы». В результате всего этого, мы получили такие привлекательные крошки, где все исправно работает.

Как правильно создать хлебные крошки

Для сайта, функционирующего на любом движке, в том числе и WordPress, можно создать «хлебные крошки». Это осуществляется при помощи различных плагинов, CSS и PHP. Но какой бы способ не был выбран, следует придерживаться определенных правил, позволяющих повысить оптимизацию сайта, и предотвращающих ее снижение.

При использовании линейной цепочки нельзя пропускать страницы-звенья. Последняя страница, на которой посетитель находится в данный момент, это тоже звено цепочки, и оно должно быть отображено в навигации. Иногда на сайтах в навигацию не включают конечную страницу, если это карточка товара. С точки зрения логики это может быть и верно, но для посетителя такая «обрезанная» цепочка выглядит странно, и может сбить его с толку.

Еще один важный нюанс – не стоит при создании навигации вписывать ключевые фразы, если они не очень органично вписываются. Анкор навигационной ссылки должен иметь минимальную длину. К тому же он должен быть очень точным, и притягивать в него ключ не рекомендуется.

При разработке сайта, который будет оснащен «хлебными крошками», все равно нужно тщательно продумать основное меню. Крошки не заменят его, они будут работать просто как вспомогательный инструмент, и не всем посетителям он пригодится.

Для маленьких сайтов с простой и понятной структурой устанавливать навигацию не нужно. Посетители и без нее смогут легко ориентироваться по страницам, а лишний элемент будет создавать ощущение неоправданной перенасыщенности дизайна.

Навигационная цепочка должна выглядеть эстетично и по внешнему виду хорошо сочетаться с основной стилистикой ресурса. Ее должно быть хорошо видно, но при этом она не является ведущим элементом дизайна, а значит ей нужно придать ненавязчивый вид, отрегулировав ее расположение, шрифт, размер и цвет

Очень важно размещать цепочку на каждой странице в одном и том же месте

Для того чтобы сайт наилучшим образом выводился Гуглом, нужно сделать микроразметку строки навигации. То есть каждый шаг, ведущий от главной страницы до той, которая выводится в поисковике нужно оформить как отдельную ссылку. Это осуществляется путем обертывания каждого элемента в блок (div), и добавления атрибута (itemprop= «url»). В готовый блок нужно добавить атрибут itemprop= «title».

Навигационные ссылки не должны быть цикличными. Название конечной страницы должно иметь вид обычного текста, а не ссылки. Иначе получится, что последний пункт цепочки отправляет со страницы на нее же, а этого быть не должно.

При оформлении «хлебных крошек» нужно помнить о том, что они нужны в первую очередь для повышения удобства пользования ресурсом, и только потом они несут пользу для позиций сайта в поисковых системах. При помощи цепочки посетители могут в один клик переходить на нужные страницы, что положительным образом сказывается на конверсии сайта (соотношение количества посещений к количеству полезных действий посетителей, например, покупок). Однако некорректная реализация «хлебных крошек» может привести к обратному эффекту, снизив как юзабилити ресурса, так и его показатели SEO. Чтобы проверить качество установленной навигации, можно воспользоваться аудитом поискового продвижения.

Включаем хлебные крошки у себя на блоге

Итак, включить хлебные крошки на сайте при помощи этого плагина проще простого. Заходим в раздел «Дополнительно» и передвигаем тумблер с Disabled на Enabled. Если когда-нибудь потом захотите убрать их, достаточно просто передвинуть кнопку обратно.

Если вам нравится, как настроено меню по умолчанию, его можно оставить и сохранить изменения

Думаю, что здесь все понятно, так что не буду заострять свое внимание. Вы всегда можете потом попробовать тот или иной вариант и посмотреть к каким изменениям на сайте это приведет

Теперь необходимо изменить вашу тему, чтобы определиться с тем как и где будут отображаться хлебные крошки. Пока вы этого не сделаете, они не отобразятся, так что не пытайтесь. Переходим во «Внешний вид» – «Редактор».

Находим в правой части списка файл single.php (Отдельная запись).

И вставляем вот этот код:

<?php if ( function_exists(‘yoast_breadcrumb’) ) {yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>

Сейчас я вставил код в контентную часть и на сайте он будет отображаться вот так.

Давайте я поставлю его чуть выше.

Теперь хлебные крошки отображаются лучше.

Не забывайте сохранять изменения. Вы можете легко вставлять этот код в разные части single, перемещать их и смотреть какой вариант вам нравится больше. Для этого достаточно лишь обновить тестовую страницу в соседней вкладке после сохранения файла.

Вы можете снова зайти в настройки плагина и отредактировать название главной страницы, допустим, на home или заголовок вашего сайта. Больше в код лезть не понадобится. Все изменения можно производить в панели инструментов Seo Yoast.

Если вы хотите узнать больше про Yoast, посмотрите вот это видео. Здесь есть подробная инструкция по использованию этой программы и всем ее возможностям:

Если вас заинтересовала верстка и вы хотите изучить этот вопрос «от и до», чтобы не пугаться при виде кода, советую вам бесплатные курсы Евгения Попова.

Он уже давно занимается созданием уроков, которые пользуются широкой популярностью среди новичков за легкость и профессионализм. Вы смотрите за работой другого человека, слушаете и усваиваете информацию, которую вам объясняют не на пальцах, а на конкретных примерах.

Для начала вам понадобится понять «Основы html», разобраться в языке разметки.

Бесплатные уроки по CSS позволят понять что такое блочная разметка и как работать с каскадными таблицами.

По завершению вы освоите новую профессию и сможете начать создавать сайты, делать верстку. Выйдете на качественно новый уровень работы.

Ну вот и все. Если вам была полезна эта публикация подписывайтесь на рассылку. Присоединяйтесь, с момента основания моего блога это сделали уже 200 человек! Я проверяю информацию, прежде чем дать вам совет. Это большая редкость в интернете.

Пользуйтесь только проверенным софтом и актуальной информацией.

До новых встреч и удачи в ваших начинаниях!

What are breadcrumbs?

A breadcrumb is a small text path, often located at the top of a page indicating where the user is on the site. On yoast.com, for instance, the path to our Yoast SEO plugin page is Home > WordPress Plugins > Yoast SEO for WordPress. This breadcrumb trail immediately shows you where you are. Every step of that path is clickable, all the way back to the homepage.

But why is this navigational help called a breadcrumb? When Hansel and Gretel went into the woods, Hansel dropped pieces of bread onto the ground so they could find their way home if they got lost. These breadcrumbs eventually became the model for the ones we see on websites these days.

You can see the breadcrumb clearly in Google

They also appear in Google search results, and you can take advantage of this if you use Yoast SEO or add the correct form of structured data to your site. Breadcrumbs in search results give users an easy-to-understand overview of where the page sits on your site.

Yoast SEO automatically adds the necessary structured data — a — in JSON-LD format for you. Just flip the switch in the settings and you’ll see the relevant lines appear in your source code — although, depending on your theme, you may need to add a small piece of code to your theme as well. Find out more on our breadcrumb structured data in our documentation. Optionally, you can use the Yoast SEO breadcrumb block to quickly add breadcrumbs on individual posts or pages.

You can find the Yoast breadcrumbs block in the WordPress block library

Description

Breadcrumb is easy and light-weight plugin to display breadcrumb navigation to your WordPress site, easy to customize and change style for breadcrumb. You can use filter hook and action hook to rewrite the plugin without editing the plugin code. This plugin almost working on all WordPress pages like archive, category, tags, custom taxonomies, custom post types, defult post, date, year, month, author and search page to display breadcrumb dynamically.

Breadcrumb by http://pickplugins.com

• Buy Premium »
• Live Demo »
• Support »
• Documentation »

Tutorials

• Install & setup
• Limit link text
• Customize home text
• Change style
• Install pro and setup (Premium)
• Hide on archives (Premium)
• Hide by post types (Premium)
• Hide by post ids (Premium)

Plugin Features

Use via short-codes
You can display breadcrumb anywhere via shortcodes.

Display anywhere
Breadcrumb display on home page, any post type, page, parent pages, author page, archive page, tag page, custom taxonomy page, search page, woocommerce shop, product pages.

Custom front text
You can display custom prefix text before breadcrumb start.

Custom separator text
You can set custom separator text as you need and match with your theme. you can also hide the last separator if you want.

Limit word link text
You can limit word count or character count on link text and use set custom ending text.

Hide “Home” text
you can hide or display “Home” elements on breadcrumb

Custom font size for link text
you can set custom font size for link text

Container padding margin
Set custom margin and padding for breadcrumb container.

Custom color
you can set custom text color for link text, separator and link background color

Override via filter hook
You can override breadcrumb element via filter hook.

Premium features

Hide on archives
You can dynamically hide breadcrumb on archive pages like Front page, Home page, Blog, Author, Search, Year, Month, Date, Categories, Tags

Hide by post types
Hide breadcrumb based on different post types.

Hide by post ids
Hide breadcrumb based on post ids, you can use any post ids to hide breadcrumb to hide any specific post, Custom post types also supported.

Вариант без установки плагина

Рассмотрим способ, как реализовать крошки на вашей площадке без установки каких-либо плагинов. Он довольно прост с точки зрения реализации, поэтому ждать чего-то оригинального от этого решения не стоит. Зато все работает без плагинов, что говорит об отсутствии нагрузки на сайт.

Способ состоит из пары шагов:

• вписывание кода в файл functions.php;
• вписывание кода крошек в нужное место.

Итак, берем первый код и вставляем его в файл functions.php вашего активного шаблона:

Его можно разместить в самом конце документа перед символами «?>» (без кавычек). Если в конце тега нет, то код можно закинуть в самое начало перед открывающимся тегом. При размещении кода смотрите, чтобы кодировка была UTF-8, или в противном случае некоторые русские буквы и слова будут отображаться неправильно. Задать кодировку можно при помощи редактора Notepad при помощи пункта «Кодировка – Кодировать в UTF-8 (без ВОМ).

Теперь используем другой код и прописываем его там, где и требуется вывести хлебные крошки:

Считается, что крошки должны размещаться везде, кроме главной страницы. То есть необходимо разместить этот код в файлах single.php, archive.php, page.php и category.php. Где конкретно размещать его – дело ваше, но по дефолту он вставляется перед выводом основного контента. Если есть возможность размещать код в главном блоке, то сделайте это, ведь потом не придется играться со стилями, чтобы крошки отображались как полагается.

Как видите, нужно лишь немного покопаться в файлах темы. Да и к тому же, способ работает без вспомогательных модулей. Ну а кому хочется получить возможность менять крошки на свое усмотрение, то придется ставить сторонние плагины. Отлично работает SEO by Yoast и Breadcrumb NavXT. Давайте рассмотрим первый из них.

Ярлыки

.htaccess
(8)

безопасность
(5)

Введение в HTML
(5)

веб-дизайн
(8)

заработок в сети
(12)

заработок на блоге
(7)

заработок на сайте
(9)

заработок на файлах
(4)

изучение MySQL
(4)

изучение PHP
(2)

Как сделать блог-многотысячник
(3)

компоненты Joomla
(9)

партнёрка
(3)

партнерки
(5)

партнёрская программа
(4)

Партнерские программы
(6)

плагин
(19)

Плагины WordPress
(37)

продвижение сайтов
(5)

уроки HTML
(5)

Учимся делать сайты
(3)

Хостинг
(3)

AdSense
(3)

CMS Joomla
(50)

CMS Wordpres
(56)

CMS WordPress
(32)

depositfiles
(4)

dofollow
(4)

Drupal
(5)

(8)

Google AdSense
(4)

Google Adwords
(2)

Google Analytics
(9)

HTML
(4)

HTML 5
(2)

Joomla
(21)

Joomla 2.5
(13)

MySQL
(8)

PHP
(4)

plugin
(15)

PR сайта
(2)

SEO
(11)

SEO раскрутка
(15)

Simple TDS
(3)

SimpleTDS
(1)

template Joomla 2.5
(9)

web desing
(5)

Wordpress
(30)

Что такое «хлебные крошки» WordPress и для чего они нужны?

«Хлебные крошки» — это термин, используемый для обозначения иерархического меню навигации, представленного в виде цепочки ссылок. Оно часто используется в качестве дополнительного меню навигации.

«Хлебные крошки» отличаются от системы меню навигации WordPress, используемой по умолчанию.

Цель «хлебных крошек» — помочь пользователям перемещаться по сайту. Они помогают понять, где сейчас находится пользователь. Это также помогает поисковым системам определить иерархию ссылок на веб-страницы.

Поисковые системы, такие как , начали выводить «хлебные крошки» сайта в результатах поиска. Это увеличивает видимость сайта в результатах поиска и улучшает показатель переходов:

Как добавить хлебные крошки WordPress с помощью Breadcrumb NavXT Plugin

Это гибкий и простой в использовании «хлебные крошки» WordPress плагин. Он имеет больше разнообразных функций, чем вы можете себе представить. Первое, что нужно сделать, это установить и активировать плагин Breadcrumb NavXT. После его активации необходимо перейти на страницу настроек плагина: Настройки — Breadcrumb NavXT:

Для большинства сайтов подойдут настройки по умолчанию. Но при необходимости вы можете внести изменения в настройки параметров.

Страница настроек разделена на несколько разделов. На вкладке «Общие» вы можете определить, каким образом плагин будет вести себя на сайте.

Здесь можно изменить шаблон ссылок. Эти шаблоны используют параметры Schema.org в теге ссылки.

В разделе «Типы записей» вы можете задать «хлебные крошки» для записей, страниц, а также любых пользовательских типов записей. Вы можете выбрать вариант отображения иерархии записей. По умолчанию плагин будет использовать иерархию «Название сайта > Рубрика> Заголовок записи».

Вы можете заменить элементы навигации тегами, датами или родительскими элементами записей. Вкладки «Таксономии» и «Авторы» имеют сходные шаблоны для ссылок меню. Не забудьте нажать на кнопку «Сохранить изменения».

Отображение Breadcrumb NavXT на вашем сайте

Для использования этого WordPress плагина «хлебные крошки» вы должны отредактировать файлы темы. Нужно добавить следующий код в файл header.php темы в том месте, где будут отображаться «хлебные крошки»:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Перейдите на сайт и откройте какую-нибудь запись или страницу. Вы увидите, что у вас уже отображаются «хлебные крошки».

Как добавить хлебные крошки WordPress с помощью Yoast SEO Plugin

Установите и активируйте Yoast SEO Plugin. После активации плагина нужно перейти на страницу SEO > Дополнительно и установите флажок для опции «Включить хлебные крошки»:

После этого станут доступны несколько параметров, с помощью которых вы можете изменить вариант отображения «хлебных крошек». Настройки по умолчанию должны подойти для большинства сайтов, но при необходимости их можно легко изменить.

После того, как вы закончите, нажмите на кнопку «Сохранить изменения».

Вывод хлебных крошек с помощью плагина Yoast SEO

Некоторые темы уже поддерживают «хлебные крошки» Yoast. Перейдите на сайт и откройте какую-либо страницу или запись, чтобы проверить, отображаются ли в них «хлебные крошки» WordPress. Если нет, то нужно добавить небольшой фрагмент кода в активную тему.

Вставьте этот код в header.php своей темы в конце файла:

<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

Вот и все, теперь вы можете перейти на свой сайт, там уже будут отображаться «хлебные крошки».

Надеемся, что эта статья помогла вам.

Вадим Дворниковавтор-переводчик статьи «How to Display Breadcrumb Navigation Links in WordPress»

Как добавить хлебные крошки на блог без плагина

Так как любые плагины, это дополнительная нагрузка на блог, замедляющая его работу, то лучше просто немного изменить код, тем более что в данном случае, это проще, чем установить плагин.

Заходим в админку –> «Внешний вид» -> «Редактор» -> 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';
    }
}

и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.

Теперь нужно вот этот код:

<?php the_breadcrumb();
?>

разместить там, где вы хотите видеть навигационную цепочку, например, опять же над заголовком статьи. Для этого идем в single.php, ищем строчку с the_title и над ней вставляем этот код и сохраняем изменения.

Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).

Кроме того, нужно убедиться, что изменения одинаково хорошо смотрятся на разных браузерах – не наплывают на другие части темы и, одновременно, хорошо заметны.

Все, «Хлебные крошки» помогают вашим читателям, а вы можете гордиться тем, что самостоятельно разобрались в их установке

Всем спасибо за внимание!. P.S

В заключение статьи видео о том как поставить хлебные крошки на свой блог:

P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог:

https://youtube.com/watch?v=MVWNvgeSPJI

Автор статьи: Ирина Попова

Примеры плагинов для реализации хлебных крошек

Для реализации подобной навигации предусмотрено большое количество плагинов. Как и любые расширения для wordpress, они легко устанавливаются и настраиваются.

Наиболее популярными навигационными плагинами wordpress являются:

• Breadcrumb NavXT – популярнейший плагин для wordpress хлебные крошки. На его примере ниже будет рассмотрено, как установить навигационную цепочку на сайт;
• Instant Breadcrumbs – также популярный плагин, в отличие от остальных, не требующий абсолютно никаких настроек и автоматически встраивающийся в основное навигационное меню сайта. Подходит для новичков, но вряд ли будет годен для сложных проектов с оригинальным дизайном.

Установка плагина Breadcrumb NavXT для WordPress

Установить и активировать Breadcrumb NavXT можно прямо из консоли администратора, введя его название в окне поиска пункта «Добавить новый» меню «Плагины».

После активации в меню «Параметры» вы обнаружите новый пункт «Breadcrumb NavXT». Кликните по нему и выставьте параметры так, как это показано ниже:

Далее выделите и скопируйте в буфер следующий код:

<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</div>

Его необходимо вставить в файл header.php активного шаблона. Этот же код в дальнейшем можно будет копировать и в любые другие шаблоны, которые вы, возможно, будете использовать для изменения внешнего вида вашего сайта.

Учтите, что необходимо правильно выбрать место вставки кода для того, чтобы внешний вид сайта не был испорчен. В итоге должно получиться примерно следующее:

Заметим, что данный плагин хлебных крошек для wordpress имеет значительно более гибкие настройки по сравнению со многими другими похожими решениями, поэтому и внешний вид навигации можно менять до неузнаваемости, редактируя таблицы стилей и место вставки кода.

Несколько изменить хлебные крошки для wordpress можно и непосредственно в настройках плагина. Так, тип разделителя можно поменять, изменив соответствующие настройки во вкладке «Основные».

Также в настройках в случае необходимости скрывается отображение навигации текущей страницы, а можно напротив, отобразить её в виде ссылки.

Ищите хлебные крошки сами

В целом, если функционал рассмотренного плагина вас, как администратора сайта не удовлетворяет, то можно самостоятельно найти и протестировать массу других скриптов, благо, что поиск плагинов в консоли wordpress по запросу «Breadcrumb» («хлебные крошки») выдаёт около сотни результатов с описаниями и рейтингами, которые выставляют различным плагинам пользователи.

Итак, если ранее вы считали, что такой инструмент, как навигационная цепочка для сайта совершенно бесполезен, то надеемся, что ваше мнение кардинально изменилось.

Установка плагина для wordpress хлебные крошки позволяет пользователям ориентироваться в структуре сайта гораздо комфортнее.

Поисковые системы также благосклонно относятся к ресурсам, на которых имеются Breadcrumb, что выражается в более полной и быстрой индексации всего имеющегося контента.

Выводы делать только Вам! Удачи!