Меню

breadcrumb navxt wordpress настройка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

%htitle%

Читайте также:  kubuntu настройка разрешения экрана

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

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

источник

Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  настройка окарины 4 дырки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  настройка relay почтового сервера

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

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

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

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

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

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

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

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

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

Галочка в поле «Домашняя ссылка» в настройках Breadcrumb NavXT позволит отображать в крошках ссылку на главную. Там же вы сможете задать анкор для нее. Я выбрал вариант «KtoNaNovenkogo.ru»:

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

В поле «Текст домашней ссылки» можете ввести текст, который увидят посетители вашего WP блога при подведении мыши к ссылке на главную в хлебных крошках:

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

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

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

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

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

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

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

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

источник

Добавить комментарий

Adblock
detector