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

Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.

Установка плагина Breadcrumb NavXT и вывод хлебных крошек на блоге.

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

Я плагин Breadcrumb NavXT впервые установил на один из блогов 3 года назад, и вот в конце 2013 года повторно с ним познакомился. Скажу честно — он стал удобнее в настройке, опций меньше, работает также. Новички могут без страха устанавливать его на свои блоги, и польза и первые навыки по

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

Функции

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

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

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

Стоит ли добавлять вспомогательную навигацию на сайт

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

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

Breadcrumb NavXT

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

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

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

Yoast Wordpress SEO

Создание вспомогательного меню - это одна из функций данного программного продукта. Большое количество инструментов позволяет выполнять расширенную SEO-оптимизацию. Этот плагин используют люди, настроенные на качественное продвижение блога. Редактирование блока со ссылками у некоторых владельцев сайтов может вызвать затруднения. Чтобы выполнить эту задачу, нужно открыть административную панель Wordpress, перейти в раздел «SEO» и выбрать строку «дополнительно».

Будет загружена страница с дополнительными настройками плагина. Здесь необходимо перейти на вкладку «навигационная цепочка». Пункт «включить» следует отметить галочкой. Для появления вспомогательного меню на сайте требуется добавить в код блога PHP-функцию, отвечающую за вывод. В поле «разделитель» можно ввести любой символ, который поддерживается HTML5.

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

Breadcrumb Trail

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

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

Yummi «хлебные крошки»

Этот программный продукт можно установить прямо из панели администратора в Wordpress. Для этого следует перейти на страницу «плагины». Затем нужно кликнуть по кнопке «добавить новый», ввести название в строку поиска, нажать Enter и установить ПО. После активации необходимо настроить плагин. С этой задачей справится даже начинающий пользователь.

Сначала нужно указать тип установки блока со ссылками. Чтобы «хлебные крошки» Wordpress плагин вывел автоматически, следует выбрать соответствующий пункт. Если пользователь укажет тип «ручная установка», то он должен будет вставить код на сайт самостоятельно. Затем требуется выбрать внешний вид блока со ссылками. Далее следует указать, на каких страницах будут отображаться «хлебные крошки».

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

Really Simple Breadcrumb

Этот программный продукт - еще одно простое решение для Wordpress. Плагин работает корректно и без ошибок, отображается согласно коду используемой темы. Установить программное обеспечение можно через панель администратора. Для того чтобы «хлебные крошки» отображались на статических страницах, необходимо прописать над строкой вывода заголовка соответствующий код. Если пользователю нужно изменить тип разделителя, то он может редактировать 17 строчку файла breadcrumb.php.

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

DP RDFa Breadcrumb Generator

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

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

Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.

Первая причина популярности плагина "Хлебные крошки"

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

Вторая причина востребованности этого плагина

Дополнительная перелинковка страниц, и как следствие + в ранжировании поисковиков. (Собственно, прозвище "Хлебные крошки" произошло от сказки братьев Гримм под названием Гензель и Гретель по сюжете которой дети чтобы не заблудится в лесу бросали хлебные крошки… Но это так, лирическое отступление.) Вернёмся всё же к нашему плагину.

Скачиваем и устанавливаем плагин Breadcrumb NavXT.

Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "Breadcrumb NavXT "

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

Переходим по вкладке "Параметры"…

… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка"Основные" , все остальные вкладки настроек: "Записи и страницы", "Таксономии", "Другое" , можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:

Сохраняем изменения настроек, и на этом здесь все.

Теперь приступаем к самому интересному.

Необходимо отредактировать шаблон вашей темы.

К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.

Переходим в консоль и выбираем «Внешний вид»→«Редактор»:

В результате переходим в раздел редактирования тем. В этом разделе для редактирования необходимо выбрать именно ту тему которую вы сейчас используете. Как правило многие администраторы сайтов устанавливают несколько шаблонов сайтов но используется всего один. Поэтому редактировать следует тот который используется.

Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)

Выглядит это так:

Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: single.php, index.php и page.php, category.php Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)

Затем берём код:

И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (header ):

Естественно сохраняем каждый изменённый файл. После чего плагин Breadcrumb NavXT начнёт работать.

Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.

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

В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.

Делается это так. Берём этот код:

.breadcrumb {

font:bolder 12px "Trebuchet MS", Verdana, Arial;

padding-bottom: 10px;

}

.breadcrumb a{

color: #1B7499;

} .breadcrumb a:hover {

color: #EF0E0E;

}

Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке "Таблица стилей" вашей темы

… и вставляем код в самом низу редактора

… сохраняемся, нажав "Обновить файл" Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.

Ну вот, теперь пожалуй всё.

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

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

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

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

На своем блоге я уже описывал установку хлебных крошек с помощью плагина .

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

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

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

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

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

Установка хлебных крошек на сайт

Два варианта кода потребуется вставить в следующие файлы темы: «Функции темы (functions.php)», «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

Первый код нужно будет вставить в файл «Функции темы (functions.php)», установленной на вашем блоге темы WordPress.

// хлебные крошки function dimox_breadcrumbs() { $showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $delimiter = "»"; // разделить между "крошками" $home = "Главная"; // текст ссылка "Главная" $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать $before = ""; // тег перед текущей "крошкой" $after = " "; // тег после текущей "крошки" global $post; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) { if ($showOnHome == 1) echo "

" . $home . "
"; } else { echo "
" . $home . " " . $delimiter . " "; if (is_category()) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, " " . $delimiter . " ")); echo $before . single_cat_title("", false). $after; } elseif (is_day()) { echo "" . get_the_time("Y") . " " . $delimiter . " "; echo "" . get_the_time("F") . " " . $delimiter . " "; echo $before . get_the_time("d") . $after; } elseif (is_month()) { echo "" . get_the_time("Y") . " " . $delimiter . " "; echo $before . get_the_time("F") . $after; } elseif (is_year()) { echo $before . get_the_time("Y") . $after; } elseif (is_single() && !is_attachment()) { if (get_post_type() != "post") { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo "" . $post_type->labels->singular_name . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat; echo get_category_parents($cat, TRUE, " " . $delimiter . " "); if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif (!is_single() && !is_page() && get_post_type() != "post" && !is_404()) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif (is_attachment()) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat; echo get_category_parents($cat, TRUE, " " . $delimiter . " "); echo "" . $parent->post_title . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_page() && !$post->post_parent) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_page() && $post->post_parent) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs = "ID) . "">" . get_the_title($page->ID) . ""; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . " " . $delimiter . " "; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif (is_search()) { echo $before . "Результаты поиска по запросу "" . get_search_query() . """ . $after; } elseif (is_tag()) { echo $before . "Записи с тегом "" . single_tag_title("", false) . """ . $after; } elseif (is_author()) { global $author; $userdata = get_userdata($author); echo $before . "Статьи автора " . $userdata->display_name . $after; } elseif (is_404()) { echo $before . "Error 404" . $after; } if (get_query_var("paged")) { if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo " ("; echo __("Page") . " " . get_query_var("paged"); if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ")"; } echo "
"; } } // end dimox_breadcrumbs()

Для вставки этого кода в файл установленной на вашем сайте темы, нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор => «Шаблоны», и там нажать на пункт «Функции темы (functions.php)».

В окне «Редактировать темы», в файл «Функции темы ((functions.php)» потребуется вставить первый код в самом верху файла, после

Название записи домашней страницы - «Главная», можно изменить по вашему желанию на название вашего сайта. Для этого в соответствующей строке кода нужно заменить слово «Главная» на название вашего сайта.

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

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

Следующий код нужно будет вставить в несколько файлов установленной у вас темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

В файл «Одна запись (single.php)», отвечающий за страницам со статьями, код вставляется в место, показанное на изображении.

После вставки этого кода нужно нажать на кнопку «Обновить файл».

В файл «Архивы (arhvie.php)», вставляете этот код, в место, которое выделено в рамке на изображении.

Потом нажимаете на кнопку «Обновить файл».

В файл «Результаты поиска (search.php)», отвечающий за поиск по сайту, вставляете код в место, указанное на изображении.

После того, как вы вставили код, нажимаете на кнопку «Обновить файл».

В файл «Шаблон страницы (page.php)», отвечающий за статические страницы, вставляете код, как это показано на изображении.

После установки кода нажимаете на кнопку «Обновить файл».

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

Можно еще добавить такой код в файл «Таблица стилей (style.ccs)»:

/* Хлебные крошки */ #crumbs { padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit- border-radius:0 0 8px 8px;}

Этот код вставляется в самом конце файла «Таблица стилей (style.ccs)» для изменения внешнего вида установленной навигации хлебные крошки. Код для вставки в файл «Таблица стилей (style.php)» может иметь и другие характеристики (размеры, отступы и т. д.). Вставлять такой или подобный код на свой блог совсем не обязательно.

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

Выводы статьи

Теперь на вашем блоге установлены Хлебные крошки без использования плагина. Создателем этой функции является известный блогер Dimox (Дмитрий).

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

Во-первых, он облегчает навигацию, а во-вторых, решает очень важную проблему — создание правильной внутренней перелинковки. Чтобы не затягивать интригу сразу скажу, что речь пойдет о плагине Breadcrumb NavXT. Но обо все по порядку.

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

Зачем нужны хлебные крошки в WordPress

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

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

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

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

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

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

Сегодня я хочу подробно рассмотреть первый вариант, а вот про похожие материалы для Вордпресс в .

Для реализации хлебных крошек мы будем использовать плагин Breadcrumb NavXT. В принципе, вы можете использовать для этих целей и другие плагины WordPress, но мне больше приглянулись именно эти. Можно даже .

Установка плагина Breadcrumb NavXT в Вордпресс

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

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

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

Ну что, вспомнили что такое хлебные крошки? Думаю, что вспомнили, а если нет, то посмотрите в самом верху этого окна под шапкой этого блога.

Для начала вам нужно будет скачать Breadcrumb NavXT отсюда . Установка плагина на WordPress стандартная. Подключитесь к своему блогу по протоколу FTP (работа с клиентом FileZilla подробно описана ) и откройте на сервере папку:

/wp-content/plugins

Распакуйте архив с Breadcrumb NavXT и скопируйте получившуюся в результате папку на сервер хостинга в директорию (/wp-content/plugins). Теперь нужно будет зайти в админку Вордпресса, выбрать из левого меню пункт «Плагины», а в открывшемся окне перейти на вкладку «Неактивно». Найдите строчку с нужным и щелкните по расположенной чуть ниже надписи «Активировать».

Вызов Breadcrumb NavXT и настройка внешнего вида крошек

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

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

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

Итак, наша задача состоит в том, чтобы определить те файлы из папки с используемой вами темой, в которые мы должны будем вставить код вызова крошек. А затем нужно будет определиться, в какое именно место кода будем вставлять это:

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

Wp-content/themes/название темы WordPress

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

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

Из этого макета мы можем сделать вывод, что код вызова Breadcrumb NavXT нам нужно будет вставлять в те шаблоны, которые отвечают за вывод контента в центральной части блога: INDEX, SINGLE, ARCHIVE, PAGE или SEARCH.

Правда, я не стал выводить крошки в INDEX, отвечающий за формирование главной страницы WordPress, ибо там дополнительная навигация будет излишней.

Я вставил его в: SINGLE (отвечает за формирование страниц со статьями), ARCHIVE (формирует страницы рубрик, временных архивов, архивов тегов), PAGE (формирует в статические страницы, например, «О блоге»).

Код вызова Breadcrumb NavXT в эти шаблоны я вставлял в одно и тоже место — в самом начале, сразу после первой строки:

чтобы получилось так:

В файл таблицы каскадных стилей STYLE.CSS из папки с используемой темой я добавил несколько CSS свойств для класса BREADCRUMB:

Breadcrumb { font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; } .breadcrumb a{ color: #1B7499; } .breadcrumb a:hover { color: #EF0E0E; }

Эти свойства задают внешний вид для хлебных крошек в WordPress: , а . Так же определяют цвет ссылок с хлебных крошек (.breadcrumb a) и цвет ссылок при наведении на них курсора мыши (.breadcrumb a:hover). Вообще советую ознакомиться странице.

Возможности и настройки плагина Breadcrumb

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

Для этого заходите в админку WordPress и выбираете из левого меню в области «Настройки» пункт «Breadcrumb NavXT». В открывшемся окне увидите несколько вкладок:

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

Вообще существует (мнемоник), которые, например, нельзя вставить напрямую. Вот некоторые из них:

Мнемокод Символ " " & & < < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € €

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

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

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

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

Учтите, что этот текст будет помещен в атрибут TITLE тега A и, возможно, будет учтен поисковыми системами как альтернативный анкор. Это я к тому, что в нем следует употребить ключевые слова, относящиеся к главной странице вашего блога.

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

На следующей вкладке «Записи / Страницы» можете настроить отображение ссылок на страницы со статьями и статические страницы вашего блога:

Для статей я задал предшествующую надпись «Текущая статья» и заключил текст в кавычки с помощью мнемокода (список мнемокодов см. выше):

Переходим на следующую вкладку «Рубрики». В принципе, здесь повторяются все те же настройки, что и на предыдущих. Я не стал задавать обрамление (префикс и суффикс) для ссылок на рубрики, но задал обрамление для страниц архивов:

В результате на вебстраницах архива хлебные крошки выглядят так:



Эта статья также доступна на следующих языках: Тайский

  • Next

    Огромное Вам СПАСИБО за очень полезную информацию в статье. Очень понятно все изложено. Чувствуется, что проделана большая работа по анализу работы магазина eBay

    • Спасибо вам и другим постоянным читателям моего блога. Без вас у меня не было бы достаточной мотивации, чтобы посвящать много времени ведению этого сайта. У меня мозги так устроены: люблю копнуть вглубь, систематизировать разрозненные данные, пробовать то, что раньше до меня никто не делал, либо не смотрел под таким углом зрения. Жаль, что только нашим соотечественникам из-за кризиса в России отнюдь не до шоппинга на eBay. Покупают на Алиэкспрессе из Китая, так как там в разы дешевле товары (часто в ущерб качеству). Но онлайн-аукционы eBay, Amazon, ETSY легко дадут китайцам фору по ассортименту брендовых вещей, винтажных вещей, ручной работы и разных этнических товаров.

      • Next

        В ваших статьях ценно именно ваше личное отношение и анализ темы. Вы этот блог не бросайте, я сюда часто заглядываю. Нас таких много должно быть. Мне на эл. почту пришло недавно предложение о том, что научат торговать на Амазоне и eBay. И я вспомнила про ваши подробные статьи об этих торг. площ. Перечитала все заново и сделала вывод, что курсы- это лохотрон. Сама на eBay еще ничего не покупала. Я не из России , а из Казахстана (г. Алматы). Но нам тоже лишних трат пока не надо. Желаю вам удачи и берегите себя в азиатских краях.

  • Еще приятно, что попытки eBay по руссификации интерфейса для пользователей из России и стран СНГ, начали приносить плоды. Ведь подавляющая часть граждан стран бывшего СССР не сильна познаниями иностранных языков. Английский язык знают не более 5% населения. Среди молодежи — побольше. Поэтому хотя бы интерфейс на русском языке — это большая помощь для онлайн-шоппинга на этой торговой площадке. Ебей не пошел по пути китайского собрата Алиэкспресс, где совершается машинный (очень корявый и непонятный, местами вызывающий смех) перевод описания товаров. Надеюсь, что на более продвинутом этапе развития искусственного интеллекта станет реальностью качественный машинный перевод с любого языка на любой за считанные доли секунды. Пока имеем вот что (профиль одного из продавцов на ебей с русским интерфейсом, но англоязычным описанием):
    https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png