Breadcrumb navxt код установить на собственный cms. Как сделать хлебные крошки без плагина Breadcrumb NavXT? Вывод хлебных крошек с помощью плагина Yoast SEO
Приветствую вас, уважаемые читатели блога сайт. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для
WordPress
—
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). И вставьте <a href="/network-and-internet/gosuslugi-personalnye-dannye-vvesti-kod-pravila-registracii/">данный код</a> практически в самый низ и обновите файл.</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><p>Сам термин «Хлебные крошки» взят из сказки братьев Гримм «Гензель и Гретель», в которой детей заводили в лес. В первый раз, когда отец по воле злой мачехи заводит брата и сестру в лес, они находят дорогу обратно, благодаря тому, что оставляли по своему пути камешки. Во второй раз у детей камешков не оказалось, и они оставляли на своем пути вместо камешков хлебные крошки, которые склевали лесные птицы и дети заблудились в лесу. После различных приключений детям все-таки удалось вернуться домой.</p><p>Обычно навигация Хлебные крошки (по-английски Breadcrumbs) представляет из себя полосу в верхней части страницы, которая имеет примерно такой вид:</p><p>Все разделы сайта, кроме последнего являются ссылками. Последний раздел навигации является именно той страницей, на которой вы сейчас находитесь. На эту страницу гиперссылку делать не нужно.</p><p>Этот последний элемент может быть не обязательно отдельной страницей, а например названием рубрики, если вы вошли в какую-нибудь рубрику. В этом случае название рубрики уже не будет гиперссылкой.</p><p>Хлебные крошки на сайт можно установить с помощью плагина, а также без использования для этого специального плагина. Вначале рассмотрим установку хлебных крошек с помощью плагина Breadcrumb NavXT.</p><h2>Плагин Breadcrumb NavXT</h2><p>Для установки плагина Breadcrumb NavXT нужно войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» нужно ввести выражение «Breadcrumb NavXT», а после этого нужно нажать на кнопку «Поиск плагинов».<br>
В окне «Установить плагин» под названием плагина «Breadcrumb NavXT» следует нажать на ссылку «Установить».</p><p>В открывшемся окне «Установка плагина: Breadcrumb NavXT» необходимо нажать на ссылку «Активировать плагин». После этого в боковой панели «Админ-панели WordPress» появился новый пункт «Breadcrumb NavXT». Если нажать на этот пункт, то тогда можно будет войти в настройки плагина хлебных крошек.</p><p>В окне «Настройки Breadcrumb NavXT» расположено довольно много настроек этого плагина. Настройки Breadcrumb NavXT можно оставить сделанными по умолчанию. Во вкладке «Основные» можно, если вы хотите, изменить пункт «Ссылка на главную».</p><p>Теперь нужно вставить в файлы вашей темы, в те места, где должны будут отображаться хлебные крошки, следующий код:</p><p> <div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
>?
</div>
</p><p>Этот код желательно вставить в такие файлы вашей темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».</p><p>Для того, чтобы вставить этот код нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Шаблоны».</p><p>В шаблон «Одна запись (single.php)», который отвечает за страницы со статьями, код вставляется так, как показано на этом изображении.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/22.png' align="center" width="100%" loading=lazy></p><p>После вставки кода, нажимаете на кнопку «Обновить файл».</p><p><img src='https://i0.wp.com/vellisa.ru/wp-content/uploads/2012/11/31.png' align="center" width="100%" loading=lazy></p><p>Код вставлен, затем нужно нажать на кнопку «Обновить файл».</p><p>В файл «Архивы (arhvie.php)», который отвечает за рубрики, также нужно будет вставить этот код.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/41.png' align="center" height="252" width="365" loading=lazy></p><p>После того, как код вставлен, нажимаете на кнопку «Обновить файл».</p><p>И в завершении установки кода в файлы темы WordPress, код вставляется в файл «Результаты поиска (search.php)», который отвечает за поиск по сайту. Вставляете код в то место, как это показано на изображении.</p><p><img src='https://i1.wp.com/vellisa.ru/wp-content/uploads/2012/11/51.png' align="center" width="100%" loading=lazy></p><p>На этом изображении видно как выглядит навигация хлебные крошки. Имя главной страницы не было изменено на название сайта.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/61.png' align="center" height="134" width="323" loading=lazy></p><p>Можно также вставить в файл «Таблица стилей (style.ccs)» такой код (это делать необязательно):</p><p>Breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}
</p><p>В этом коде можно менять размер и шрифт (font:bolder 12px «Trebuchet MS», Verdana, Arial), отступы (padding-bottom: 10px), а также цвет ссылок хлебных крошек в статическом состоянии и при наведении на них курсора мыши (можно менять цифровые значения).</p><p>Показания в этом коде можно менять по своему усмотрению, или найти другой подобный код в Интернете. Также можно вообще обойтись и без установки этого кода в файл «Таблица стилей (style.ccs)». В установленной у меня теме, после установки кода, немного изменился шрифт.</p><p>В этой статье было рассмотрена установка хлебных крошек на сайт с помощью плагина Breadcrumb NavXT. В следующей статье будет рассмотрен такой вопрос - как установить без использования плагина.</p><h2>Выводы статьи</h2><p>При помощи плагина Breadcrumb NavXT на сайт устанавливается навигация, так называемые «хлебные крошки», которая помогает пользователю понять в каком разделе сайта он находится в данный момент времени.</p>
<p>«Хлебные крошки
» — это многоуровневая система навигации, которая сообщает пользователям, где на сайте они находятся в данный момент по отношению к главной странице. В этой статье мы покажем, как вывести «хлебные крошки» WordPress
:</p>
<h2>Что такое «хлебные крошки» и для чего они нужны?</h2>
<p>«Хлебные крошки
» — это термин, используемый для обозначения иерархического меню навигации, представленного в виде цепочки ссылок. Оно часто используется в качестве дополнительного меню навигации.</p>
<p>«Хлебные крошки
» отличаются от системы меню навигации WordPress
, используемой по умолчанию.</p>
<p>Цель «хлебных крошек
» — помочь пользователям перемещаться по сайту. Они помогают понять, где сейчас находится пользователь. Это также помогает поисковым системам определить иерархию ссылок на веб-страницы.</p>
<p>Поисковые системы, такие как Google
, начали выводить «хлебные крошки
» сайта в результатах поиска. Это увеличивает видимость сайта в результатах поиска и улучшает показатель переходов:</p>
<p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbs-seo-261125.png' width="100%" loading=lazy></p>
<h3>Добавление хлебных крошек с помощью Breadcrumb NavXT Plugin</h3>
<p>Это гибкий и простой в использовании «хлебные крошки» WordPress
плагин. Он имеет больше разнообразных функций, чем вы можете себе представить. Первое, что нужно сделать, это установить и активировать плагин Breadcrumb NavXT
. После его активации необходимо перейти на страницу настроек плагина: <span>Настройки — Breadcrumb NavXT
</span>:</p>
<p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbnavxt-settings-261126.png' width="100%" loading=lazy></p>
<p>Для большинства сайтов подойдут настройки по умолчанию. Но при необходимости вы можете внести изменения в настройки параметров.</p>
<p>Страница настроек разделена на несколько разделов. На вкладке «Общие
» вы можете определить, каким образом плагин будет вести себя на сайте.</p>
<p>Здесь можно изменить шаблон ссылок. Эти шаблоны используют параметры Schema.org
в теге ссылки.</p>
<p>В разделе «Типы записей
» вы можете задать «хлебные крошки
» для записей, страниц, а также любых пользовательских типов записей. Вы можете выбрать вариант отображения иерархии записей. По умолчанию плагин будет использовать иерархию «<span>Название сайта > Рубрика> Заголовок записи
</span>».</p>
<p>Вы можете заменить элементы навигации тегами, датами или родительскими элементами записей. Вкладки «Таксономии
» и «Авторы
» имеют сходные шаблоны для ссылок меню. Не забудьте нажать на кнопку «<span>Сохранить изменения
</span>».</p>
<h3>Отображение Breadcrumb NavXT на вашем сайте</h3>
<p>Для использования этого WordPress
плагина «хлебные крошки
» вы должны отредактировать файлы темы. Нужно добавить следующий код в файл header.php
темы в том месте, где будут отображаться «хлебные крошки
»:</p>
<p><div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if(function_exists("bcn_display"))
{
bcn_display();
}?>
</div></p>
<p>Перейдите на сайт и откройте какую-нибудь запись или страницу. Вы увидите, что у вас уже отображаются «хлебные крошки
».</p>
<h3>Добавление «хлебных крошек» с помощью Yoast SEO Plugin</h3>
<p>Установите и активируйте Yoast SEO Plugin
. После активации плагина нужно перейти на страницу <span>SEO > Дополнительно
</span> и установите флажок для опции «<span>Включить хлебные крошки
</span>»:</p>
<p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/yoastbreadcrumb-1-261131.png' width="100%" loading=lazy></p>
<p>После этого станут доступны несколько параметров, с помощью которых вы можете изменить вариант отображения «хлебных крошек
». Настройки по умолчанию должны подойти для большинства сайтов, но при необходимости их можно легко изменить.</p>
<p>После того, как вы закончите, нажмите на кнопку «<span>Сохранить изменения
</span>».</p>
<h3>Вывод хлебных крошек с помощью плагина Yoast SEO</h3>
<p>Некоторые темы уже поддерживают «хлебные крошки
» Yoast
. Перейдите на сайт и откройте какую-либо страницу или запись, чтобы проверить, отображаются ли в них «хлебные крошки
» WordPress
. Если нет, то нужно добавить небольшой фрагмент кода в активную тему.</p>
<p>Вставьте этот код в header.php своей темы в конце файла:</p>
<p><?php if (function_exists("yoast_breadcrumb"))
{yoast_breadcrumb("");} ?></p>
<p>Вот и все, теперь вы можете перейти на свой сайт, там уже будут отображаться «хлебные крошки
».</p>
<p>Надеемся, что эта статья помогла вам.</p>
<p>Перевод статьи «<span>How to Display Breadcrumb Navigation Links in WordPress
</span>» был подготовлен дружной командой проекта .</p>
<p>Хорошо
Плохо
</p>
<p>Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу рассказать о плагине для WordPress, который используются на моем блоге сразу для двух очень важных целей.</p><p>Во-первых, он облегчает навигацию, а во-вторых, решает очень важную проблему — создание правильной внутренней перелинковки. Чтобы не затягивать интригу сразу скажу, что речь пойдет о плагине Breadcrumb NavXT. Но обо все по порядку.</p><p>Я уже много говорил о необходимости создания надлежащей перелинковки страниц сайта для того, чтобы статический вес, передаваемый по любым внешним ссылкам, равномерно распределялся по всем вебстраницам проекта. Особенно это важно .</p><h2>Зачем нужны хлебные крошки в WordPress</h2><p>Продвижение по НЧ имеет ряд преимуществ, главное из которых (особенно важно для не коммерческих проектов) — не требуется вложения денежных средств, необходимых для покупки внешних ссылок. Связано это с тем, что по НЧ можно продвигаться только за счет одной лишь внутренней сайта и за счет создания правильной перелинковки, как было описано .</p><p>Кстати, для коммерческих проектов раскрутка по НЧ тоже имеет целый ряд преимуществ, основным из которых опять же является меньшая стоимость, но кроме этого посетители, пришедшие с выдачи по таким запросам, будут гораздо чаще конвертироваться в денежные знаки, нежели посетители, пришедшие по запросам средне и высокочастотным (в связи с неконкретность последних).</p><p>Основная мысль правильной линковки сводится к тому, чтобы статический вес, передаваемый на разные страницы сайта (больше всего внешних ссылок обычно ведет на главную), без проблем перетекал на те, которые непосредственно продвигаются по НЧ (там, где, собственно, расположены статьи).</p><p>Но идеальная круговая схема, описанная в приведенной статье, трудно осуществима в реальных условиях, поэтому хорошим вариантом будет сферическая схема линковки. Грубо говоря, такую схему можно утрировать до того, что чем больше будет внутренних ссылок, тем лучше будет распределяться статический вес. Это похоже на разветвленную кровеносную систему, позволяющую крови донести кислород до всех, даже самых отдаленных от легких, внутренних органов.</p><p>Вы можете вручную добавлять каждый раз при написании статей линки на другие материалы вашего же сайта, которые будут уместны. Правда очень серьезно подходите к создаваемому таким образом внутреннему анкор-листу для каждой из статей. Делать это нужно примерно так же, как и . Не стоит употреблять во всех ссылках на нее один и тот же неразбавленный ключ, ну вы понимаете, о чем я.</p><p>Это очень хороший способ, но его всегда будет не лишним расширить и дополнить с помощью автоматических методов.Одним из самых распространенных вариантов организации чего то подобного являются, так называемые, хлебные крошки, расширяющие возможности навигации по ресурсу, а так же создание блока ссылок на другие похожие материалы вашего проекта, схожие по тематике с данной статьей.</p><p>Сегодня я хочу подробно рассмотреть первый вариант, а вот про похожие материалы для Вордпресс в .</p><p>Для реализации хлебных крошек мы будем использовать плагин Breadcrumb NavXT. В принципе, вы можете использовать для этих целей и другие плагины WordPress, но мне больше приглянулись именно эти. Можно даже .</p><h3>Установка плагина Breadcrumb NavXT в Вордпресс</h3><p>Ладно, пора переходить непосредственно к установке и настройке плагина. Если вы вдруг не знаете что такое хлебные крошки, то ничего страшного. Собственно, я тоже по началу не знал, ибо термин этот взят из буржунета и связан с их буржуйской сказкой про Гензеля и Грету, которые использовали их для того, чтобы пометить путь.</p><p>В нашем понимании, этот элемент навигации по сайту нужно было бы назвать «нить Ариадны», ибо нам как-то ближе. Ну, да ладно, как назвали, так и назвали. Итак, они обычно отображаются где-нибудь в верхней части окна сайта и фактически представляют из себя путь до той статьи, которую вы в данный момент читаете.</p><p>Мне, например, очень нравится навигация с помощью крошек и я всегда стараюсь найти их строчку на любом сайте для того, чтобы понять, а где я, собственно, нахожусь и как перейти в тот раздел, где находится данная замечательная статья, чтобы почитать еще на ту же тему.</p><p>Ну что, вспомнили что такое хлебные крошки? Думаю, что вспомнили, а если нет, то посмотрите в самом верху этого окна под шапкой этого блога.</p><p>Для начала вам нужно будет скачать Breadcrumb NavXT <b>отсюда
</b> . Установка плагина на WordPress стандартная. Подключитесь к своему блогу по протоколу FTP (работа с клиентом FileZilla подробно описана ) и откройте на сервере папку:</p><p> /wp-content/plugins
</p><p>Распакуйте архив с Breadcrumb NavXT и скопируйте получившуюся в результате папку на сервер хостинга в директорию (/wp-content/plugins). Теперь нужно будет зайти в админку Вордпресса, выбрать из левого меню пункт «Плагины», а в открывшемся окне перейти на вкладку «Неактивно». Найдите строчку с нужным и щелкните по расположенной чуть ниже надписи «Активировать».</p><h2>Вызов Breadcrumb NavXT и настройка внешнего вида крошек</h2><p>Вот, собственно, и все. Теперь осталась еще одна существенная деталь: выбрать место в шаблоне (теме) WordPress, где будет выводиться строка с хлебными крошками, и вставить в это место код функции плагина Breadcrumb NavXT. Задача не совсем тривиальная для начинающего вебмастера, мало знакомого со структурой движка и работой его тем.</p><p>Но вас, пожалуй, это в тупик не поставит, т.к. вы всегда можете почитать , благо, что там ничего сложно нет.</p><p>Если вы уже знакомы с устройством тем и знаете назначение тех или иных шаблонов в ней, то мы продолжим. Но, в противном случае, все же советую вам хотя бы поверхностно ознакомиться с этим, используя указанный выше материал (или какой-либо другой).</p><p>Итак, наша задача состоит в том, чтобы определить те файлы из папки с используемой вами темой, в которые мы должны будем вставить код вызова крошек. А затем нужно будет определиться, в какое именно место кода будем вставлять это:</p><p> <div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div>
</p><p>Во-первых, вам нужно подключиться к вашем блогу по FTP и открыть папку с темой, которую вы в данный момент используете:</p><p>Wp-content/themes/название темы WordPress
</p><p>А теперь давайте вам расскажу, как сделал вывод хлебных крошек я сам, а вы сможете повторить все за мной, либо использовать свой вариант вставки.</p><p>Если попробовать наглядно представить предназначение шаблонов из темы, то получится примерно такой макет:</p><p>Из этого макета мы можем сделать вывод, что код вызова Breadcrumb NavXT нам нужно будет вставлять в те шаблоны, которые отвечают за вывод контента в центральной части блога: INDEX, SINGLE, ARCHIVE, PAGE или SEARCH.</p><p>Правда, я не стал выводить крошки в INDEX, отвечающий за формирование главной страницы WordPress, ибо там дополнительная навигация будет излишней.</p><p>Я вставил его в: SINGLE (отвечает за формирование страниц со статьями), ARCHIVE (формирует страницы рубрик, временных архивов, архивов тегов), PAGE (формирует в статические страницы, например, «О блоге»).</p><p>Код вызова Breadcrumb NavXT в эти шаблоны я вставлял в одно и тоже место — в самом начале, сразу после первой строки:</p><p> <?php get_header(); ?>
</p><p>чтобы получилось так:</p><p> <?php get_header(); ?>
<div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div>
</p><p>В файл таблицы каскадных стилей STYLE.CSS из папки с используемой темой я добавил несколько CSS свойств для класса BREADCRUMB:</p><p>Breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}
</p><p>Эти свойства задают внешний вид для хлебных крошек в WordPress: , а . Так же определяют цвет ссылок с хлебных крошек (.breadcrumb a) и цвет ссылок при наведении на них курсора мыши (.breadcrumb a:hover). Вообще советую ознакомиться странице.</p><h2>Возможности и настройки плагина Breadcrumb</h2><p>Вы вольны делать так, как захочется. Как говорится, хозяин — барин. Но этим мы только определили место вывода хлебных крошек и задали их внешний вид. Но у этого плагина еще довольно много настроек.</p><p>Для этого заходите в админку WordPress и выбираете из левого меню в области «Настройки» пункт «Breadcrumb NavXT». В открывшемся окне увидите несколько вкладок:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt.png' height="607" width="541" loading=lazy></p><p>На вкладке «Общие» можете задать параметры, которые будут применены для всех страниц вашего блога. В поле «Разделитель» — задать символ, который будет служить разделителем в хлебных крошках. В моем случае это символ «>», который задается специальным кодом, т.к. символ «>» проставленный в явном виде, буде интерпретирован Вордпресс, как знак открывающегося HTML тега.</p><p>Вообще существует (мнемоник), которые, например, нельзя вставить напрямую. Вот некоторые из них:</p><p>Мнемокод Символ
" "
& &
< <
> >
¤ ¤
¦ ¦
§ §
©
ª ?
« «
® ®
° °
± ±
µ µ
¶ ¶
·
¹ ?
€ €
</p><p>Выбирайте любой понравившийся вам символ в качестве разделителя для хлебных крошек.</p><p>В поле «Максимальная длинна» вы можете задать длину анкора (текста ссылки) в символах. Я задал ограничение длины в 60 символов, исходя не из соображений дизайна, а из соображений оптимизации контента.</p><p>Поисковики могут неоднозначно относиться к ссылкам с одинаковыми анкорами, поэтому я и укорачиваю их в крошках для уникализации. Возможно, что это и не очень-то нужно, но так, на всякий случай.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/plagin-breadcrumb-navxt.png' width="100%" loading=lazy></p><p>В полях «Префикс» и «Суффикс» можете ввести текст, который будет предшествовать или следовать после ссылки на главную в хлебных крошках.</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-glavnay.png' width="100%" loading=lazy></p><p>Учтите, что этот текст будет помещен в атрибут TITLE тега A и, возможно, будет учтен поисковыми системами как альтернативный анкор. Это я к тому, что в нем следует употребить ключевые слова, относящиеся к главной странице вашего блога.</p><p>Не забудьте сохранить произведенные изменения в настройках плагина Breadcrumb NavXT с помощью одноименной кнопки. Далее вы можете пройтись по всем вкладкам. Например, на следующей сможете задать настройки для ссылки, которая будет вести на ту страницу, где вы сейчас находитесь:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/nastroika-breadcrumb-navxt.png' width="100%" loading=lazy></p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-tekushay.png' width="100%" loading=lazy></p><p>На следующей вкладке «Записи / Страницы» можете настроить отображение ссылок на страницы со статьями и статические страницы вашего блога:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/nastroika-hlebnye-kroshki.png' height="607" width="541" loading=lazy></p><p>Для статей я задал предшествующую надпись «Текущая статья» и заключил текст в кавычки с помощью мнемокода (список мнемокодов см. выше):</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-statiy.png' width="100%" loading=lazy></p><p>Переходим на следующую вкладку «Рубрики». В принципе, здесь повторяются все те же настройки, что и на предыдущих. Я не стал задавать обрамление (префикс и суффикс) для ссылок на рубрики, но задал обрамление для страниц архивов:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/hlebnye-kroshki-nastroiki.png' width="100%" loading=lazy></p><p>В результате на вебстраницах архива хлебные крошки выглядят так:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-rubriki.png' width="100%" loading=lazy></p>
<p>Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. <span>Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.
</p>
<h2>Первая причина популярности плагина "Хлебные крошки"</h2>
<p>Это удобство для навигации по . После установки и настройке плагина Breadcrumb NavXT в верхней части страницы появляется удобное меню навигации которое поэтапно показывает пользователю не только название страницы на которой он находится но и последовательно все страницы сайта на которых он побывал ранее. Что безусловно очень удобно, особенно при изучении большого количества материала и просмотра нескольких страниц.</p>
<h2>Вторая причина востребованности этого плагина</h2>
<p>Дополнительная перелинковка страниц, и как следствие <b>+
</b>в ранжировании поисковиков. (Собственно, прозвище "Хлебные крошки" произошло от сказки братьев Гримм под названием Гензель и Гретель по сюжете которой дети чтобы не заблудится в лесу бросали хлебные крошки… Но это так, лирическое отступление.) Вернёмся всё же к нашему плагину.</p>
<h2>Скачиваем и устанавливаем плагин Breadcrumb NavXT.</h2>
<p>Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "<b>Breadcrumb NavXT
</b>"</p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065655.png' align="center" height="248" width="380" loading=lazy></p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065501.png' align="center" width="100%" loading=lazy></p>
<p>Установка обычная ничем не отличается от установки остальных плагинов. А вот с настройками придётся повозиться.</p>
<p>Переходим по вкладке "Параметры"…</p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185405-e1389337037125.jpg' align="center" height="525" width="300" loading=lazy></p>
<p>… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка<b>"Основные"
</b>, все остальные вкладки настроек: <i>"Записи и страницы", "Таксономии", "Другое"
</i>, можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:</p><p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2019/01/2019-01-24_142049.jpg' align="center" width="100%" loading=lazy></p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185939.png' align="center" height="648" width="600" loading=lazy></p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_190130.png' align="center" height="631" width="600" loading=lazy></p>
<p>Сохраняем изменения настроек, и на этом здесь все.</p>
<p>Теперь приступаем к самому интересному.</p>
<h2>Необходимо отредактировать шаблон вашей темы.</h2>
<p>К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.</p>
<p>Переходим в консоль и выбираем «Внешний вид»→«Редактор»:</p>
<p><img src='https://i2.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-10_092847.png' height="288" width="192" loading=lazy></p>
<p>В результате переходим в раздел редактирования тем. В этом разделе для редактирования необходимо выбрать именно ту тему которую вы сейчас используете. Как правило многие администраторы сайтов устанавливают несколько шаблонов сайтов но используется всего один. Поэтому редактировать следует тот который используется.</p>
<p>Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)</p>
<p>Выглядит это так:</p>
<p>Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: <b>single.php, index.php и page.php, category.php
</b> Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)</p>
<p><b>Затем берём код:
</b></p>
<p><b><span><div class="breadcrumb">
</span>
</b></p>
<p><b><span><?php
</span>
</b></p>
<p><b><span>if(function_exists("bcn_display"))
</span>
</b></p>
<p><b><span>{
</span>
</b></p>
<p><b><span>bcn_display();
</span>
</b></p>
<p><b><span>}
</span>
</b></p>
<p><b><span>?>
</span>
</b></p>
<p><b><span></div>
</span>
</b></p>
<p>И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (<b>header
</b>):</p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_191416.png' align="center" width="100%" loading=lazy></p>
<p>Естественно сохраняем каждый изменённый файл. После чего плагин Breadcrumb NavXT начнёт работать.</p>
<p>Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.</p>
<p>Но бывают случаи когда дизайн вашей темы сайта не совпадает с дизайном отображаемой строки Хлебных крошек.</p>
<h2>В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.</h2>
<p>Делается это так. <b>Берём этот код:
</b></p>
<p><b><span>.breadcrumb {
</b>
</p>
<p><b><span>font:bolder 12px "Trebuchet MS", Verdana, Arial;
</span>
</b>
</p>
<p><b>padding-bottom: 10px;
</b>
</p>
<p><b><span>}
</b>
</p>
<p><b><span>.breadcrumb a{
</b>
</p>
<p><b><span>color: #1B7499;
</b>
</p>
<p><b><span>}
</b>
</span><span><b>.breadcrumb a:hover {
</b>
</p>
<p><b><span>color: #EF0E0E;
</b>
</p>
<p><b><span>}
</b>
</p>
<p>Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке <b>"Таблица стилей"
</b> вашей темы</p>
<p><img src='https://i2.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_192714.png' height="337" width="227" loading=lazy></p>
<p>… и вставляем код в самом низу редактора</p>
<p>… сохраняемся, нажав <b>"Обновить файл"
</b> Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.</p>
<p>Ну вот, теперь пожалуй всё.</p>
<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>
<aside role="complementary">
<div class="block cat-list">
<div class="block-title">
<h3>Категории</h3>
</div>
<div class="block-content">
<ul>
<li>
<a href="/category/internet/">Интернет</a>
</li>
<li>
<a href="/category/windows-10/">Windows 10</a>
</li>
<li>
<a href="/category/multimedia/">Мультимедиа</a>
</li>
<li>
<a href="/category/utilities/">Утилиты</a>
</li>
<li>
<a href="/category/network-and-internet/">Сеть и интернет</a>
</li>
<li>
<a href="/category/system-programs/">Системные программы</a>
</li>
<li>
<a href="/category/configuring-programs/">Настройка программ</a>
</li>
<li>
<a href="/category/os-problems/">Проблемы с ОС</a>
</li>
</ul>
</div>
</div>
<div>
</div>
</aside>
</div>
</div>
</section>
</div>
<footer class="b-footer">
<div class="container">
<div class="b-footer-content">
<p>rustrackers.ru - Бесплатные программы для вашего ПК</p>
</div>
</div>
</footer>
<div id="back-top" class="back-top bounce-out">
<a href="#" title="Наверх"></a>
</div>
<script src="/bitrix/templates/newit_siteblog_response/site_files/js/libs/jquery/jquery.js"></script>
<script src="/bitrix/templates/newit_siteblog_response/site_files/js/vendor/jquery.colorbox-min.js"></script>
<script src="/bitrix/templates/newit_siteblog_response/site_files/js/scripts.min.js"></script>
<script src="/bitrix/templates/newit_siteblog_response/site_files/js/custom/custom.js"></script>
</body>
</html>
