Плагин Breadcrumb NavXT поможет создать на блоге хлебные крошки или навигационную цепочку ссылок на любой странице блога, включая главную, рубрик и меток. Зачем это делается? Такая навигационная цепочка поможет читателю понять, где он находиться, облегчиться его перемещение по блогу, а значит поможет ему найти необходимые материалы на блоге.
Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.
Установка плагина Breadcrumb NavXT и вывод хлебных крошек на блоге.
Вкладка «Другое»
— настройка внешнего вида и кода хлебных крошек, которые будут формироваться плагином Breadcrumb NavXT на архивных страницах страницах, выборка материалов на которых выполняется по имени автора постов. Обратите внимание, что в навигационной цепочке ссылок используется имя автора, разместившего посты, которое размещено в профиле(опция «Отображать как»).
Я плагин Breadcrumb NavXT впервые установил на один из блогов 3 года назад, и вот в конце 2013 года повторно с ним познакомился. Скажу честно — он стал удобнее в настройке, опций меньше, работает также. Новички могут без страха устанавливать его на свои блоги, и польза и первые навыки по
Так называемые «Хлебные крошки» служат для улучшения навигации по сайту и помогают посетителю сайта разобраться, где он сейчас находиться. Посетитель, находящийся на любой странице сайта, с помощью хлебных крошек понимает свое местонахождение в структуре блога.
Хлебные крошки являются еще одним элементом внутренней перелинковки сайта. Упрощается навигация по сайту, что удобно посетителю сайта, и в связи с этим повышаются поведенческие факторы.
Сам термин «Хлебные крошки» взят из сказки братьев Гримм «Гензель и Гретель», в которой детей заводили в лес. В первый раз, когда отец по воле злой мачехи заводит брата и сестру в лес, они находят дорогу обратно, благодаря тому, что оставляли по своему пути камешки. Во второй раз у детей камешков не оказалось, и они оставляли на своем пути вместо камешков хлебные крошки, которые склевали лесные птицы и дети заблудились в лесу. После различных приключений детям все-таки удалось вернуться домой.
Обычно навигация Хлебные крошки (по-английски Breadcrumbs) представляет из себя полосу в верхней части страницы, которая имеет примерно такой вид:
Все разделы сайта, кроме последнего являются ссылками. Последний раздел навигации является именно той страницей, на которой вы сейчас находитесь. На эту страницу гиперссылку делать не нужно.
Этот последний элемент может быть не обязательно отдельной страницей, а например названием рубрики, если вы вошли в какую-нибудь рубрику. В этом случае название рубрики уже не будет гиперссылкой.
Хлебные крошки на сайт можно установить с помощью плагина, а также без использования для этого специального плагина. Вначале рассмотрим установку хлебных крошек с помощью плагина Breadcrumb NavXT.
Плагин Breadcrumb NavXT
Для установки плагина Breadcrumb NavXT нужно войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» нужно ввести выражение «Breadcrumb NavXT», а после этого нужно нажать на кнопку «Поиск плагинов».
В окне «Установить плагин» под названием плагина «Breadcrumb NavXT» следует нажать на ссылку «Установить».
В открывшемся окне «Установка плагина: Breadcrumb NavXT» необходимо нажать на ссылку «Активировать плагин». После этого в боковой панели «Админ-панели WordPress» появился новый пункт «Breadcrumb NavXT». Если нажать на этот пункт, то тогда можно будет войти в настройки плагина хлебных крошек.
В окне «Настройки Breadcrumb NavXT» расположено довольно много настроек этого плагина. Настройки Breadcrumb NavXT можно оставить сделанными по умолчанию. Во вкладке «Основные» можно, если вы хотите, изменить пункт «Ссылка на главную».
Теперь нужно вставить в файлы вашей темы, в те места, где должны будут отображаться хлебные крошки, следующий код:
?
Этот код желательно вставить в такие файлы вашей темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».
Для того, чтобы вставить этот код нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Шаблоны».
В шаблон «Одна запись (single.php)», который отвечает за страницы со статьями, код вставляется так, как показано на этом изображении.
После вставки кода, нажимаете на кнопку «Обновить файл».
Код вставлен, затем нужно нажать на кнопку «Обновить файл».
В файл «Архивы (arhvie.php)», который отвечает за рубрики, также нужно будет вставить этот код.
После того, как код вставлен, нажимаете на кнопку «Обновить файл».
И в завершении установки кода в файлы темы WordPress, код вставляется в файл «Результаты поиска (search.php)», который отвечает за поиск по сайту. Вставляете код в то место, как это показано на изображении.
На этом изображении видно как выглядит навигация хлебные крошки. Имя главной страницы не было изменено на название сайта.
Можно также вставить в файл «Таблица стилей (style.ccs)» такой код (это делать необязательно):
Breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}
В этом коде можно менять размер и шрифт (font:bolder 12px «Trebuchet MS», Verdana, Arial), отступы (padding-bottom: 10px), а также цвет ссылок хлебных крошек в статическом состоянии и при наведении на них курсора мыши (можно менять цифровые значения).
Показания в этом коде можно менять по своему усмотрению, или найти другой подобный код в Интернете. Также можно вообще обойтись и без установки этого кода в файл «Таблица стилей (style.ccs)». В установленной у меня теме, после установки кода, немного изменился шрифт.
В этой статье было рассмотрена установка хлебных крошек на сайт с помощью плагина Breadcrumb NavXT. В следующей статье будет рассмотрен такой вопрос - как установить без использования плагина.
Выводы статьи
При помощи плагина Breadcrumb NavXT на сайт устанавливается навигация, так называемые «хлебные крошки», которая помогает пользователю понять в каком разделе сайта он находится в данный момент времени.
Приветствую вас, уважаемые читатели блога сайт. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для
WordPress
—
Breadcrumb
NavXT
, который переводится как «хлебные крошки».
Данное название плагин получил из-за того, что его автору Джону Хавлику понравилась сказка про братьев Гримм, где мальчик Гензель сыпал хлебные крошки, чтобы по ним найти обратный путь. Правда было бы логичнее назвать плагин «камушки», так как по истории сказки Гензель и Гретель не смогли найти путь назад, так как хлебные крошки съели птицы. Ну да ладно, не в этом суть, главное, что этот плагин поможет посетителям не потеряться на вашем сайте и точно даст знать, где и в какой категории (части сайта) они сейчас находятся.
К тому же плагин Breadcrumb NavXT помогает равномерно распределить статический вес по всем страницам сайта, что очень важно для его и продвижения в поисковых системах. На всякий случай, если вы считаете, что внутренняя перелинковка (оптимизация) сайта не так важна, то рекомендую почитать вам вот эту , из которой вы поменяете свою точку зрения.
Итак, в этой статье я покажу вам, как реализовать данную навигацию у вас на сайте или блоге при помощи плагина Breadcrumb NavXT,
а также простого кода.
Установка плагина хлебных крошек Breadcrumb NavXT.
1
)
Как обычно скачиваем плагин и закачиваем его на блог, активируем.
2
)
Теперь нам нужно разместить специальный код в том месте, где вы хотите видеть строчку хлебных крошек. Для этого перейдите во «внешний вид» «редактор» и выберите файл, в который будете вставлять код. Чаще всего код плагина вставляют в файл «одна запись» (single.php) непосредственно перед или после заголовка статьи. Если вы совсем не разбираетесь в кодах, то просто ищите в самом начале кода два тега
и , которые отвечают за вывод названия публикаций. У меня данный код выглядит так:</p>
<p><b><h2>" title="<?php the_title (); ?>"><?php the_title (); ?></h2>
</b></p>
<p>Как найдете у себя нечто подобное, сразу же перед ним вставьте этот код хлебных крошек и обновите файл.</p>
<p><b><?php
</b><br><br><b>{ bcn_display (); }
</b><br><b>?>
</b></p>
<p>Кстати, если вам не нравится горизонтальная навигация и вы хотите чтобы она отображалась вертикально, то вам нужно вместо предыдущего кода вставить этот.</p>
<p><b><?php if (function_exists ("bcn_display_list"))
</b><br><b>{
</b><br><b>bcn_display_list ();
</b><br><b>}?>
</b></p>
<p>Гуд, как вы видите, у вас появилась навигационная строка, но без отображения даты публикации в самом конце, как у меня. Если хотите приделать ее к своей навигационной строке, то вам надо просто найти код в вашей теме оформления, который отвечает за вывод даты публикации, и добавить его после кода хлебных крошек.</p>
<p><b><?php
</b><br><b>if (function_exists ("bcn_display"))
</b><br><b>{ bcn_display (); }
</b><br><b>?><span>> <span>Опубликовано <?php the_time (" j F Y"); ?></span></div>
</span>
</b></p>
<p>Если что-то непонятно, то > — выводит у меня такую вот стрелку > а буква j – обозначает день, F- месяц, Y- год. Думаю после таких объяснений, вам и самим не будет трудно найти такой код.</p>
<p>Хорошо, теперь разберемся с дизайном. Сам стиль шрифта и цвет ссылок навигационной строки берутся из ваших стилей темы оформления, но если они вам не нравятся и вы их хотите изменить, то просто добавьте эту дополнительную строчку к коду, который мы вставляли выше.</p>
<p><b><divclass="breadcrumb"></div>
</b></p>
<p>В итоге у вас должен будет получиться такой код:</p>
<p><b><divclass="breadcrumb">
</b>
</span><br><b><?php
</b><br><b>if (function_exists ("bcn_display"))
</b><br><b>{
</b><br><b> bcn_display ();>
</b><br><b>}
</b><br><b>?>
</b><br><b></div>
</b>
</p>
<p>Теперь зайдите во «внешний вид» «редактор» и откройте файл «таблица стилей» (style.css). И вставьте данный код практически в самый низ и обновите файл.</p>
<p><b>.breadcrumb {
</b><br><b>font:bolder 12px «Trebuchet MS», Verdana, Arial;
</b><br><b>padding-bottom: 10px;
</b><br><b>}
</b><br><b>.breadcrumb a{
</b><br><b>color: #1B7499;
</b><br><b>}
</b><br><b>.breadcrumb a:hover {
</b><br><b>color: #EF0E0E;
</b><br><b>}
</b></p>
<p>Всем привет!</p>
<p>Еще одним способом улучшения внутренней перелинковки и юзабилити сайта являются хлебные крошки. Такое название данный вид навигации по сайту приобрел благодаря сказке братьев Гримм про Гензель и Гретель. Если помните, для того, чтоб найти дорогу домой, дети оставляли на дорожке хлебные крошки. Точно также одноименный метод навигации не даст пользователям заблудиться на вашем сайте. Подробнее о назначении и способах добавления хлебных крошек на блог пойдет речь в сегодняшней статье.</p>
<i>
</i>
<h2>Значение и пример хлебных крошек</h2>
<p>Для того чтоб вы имели представление о том, как выглядят хлебные крошки на сайте, приведу пример со своего блога:</p>
<p><img src='https://i1.wp.com/pro-wordpress.ru/wp-content/uploads/2015/01/bread1.png' align="center" width="100%" loading=lazy></p>
<p>Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.</p>
<p>Чаще всего такую цепочку можно найти под шапкой сайта, непосредственно перед заголовком статьи.</p>
<p>Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: <i>Главная страница -> Раздел -> Название статьи
</i>. Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: <i>Главная страница –> Раздел –> Подраздел –> Название статьи
</i>.</p>
<p>Кроме навигации по сайту, в SEO хлебные крошки также играют не последнюю роль. Они улучшают юзабилити сайта, перелинковку, также иногда они могут попасть в . Это позволит повысить кликабельность в выдаче, а также поможет поисковикам быстрее распознать структуру вашего ресурса. Для этого нужна микроразметка хлебных крошек. О том, как ее сделать, поговорим ниже.</p>
<h2>Хлебные крошки: как сделать на своем блоге?</h2>
<p>Для того чтоб добавить на Вордпресс хлебные крошки, можно использовать плагин, либо написать необходимый код для их вывода.</p>
<p>Для начала рассмотрим, как вывести хлебные крошки с php-кодом. Сразу скажу, что ниже будет приведен этот же код, но с элементами микроразметки, советую сразу взять .</p>
<p>Вот образец кода, который нужно вставить в файл functions.php:</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
</td><td class="code"> <span>"<div class="breadcrumb">Pro-wordpress » </div>
<div class="breadcrumb">"
</span>
term_id
)
.
"">
<span>"
.
$categories
[
0
]
->
name
.
" » "
</span>;
}
echo
<span>"</div>
<div class="breadcrumb">
"
;
echo
the_title()
;
echo
"</div>"
</span>;
}
</td>
</tr></table><p><div class="breadcrumb">Pro-wordpress » </div>
<div class="breadcrumb">term_id) . "">
". $categories->name . " » ";
}
echo "</div>
<div class="breadcrumb">
";
echo the_title();
echo "</div>";
}</p>
<p>Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
</td><td class="code"> <div class="breadcrumbs">
<?php
my_breadcrumb()
;
?>
</div>
</td>
</tr></table><p><div class="breadcrumbs">
<?php
my_breadcrumb();
?>
</div></p>
<p>После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в styles.css такой код:</p>
<p>Breadcrumbs{
margin: -5px 0 5px 3px; /* отступы */
overflow: hidden;
}
.breadcrumbs a {
color: #34a6d2; /* цвет ссылок - голубой */
text-decoration: underline;
}
.breadcrumb > span {
color: #000; /* цвет конечного пункта - черный */
}
.breadcrumb{
float:left;
}</p>
<p>Тут указаны цвет и размеры шрифтов, отступы, цвет ссылок при наведении курсора и без него. Все эти значения вы можете заменять своими, экспериментировать.</p>
<h2>Хлебные крошки на WordPress: плагин</h2>
<p>Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.</p>
<p>После установки в настройках вы сможете задать вариант пути (рубрики, даты, метки), максимальную длину заголовка, символы между разделами. Кроме того, можно отключить вывод названия страницы, на которой находится посетитель, чтобы не дублировать заголовок статьи. Для того чтобы хлебные крошки отображались на странице, вам опять-таки нужно прописать код в файле single.php или header.php.</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
</td><td class="code"> <div class="breadcrumb">
<?php
if
(function_exists
("bcn_display"
)
)
{
bcn_display()
;
}
?>
</div>
</td>
</tr></table><p><div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div></p>
<p>Внести изменения в стили можно по аналогии с тем, как это было описано выше.</p>
<h2>Микроразметка хлебных крошек</h2>
<p>Мы уже говорили о том, насколько важна . Хлебные крошки в сниппете моего блога выглядят так:</p>
<p><img src='https://i2.wp.com/pro-wordpress.ru/wp-content/uploads/2015/01/bread2.png' align="center" width="100%" loading=lazy></p>
<p>Такой вид более понятен и приятен для пользователя, нежели просто url страницы.</p>
<p>Поисковые системы могут автоматически принять ту структуру хлебных крошек, которая сделана на вашем сайте и соответственно выводить ее в сниппете. Для того чтоб это проверить нужно воспользоваться валидаторами Гугл и Яндекс.</p>
<p>Если поисковики не распознали хлебные крошки, тогда им нужно помочь. На своем блоге я использую код, приведенный в начале статьи. В него я добавила элементы микроразметки. Если вы тоже выводите хлебные крошки php-кодом, можете заменить свой код на этот:</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</td><td class="code"> function
my_breadcrumb()
{
echo
<span>"<div xmlns:v="https://rdf.data-vocabulary.org/#">
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Pro-wordpress</span> » </div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">"
</span>;
$categories
=
get_the_category()
;
if
($categories
[
0
]
)
{
echo
"
term_id
)
.
<span>"" itemprop="url">
<span itemprop="title">"
</span>.
$categories
[
0
]
->
name
.
" » "
</span>;
}
echo
<span>"</div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">"
</span>;
echo
the_title()
;
echo
"</div>
</div>"
</span>;
}
</td>
</tr></table><p>function my_breadcrumb() {
echo "<div xmlns:v="https://rdf.data-vocabulary.org/#">
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Pro-wordpress</span> » </div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">";
$categories = get_the_category();
if($categories){
echo "term_id) . "" itemprop="url">
<span itemprop="title">". $categories->name . "</span> » ";
}
echo "</div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">";
echo the_title();
echo "</span></div>
</div>";
}</p>
<p>Делать микроразметку для навигационной цепочки, созданной с помощью плагина, я не пробовала. Но, думаю, это не сложно. Можно по-аналогии с моим кодом видоизменить код плагина. Давайте разберем приведенный код.</p>
<p>Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».<br>
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .</p>
<p>itemprop="url" – определяет значение url, его нужно добавить в каждый тег a</p>
<p>itemprop="title – определяет значение заголовка элемента цепочки</p>
<p>Весь код оборачивается в div с параметром xmlns:v="https://rdf.data-vocabulary.org/#"> , чтобы подключить словарь schema.org.</p>
<p>После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.</p>
<p>Если у вас возникнут дополнительные вопросы по теме данной статьи, обязательно спрашивайте в комментариях.</p>
<p>Напоследок предлагаю посмотреть видео о внутренней перелинковке.</p>
<p><span class="KMZZBoSKP2c"></span></p>
<p>Хлебные крошки в WordPress – вспомогательный элемент навигации, который показывает положение пользователя относительно всей иерархии ресурса. Проще говоря, это меню показывает, где именно сейчас находится посетитель.</p><blockquote><p>Хлебные крошки называются меню по причине того, что они отображают разделы с ссылками, благодаря которым можно «прыгать» по иерархии сайта.</p>
</blockquote><p>К слову, такая навигация была иронично названа по аналогии с одной из сказок. Ее суть заключалась в том, что дети, которых завели в лес, не смогли найти обратного пути домой, ведь всю дорогу разбрасывали хлебные крошки. В итоге они были склеваны птицами, поэтому дороги обратно дети не нашли (им нужно было кидать камешки).</p><p>Собственно хлебные крошки очень полезны для посетителей, ведь они могут сориентировать пользователя в правильном направлении и дать общее представление о структуре сайта. Неплохой такой вариант вспомогательной навигации, которая не идет в ущерб основной. Ну а также они предоставляют возможность перелинковки страниц, что хорошо для SEO. Но всегда существуют свои нюансы. Так, если взять стандартный шаблон, то тут от хлебных крошек толку будет мало (когда пользователь находится в рубриках, то крошки, по сути, просто повторили бы эту информацию).</p><p>Breadcrumb полезны в таких случаях:</p><ul><li>когда они отлично смотрятся с дизайном площадки (в этом случае меню используется не для оптимизации, а только для пользы и удобства посетителей);</li><li>когда площадка имеет действительно сложную структуру (например, корпоративный ресурс со сложной и запутанной структурой).</li>
</ul><p>Всего существует несколько типов крошек, которые используются как в русскоязычном сегменте интернета, так и за рубежом:</p><ol><li>Location. Данный тип определяет путь, и он является постоянным, т.е. он не будет меняться по мере передвижения пользователя по ресурсу;</li><li>Path. Этот тип показывает посетителю тот путь, который он уже прошел. Главным минусом таких крошек является то, что если пользователь придет из поисковой машины, то крошки не будут показываться;</li><li>Attribute. Такие крошки показываются в виде меток на конкретных страницах и позволяют определить рубрику на сайте. Данный вариант наиболее удобен и работает практически на всех ресурсах.</li>
</ol><p>Раскрутка сайтов по НЧ запросам имеет ряд достоинств, что особенно важно для коммерческих проектов; крошки иногда отбивают необходимость во вложении средств, необходимых для приобретения внешних ссылок. То есть вести раскрутку по НЧ запросам можно только при помощи одной лишь оптимизации за счет создания корректной перелинковки (иногда это действительно работает, но не стоит ожидать слишком многого от такого решения). Главное тут то, что посетители, которые пришли с поисковиков по таким запросам, очень часто конвертируются в деньги, а не просто в минутных гостей (со средне- и высокочастотными запросами такой номер не проходит).</p><p>В некотором роде хлебные крошки похожи на кровеносную систему, которая предоставляет возможность донести кислород до самых отдаленных «внутренних органов». Конечно, можно самостоятельно добавлять вручную линки на прочие материалы по теме, но для этого потребуется писать отдельный материал. Для создания меню хлебных крошек в первую очередь рассмотрим вариант без необходимости установки плагинов, а затем все же рассмотрим парочку из них, которые, на наш взгляд, являются самыми лучшими.</p> <h2>Вариант без установки плагина</h2><p>Рассмотрим способ, как реализовать крошки на вашей площадке без установки каких-либо плагинов. Он довольно прост с точки зрения реализации, поэтому ждать чего-то оригинального от этого решения не стоит. Зато все работает без плагинов, что говорит об отсутствии нагрузки на сайт.</p><p>Способ состоит из пары шагов:</p><ul><li>вписывание кода в файл functions.php;</li><li>вписывание кода крошек в нужное место.</li>
</ul><p>Итак, берем первый код и вставляем его в файл functions.php вашего активного шаблона:</p><p>function the_breadcrumb() {<br> if (!is_front_page()) {<br> echo "Главная";<br> echo " » ";<br> if (is_category() || is_single()) {<br> the_category(" ");<br> if (is_single()) {<br> echo " » ";<br> the_title();<br> }<br> } elseif (is_page()) {<br> echo the_title();<br> }<br> }<br> else {<br> echo "Home";<br> }<br> }</p><p>Его можно разместить в самом конце документа перед символами «?>» (без кавычек). Если в конце тега нет, то код можно закинуть в самое начало перед открывающимся тегом. При размещении кода смотрите, чтобы кодировка была UTF-8, или в противном случае некоторые русские буквы и слова будут отображаться неправильно. Задать кодировку можно при помощи редактора Notepad при помощи пункта «Кодировка – Кодировать в UTF-8 (без ВОМ).</p> <p>Теперь используем другой код и прописываем его там, где и требуется вывести хлебные крошки:</p><p><?php<br> the_breadcrumb ();<br> ?></p><p>Считается, что крошки должны размещаться везде, кроме главной страницы. То есть необходимо разместить этот код в файлах single.php, archive.php, page.php и category.php. Где конкретно размещать его – дело ваше, но по дефолту он вставляется перед выводом основного контента. Если есть возможность размещать код в главном блоке, то сделайте это, ведь потом не придется играться со стилями, чтобы крошки отображались как полагается.</p><p>Как видите, нужно лишь немного покопаться в файлах темы. Да и к тому же, способ работает без вспомогательных модулей. Ну а кому хочется получить возможность менять крошки на свое усмотрение, то придется ставить сторонние плагины. Отлично работает SEO by Yoast и Breadcrumb NavXT. Давайте рассмотрим первый из них.</p><h2>Плагин SEO by Yoast</h2><p>В качестве альтернативы вышеописанному способу можно использовать плагин SEO by Yaost, который способен создавать очень привлекательные крошки. Его основные достоинства:</p><ul><li>нет необходимости в установке сторонних модулей;</li><li>плагин способен выводить рубрики и подрубрики, тем самым отображая полную картину площадки;</li><li>есть возможность поменять текст ссылки, ведущей на главную;</li><li>выделение последних страниц жирным;</li><li>возможность изменения разделителя и префикса;</li><li>установка формата таксономии;</li><li>при помощи CSS можно экспериментировать с внешним видом крошек.</li>
</ul><p>Но все же заметим, что в ряде случаев плагин может отображать крошки не совсем правильно, но по мере развития плагина, уверены, разработчики устранят ошибки и добавят все недостающие функции.</p><p><img src='https://i2.wp.com/wordpresslib.ru/wp-content/uploads/2016/04/yoast-seo.jpg' align="center" width="100%" loading=lazy></p><p>Начнем с загрузки и инсталляции. Получить плагин можно по ссылке : https://wordpress.org/plugins/wordpress-seo/. Установка стандартна – заливаем содержимое в папку wp-content/plugins и активируем его в админке. Теперь можно переходить и к настройке:</p><ol><li>В админ панели переходим в раздел «SEO – Дополнительно»;</li><li>Произойдет загрузка дополнительных настроек плагина (он создан не только для отображения крошек), но конкретно нас интересует раздел «Навигационная цепочка»;</li><li>Активируем крошки, но для их появления на площадке необходимо будет разместить специальный код (найти его сможете в конце этого списка);</li><li>Выбираем один из разделителей, который поддерживается HTML5;</li><li>Далее выбираем текст главной страницы сайта (например, «Главная», «Домой» и т.д.);</li><li>Префикс – это символ или слово, которое будет отображаться перед всеми крошками на ресурсе (обычно ставят стрелочку);</li><li>Далее можно выбрать префиксы конкретно для архивов, страниц результатов поиска, страницы 404;</li><li>Выделять последний пункт жирным может и кому-то покажется полезным, но последняя страница часто идентична заголовку, поэтому тут решайте сами, как поступить;</li><li>Последний пункт настроек – таксономия (можно выбрать между рубриками, форматами, метками);</li><li>Сохраняем внесенные изменения.</li>
</ol><p>После выполнения настройки необходимо добавить код в шаблон:</p><p><?php if (function_exists("yoast_breadcrumb"))<br> {yoast_breadcrumb("");} ?></p><p>Вот и все, во всех остальных моментах работы с плагином разобраться не составит особого труда.<br><span class="liS-8sHEhU0"></span></p><h2>Плагин Breadcrumb NavXT</h2><p>Плагин имеет огромное количество настроек, а главное – работает как качественные часики за несколько тысяч долларов. Как уже упоминалось выше, постраничная навигация WordPress возможна и без установки сторонних модулей, но с помощью Breadcrumb NavXT все упрощается – каждый пользователь сможет настроить навигационную цепь так, как ему нравится.</p><p>Загрузить плагин можно на странице : http://wordpress.org/extend/plugins/breadcrumb-navxt/ ( не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.</p><p><div class="breadcrumb"><br> <?php<br> if(function_exists("bcn_display"))<br> {<br> bcn_display();<br> }<br> ?><br> </div></p><p>При необходимости код можно добавить и в другие файлы вашей темы. Теперь нужно перейти в меню настроек и немного «поколдовать» с его опциями, благодаря которым можно делать с этими крошками, что только душа пожелает (разработчики действительно выполняли его на совесть).</p><p><img src='https://i1.wp.com/wordpresslib.ru/wp-content/uploads/2016/04/breadcrunb-navtx.jpg' align="center" width="100%" loading=lazy></p><p>Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).</p><p>Поле «Максимальная длинна» указывает длину анкора в символах. Мы рекомендуем указать ограничение в 60 символов, что полезно в плане оптимизации. Выше мы уже упоминали о пользе крошек для SEO; то есть крошки будут индексироваться поисковыми машинами, и использоваться они будут не только для передачи пустого веса. Оговоримся, что поисковые машины могут непредсказуемо относиться к ссылкам с идентичными анкорами, поэтому рекомендуем их укорачивать (это необязательно, но все же можно немного потратить времени на это).</p><p>Если проставить галочку напротив «Домашняя ссылка», то в крошках будет показываться ссылка на главную. И при необходимости можно выбрать анкор. Поля «Префикс» и «Суффикс» позволяют указать текст, который будет стоить перед или после линка на главную. Ну а поле «Текст домашней ссылки» позволит указать текст, который будет показан при наведении на линк домашней страницы.</p> <p>Стоит взять во внимание: этот текст может учитываться поисковыми системами, как анкор. То есть, стоит указать ключевики, которые касаются вашей главной страницы. После этого сохраняем все внесённые изменения при помощи соответствующей кнопки.</p><p>Но это ведь только одна вкладка «Общие», поэтому можно пробежаться и по остальным вкладкам. Так, на следующей есть пункт настройки для линка, который будет указывать на страницу, где вы находитесь. Линк на текущую позицию улучшает внутреннюю оптимизацию ресурса, поэтому галочку поставить возле этого поля рекомендуем. Также не забываем, что мы рекомендовали не превышать 60 символов, во избежание создания крупных заголовков.</p><p>Следующее поле «Текст текущей позиции» можно не трогать, просто потому, что оно хорошо показывает смысл перехода (этот текст будет видеть посетитель, когда наведет курсор мыши на ссылку). Вкладка «Записи/Страницы» позволяет настроить показ ссылок на страницы со контентом и статические страницы площадки (для статей можно задать надпись «Текущая статья»).</p><p>На вкладке «Рубрики», по сути, все настройки походят на те, которые были на предыдущих страницах. При настройке мы не стали задавать префиксы и суффиксы, но внесли изменения в поле «Архивы». В результате всего этого, мы получили такие привлекательные крошки, где все исправно работает.</p><p><img src='https://i2.wp.com/wordpresslib.ru/wp-content/uploads/2016/04/1_53aaf2ee6a26a737aafa47c07aca9345.png' align="center" width="100%" loading=lazy></p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
<div class="right -is-sticky">
<div class="articles-conseilles">
<div id="focoda2" style="height:500px;width:266px;" align="center"></div>
</div>
</div>
</div>
<div class="a-decouvrir">
<h3>Рекомендуем почитать</h3>
<div class="featured">
<div class="view view-articles view-id-articles view-display-id-block_4 view-dom-id-169dc93f512a102548b755435ccd1346">
<div class="view-content">
<div class="row">
<article class="preview-article">
<header class="preview-article__header">
<a href="/luchshie-utility-dlya-udaleniya-virusov-i-vredonosnyh-programm/">
<figure class="">
<img src="https://i2.wp.com/webhelper.info/images/danger.jpg" alt="Лучшие утилиты для удаления вирусов и вредоносных программ" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/luchshie-utility-dlya-udaleniya-virusov-i-vredonosnyh-programm/">Лучшие утилиты для удаления вирусов и вредоносных программ</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Вредоносное ПО (malware) - это назойливые или опасные программы,...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/programma-dlya-vosstanovleniya-udalennyh-failov-onlain-kak-testirovalis/">
<figure class="">
<img src="https://i0.wp.com/softnonstop.ru/newi/7-Data-Recovery-Suite-min.png" alt="Как тестировались программы" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/programma-dlya-vosstanovleniya-udalennyh-failov-onlain-kak-testirovalis/">Как тестировались программы</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Лучшие программы для восстановления данных с любых носителей информации....
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/chto-sdelat-chtoby-umenshit-nagruzku-kak-umenshit-nagruzku-na-cp/">
<figure class="">
<img src="https://i2.wp.com/pcpro100.info/wp-content/uploads/2015/03/kak-pochistit-kompyuter-ot-pyili.jpg" alt="Как уменьшить нагрузку на ЦП: простые, но эффективные методы решения проблемы" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/chto-sdelat-chtoby-umenshit-nagruzku-kak-umenshit-nagruzku-na-cp/">Как уменьшить нагрузку на ЦП: простые, но эффективные методы решения проблемы</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-menu" tabindex="-1">Наверх</a>
</div>
</section>
<div class="region region-bottom">
<div class="block block-block first last odd" id="block-block-7">
<ul>
<li><a href="/category/news/">Новости</a></li>
<li><a href="/category/for-android/">Для Андроид</a></li>
<li><a href="/category/for-windows/">Для Windows</a></li>
<li><a href="/category/for-windows-phone/">Для Windows Phone</a></li>
<li><a href="/category/download-viber/">Скачать Viber</a></li>
<li><a href="/category/viber-on-the-computer/">Вайбер на компьютер</a></li>
</ul>
<p><a href="/" id="choosit"><img alt="" height="13" src="/sites/all/themes/lanutrition/img/logo-choosit.svg" width="50" / loading=lazy></a></p>
</div>
</div>
<div class="search-modal" id="search-modal"><button class="close-button" id="close-search" aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button>
<div class="search-modal__content">
<div class="block block-search first odd" role="search" id="block-search-form">
<form class="search-form" role="search" action="/" method="get" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Поиск по сайту</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<input title="" class="custom-search-box form-text" placeholder="введите слово" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Rechercher" class="form-submit" /></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
