Breadcrumb navxt как настроить

Breadcrumb NavXT русская версия

Breadcrumb NavXT это самый продвинутый и популярный плагин «хлебных крошек» для блога на WordPress. У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель «хлебных крошек» в разметке RDFa, которая поможет поисковикам найти и использовать эту панель при формировании сниппета.

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

Также «хлебные крошки» помогают в плане SEO – поисковики зачастую определяют навигацию в виде «хлебных крошек» и могут вывести ее в поисковом сниппете. Например, практически все движки форумов выводят «хлебные крошки» и поисковики используют их при оформлении сниппета:

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

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку breadcrumb-navxt в /wp-content/plugins/.

3. Заходим в админку блога на вкладку «Плагины» и активируем плагин.

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

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

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

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

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

Вставьте в нужный файл шаблона вот этот код:

После этого будет выведена довольно кривая панель «хлебных крошек«:

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

1. Скачайте картинку (правая кнопка мышки и «Сохранить как«).
2. Закачайте ее себе на сайт куда-нибудь в папку images.
3. Измените в настройках плагина опцию «Шаблон ссылки на главную» на:

4. Опцию «Шаблон ссылки на главную (некликабельная)» поставьте:

%htitle%

Где «http://www.site.ru/home.png» будет указывать на вашу картинку.

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

Источник

Плагин Breadcrumb NavXT выводит хлебные крошки в WordPress

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

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

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

Плагин доступен к скачиванию по адресу — http://wordpress.org/extend/plugins/breadcrumb-navxt /, устанавливается на блог, но чтобы хлебные крошки заработали на блоге, необходимо внести изменения в код шаблона.

Определитесь, где должны отображаться хлебные крошки на блоге. В зависимости от принятого решения откройте на редактирование (рекомендую использовать программу NotePad++) такие файлы:

• single.php — чтобы они выводились на странице одиночных заметок
• archive.php — если желаете выводить хлебные крошки на страницах архивов
• search.php — и крошки будут выводиться на страницах с результатами поиска
• page.php — навигационная цепочка будет размещена на страницах блога
• category.php — если желаете выводить хлебные крошки на страницах рубрик и меток

В эти файлы или какой-то один файл вставьте этот код:

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

Настройка плагина Breadcrumb NavXT

Панель настройки плагина Breadcrumb NavXT находится «Параметры» пункт «Breadcrumb NavXT» Когда Вы зайдете в панель впервые, он попросит обновить настройки — перейдите по ссылке. Она состоит из 4-х вкладок: Основные, Записи и страницы, Таксономии, Другие. Каждая вкладка состоит из несколько разделов.

• Разделитель — значок, который будет выводится между ссылками в хлебных крошках(1)
• Длина заголовка — если Вы даете очень длинные названия постам, навигационная цепочка может образовать 2 строки, а могут ссылки перекрыть боковую панель(иногда такое можете наблюдать на блогах под управлением WordPress. Поэтому ставьте флажок и ограничьте количество выводимых символов в крошках(2).

• Показывать текущую позицию в виде ссылки — если да, то когда, Вы будете читать заметку, но в навигационной цепочке ее название будет ссылкой, если находитесь на странице рубрики — то ссылкой на страницу рубрики(тоесть саму на себя. Я не ставлю флажок.(3)
• Постраничная навигация — опция полезна(4), если на блоге хлебные крошки отображаются на страницах рубрик или меток. Тогда на втором развороте и последующем в навигационной цепи ссылок будет выводиться номер страницы рубрики. Он определяется плагином PageNavi или другим дополнением, которое выводит постраничную навигацию на блоге. Пример виден на скриншоте ниже(6). Он отображает хлебные крошки, которые выводятся на втором развороте рубрики Автоновости.

Интересно выполнена настройка вывода ссылок или текста в цепочке с ссылками.

• В поле Шаблон — определяется как именно будет форматироваться ссылка или надпись на второй разворот страницы рубрики: если в поле ввода стереть слово страница(5), то надпись на блоге изменит вид — со «страница 2» на просто «2».(6) Вместо слова «Страница» можно написать слово «часть», «разворот» и так далее.

Ссылка на главную — блок отвечает за форматирование ссылки на главную страницу блога.

• Ссылка на главную — да, будет выводиться ссылка на главную страницу блога, нет — выводится как текст.
• Шаблон ссылки на главную — Если ссылка на главную да, — прописываем каким будет анкор ссылки(7). Редактируется только слово, которое размещено между тегами
• Шаблон ссылки на главную (некликабельная) — если флажок снят, то приписываем, каким будет текст (8), который будет размещен в начале хлебных крошек.

Ссылка на блог в блоке размещены такие опции Ссылка на блог, Шаблон ссылки на блог, Шаблон ссылки на блог (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.

Ссылка на главный сайт в блоке размещены такие опции Ссылка на главный сайт , Шаблон ссылки на главный сайт, Шаблон ссылки на главный сайт (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.

Вкладка «Записи и страницы»

Записи — настроить внешний вид хлебных крошек, которые будут отображены на страницах и постах.

• Шаблон ссылки на запись — изменить код ссылки, которая будет выводиться на страницах записей.
• Шаблон ссылки на запись (некликабельная) — определить, каким образом будет оформляться название поста, если он, согласно с настройками(3), выводиться текстом.
• Вывод иерархии — да, если посты привязываются к нескольким категориям или меткам одновременно.
• Иерархия записи — выбрать лучший вариант выборки для построения хлебных крошек плагином Breadcrumb NavXT, варианты: Рубрики, Даты, Метки, Под-страницы. Последний вариант мне не очень понятен, я не мог добиться построения крошек по этому принципу. Не рекомендую использовать выборку «Даты», так как создается хлебные крошки, где между главной страницей и постом создаются отдельные ссылки на страницу архивов по годам, потом месяцам, потом дням.

Страницы — возможно изменить оформление хлебных крошек, которые будут выводиться на страницах.

Вкладка «Таксономии» состоит из 3-х разделов. В них можно настроить внешний вид хлебных крошек, которые будут выводиться на страницах рубрик, меток, архивов. Не забывайте, перед внесением изменений в свойства этой вкладки, Вы должны вставить код(он размещен выше по тексту) в файлы archive.php, category.php, search.php, создать метки и/или рубрики

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

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

Источник

Плагин Breadcrumb NavXT для внедрения хлебных крошек с целью улучшения навигации и усиления перелинковки сайта WordPress

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

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

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

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

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

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

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

Всё это вы сможете сразу проанализировать и принять решение о целесообразности использования любого выбранного вами плагина. Это тоже надо иметь ввиду.

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

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

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

Итак, вывод страничек записей (примером может служить данная статья) осуществляется обычно посредством файла single.php, а статических страниц — page.php (правда, в современных темах чаще всего используются сразу несколько шаблонов для отображения содержимого, например, content.php, content-page.php и т.д., так что нужно разбираться в каждом конкретном случае). В каждый из этих шаблонов следует вставить приведенный выше фрагмент. Для этого вам следует отыскать строчку с функцией вызова хидера (шапки) сайта:

И вставить код сразу под ней. Получится примерно так:

Конечно, если вы желаете разместить крошки еще и в рубриках, то этот же код вам нужно будет поместить в шаблоне category.php (либо в archive.php в зависимости от темы).

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

Для коррекции внешнего вида хлебных крошек можно добавить некоторые свойства каскадных таблиц стилей CSS для класса «breadcrumb» в файл style.css темы, например, такие:

Здесь цвет ссылки (.breadcrumb a) и ее окраска при наведении курсора (.breadcrumb a:hover) определяется параметром свойства color. После применения этих правил навигационная цепочка будет выглядеть вот таким образом:

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

Как уменьшить длину навигационной цепочки средствами CSS

Чтобы укоротить хлебные крошки, можно применить весьма изысканное решение с привлечением стилей, которые нужно прописать в том же файле style.css вашей темы WordPress:

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

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

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

Но можно пойти еще дальше. Например, чтобы отобразить полностью текст ссылки в цепочке навигации при наведении на него курсора, снимем с него ограничение длины с помощью свойства max-width: none (это правило тоже нужно внедрить в style.css):

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

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

Как настроить Breadcrumb NavXT

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

Сначала рассмотрим основной блок:

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

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

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

Paged Template — здесь представлен шаблон для страниц с пагинацией (нумерацией), в который вы можете внести изменения аналогично тем, которые я приведу чуть ниже.

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

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

Потому настало время выполнить данное мною выше обещание и показать, как редактировать представленные в настройках Breadcrumb NavXT шаблоны на примере кода ссылки на главную (скриншот выше). Вместо тега анкора ссылки «%htitle%» я прописал просто доменное имя «Goldbusinessnet.com», а значение атрибута title «Go to %title%» (который генерирует появление всплывающей подсказки) я заменил на «Переход на главную страницу сайта Goldbusinessnet.com — создание сайтов и заработок в сети»:

После этого шага не только сократился текст ссылки на главную, но и содержание атрибута title, которое появляется на экране при подводе курсора:

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

Во вкладке «Записи и страницы» по аналогии с описанным уже способом можно произвести редактирование шаблонов для статических вебстраниц и статей:

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

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

Post Hierarchy Referer Influence — ежели активировать данную опцию, заполнив чекбокс, то ссылающаяся страница будет влиять на таксономию, выбранную для иерархии.

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

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

Например, вместо «%htitle%» вставьте что-то типа «Вы находитесь на странице %htitle%» или «страница %htitle%». В общем, как-то так.

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

При настройке, отображенной на картинке выше, хлебные крошки WordPress примут такой вид (в случае подвода курсора к названию категории):

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

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

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

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

Источник