Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. С тем, чтобы оптимизировать свой сайт по максимуму и добиться успеха в его продвижении, важно учесть самые разнообразные нюансы, например, использовать возможность реализации хлебных крошек на своем проекте.
Хлебные крошки представляют из себя навигационную цепочку, которая, располагаясь на сайте, может принести пользу в двух аспектах: помочь посетителям определиться с местоположением на веб-ресурсе, а также дополнить перелинковку его страниц с точки зрения SEO-оптимизации.
Кроме этого, правильное внедрение дополнительной микроразметки способно обеспечить вывод хлебных крошек в сниппете веб-страницы, находящейся в результатах выдачи поисковых систем (Yandex и Google), что является дополнительным ориентиром для посетителей.
Ниже уже разберем поподробнее глубинную сущность такой цепочки навигации, а также один из способов ее установки без привлечения дополнительных средств в виде расширений.
Хлебные крошки на сайте — что это и зачем они нужны?
Сейчас немного отвлечемся. Вы читали в детстве сказки братьев Гримм? По сюжету одной из них брат и сестра Гензель и Грета по настоянию злой мачехи были отправлены в лес с целью их там оставить по причине голодного времени и невозможностью их прокормить (неправда ли, жестокая история реальной жизни, актуальная кое-где и в наши дни?).
Однако же, брат успел собрать камешки и разбросать их по пути следования, таким образом они сумели найти дорогу домой. Но вот когда история повторилась, и брат с сестрой снова были отправлены в лес, Гензель не сумел собрать камешки, и ему пришлось использовать хлебные крошки, чтобы отметить путь. К великому сожалению, лесные птицы всех их склевали, что, сами понимаете, привело к печальному итогу. Дети не смогли найти обратную дорогу.
Закончилось все, естественно, счастливым исходом, как и полагается в сказках, но мне одно непонятно, почему же тогда навигация сайта или блога, которая призвана облегчить читателям путешествие по нему, вдруг ассоциируется с хлебными крошками? Ведь дети не смогли отыскать по ним дорогу домой. Тогда уж лучше подошли бы камешки.
Ну ладно, это все лирика, хотя отвлечься иногда не мешает. Теперь перехожу к собственно теме сегодняшней статьи. Я не случайно начал с этого, ведь, действительно, отличная навигация по сайту, являющаяся частью usability способствует тому, что посетители задерживаются на нем.
И если переход со страницы на страницу, с рубрики на рубрику, со статьи на статью прост и удобен, вы получаете улучшение различных показателей поведенческих факторов (в этом материале все о ПФ). А это огромнейший плюс в дело продвижения. Такие вот дела.
Итак, мы выяснили, что одной из задач, которую с успехом выполняют хлебные крошки, является оптимизация навигации. Но есть и другая миссия (связанная с перелинковкой), о которой я уже упомянул в начале статьи.
Как известно, продвижение по низкочастотным запросам обладает целым рядом плюсов. Для обычных информационных ресурсов это возможность получить целевую аудиторию, львиная часть которой является потенциальными подписчиками, что приносит несомненную пользу.
Полезна такая стратегия и для коммерческих ресурсов (скажем, интернет-магазинов), которые благодаря ей приобретают не просто новых посетителей, но клиентов, готовых немедленно платить (ведь НЧ запросы подразумевают чаще всего конкретику).
Для такого продвижения в качестве отправной точки лучше использовать соответствующую схему перелинковки в виде кольца, но это лишь в теории. На практике при применении такой схемы невозможно учесть все нюансы, поэтому ее необходимо дополнить.
В идеале нужно соединить ссылками как можно больше вебстраниц с записями так, чтобы они получали максимально возможный вес, перетекающий от внешних входящих ссылок, чтобы каждая продвигаемая статья (например, на блоге WordPress) имела шанс попасть в ТОП.
А для этого необходимо привлечь все возможные методы, которые включают, например, вывод похожих записей в конце статей (для Вордпресса, скажем, в качестве средства реализации можно применить Related Posts либо то же самое осуществить без плагина). Ну и хлебные крошки вполне могут поучаствовать в этой «глобальной» перелинковке.
Ну и еще одно преимущество хлебных крошек связано с возможностью их отображения в результатах поиска, ежели вы грамотно примените микроразметку (например, Schema.org). Сравните два сниппета в поисковой выдаче Google с цепочкой навигации и без:
Согласитесь, разница существенная. Кстати, в предложенных ниже хлебных крошках уже будет присутствовать микроразметка, так что считайте, что красивые сниппеты ваших страниц в выдаче Google с навигацией у вас в кармане.
А вот для Яндекса ситуация сложнее. Если для Гугла достаточно просто внедрить разметку, то для «зеркала рунета» это обязательное, но недостаточное условие, и он формирует сниппеты с навигацией по своему разумению, в основном для крупных проектов.
Если вы до сих пор не поняли, о чем я веду речь, взгляните на верхнюю часть этой странички, там присутствуют навигационная цепочка, благодаря которой каждый посетитель имеет полное представление о своем местонахождении (главная — раздел — статья). Это и есть хлебные крошки.
Как реализовать хлебные крошки на сайте WP без плагинов
Конечно, для начинающих вебмастеров в реализации того или иного функционала могут помочь плагины. Особенно это касается вебсайтов, работающих на движке Вордпресс, который обладает огромным числом расширений, способных решить практически любую задачу.
Не исключение и наш с вами случай, который предусматривает установку навигационной цепочки посредством Breadcrumbs NavXT. Этот плагин всем хорош, но на мой субъективный взгляд, ему немного не хватает функционала в части визуального отображения хлебных крошек.
Поэтому для особенно привередливых предлагаю использовать другой способ, который основан на внедрении специального кода. Поскольку WordPress является наиболее популярной CMS, то именно на примере этой системы управления контентом мы и рассмотрим данный метод. Сразу взгляните, какой вид приобретут крошки после установки и сразу решите, годятся ли они для вас:
Прежде чем продолжить, хотел бы посоветовать новичкам ознакомиться с устройством шаблонов и файлов темы WP, а также средствами для их редактирования (это поможет и в будущем), так как при внедрении крошек потребуется вставлять фрагменты кода в некоторые из них.
Обратите внимание, что основу (фон) можно оформить в виде картинок, а также средствами CSS. Оба варианта и рассмотрим, а уж потом вы выберете наиболее подходящий для себя.
Для того, чтобы реализовать цепочку навигации этим способом, для начала скачайте архив со спрайтами (что такое sprite) и разархивируйте его. В наборе будут несколько вариантов разного цвета. Выберите тот, который больше подходит к дизайну вашего сайта:
Как видите, выбранный спрайт представлен тремя основами с различными цветовыми оттенками. Каждое из изображений будет подставляться с помощью стилей CSS в том месте цепочки, где присутствует ссылка. При этом создается динамический эффект (в пассивном состоянии один оттенок, при подводе курсора — другой, при нажатии на ссылку — третий).
Кстати, если вы умеете работать в том или ином редакторе изображений (например, в Фотошопе или его онлайн разновидности Pixlr), то сможете создать свой вариант с нужной вам цветовой гаммой, ежели в наборе не найдется подходящей.
После того, как вы выбрали нужный спрайт или создали свой, необходимо подключиться к веб-серверу при помощи ФТП-менеджера (советую использовать для этих целей Файлзиллу), где находятся файлы web-сайта, и загрузить его в соответствующий каталог (у меня, например, это папка «images»). При этом получится ссылка на картинку (спрайт), которую надо будет дальше проставить в качестве параметра одного из свойств CSS (подробнее речь об этом пойдет ниже). Причем, можно использовать как абсолютную, так и относительную ссылку:
В нашем конкретном случае относительную ссылку выгоднее использовать, поскольку она менее короткая и не так загромождает CSS-код. Но будьте внимательны. Ваш абсолютный (а на его основе и относительный) линк может быть сформирован немного по-другому (во-первых, другое название темы, а во-вторых, иное расположение и название каталога, куда вы загрузите спрайт).
Далее придется поработать с файлами темы Вордпресс (напомню, для новичков есть ссылка на соответствующей материал чуть выше по тексту). Пойдем по порядку.
Для начала необходимо воспользоваться волшебным файлом functions.php (преимущество его использования заключается в том, что не придется вносить правки каждый раз после обновления движка, что случается весьма часто) и вставить туда (лучше в конец содержимого, чтобы не возникало каких-то неполадок) вот такую функцию, которая уже неким образом оптимизирована:
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <ul class="crumbs"><li class="first"><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="';
echo get_option('home');
echo '" style="z-index:9;"><span class="crumb"></span><span itemprop="name">';
echo "Goldbusinessnet.com</span></a></p></li>";
}
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="'.get_category_link($cat->term_id).'" style="z-index:8;"><span itemprop="name">
'.$cat->name.'</span></a></p>';
echo '<li>'.$output.'</li>';
}
if(is_single())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span class="b-crumbs" itemprop="item" style="z-index:7;"><span itemprop="name">';the_title();echo '</span></span></p></li>';
}
if(is_page())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="'.get_permalink().'" style="z-index:8;"><span itemprop="name">';the_title();echo '</span></a></p></li>';
}
echo "</ul></div><div class=\"clear\"></div>";
}
Обратите внимание на то, что вам сразу необходимо в последней строке первого фрагмента кода заменить доменное имя моего блога («Goldbusinessnet.com») на заголовок вашего собственного ресурса или его домен, иначе навигационная цепочка будет отображаться некорректно:
Дальше ищите среди шаблонов вашей темы те, которые отвечают за вывод страничек, на которых будут отображаться хлебные крошки. На этом блоге я применяю навигационную цепочку только на страницах записей (постов) и на статических вебстраницах (наверное, это будет справедливо для большинства подобных проектов). Если вы решили последовать моему примеру, то ищите среди шаблонов single.php и page.php, в которые вставляете код вызова функции breadcrumb:
<?php the_breadcrumb(); ?>
Правда, может возникнуть вопрос, куда ее втыкать, особенно это актуально для новичков. Я тестировал на многих темах, в большинстве случаев удачной оказывалось размещение кода сразу под функцией вывода шапки (хидера) «get_header()»:
<?php get_header(); ?>
<?php the_breadcrumb(); ?>
<div id="primary" class="site-content">
<main id="content" role="main"> При желании внедрить крошки в рубрики (категории) необходимо этот же код вызова таким же образом вставить в шаблон category.php или же в archive.php в зависимости от вашей темы.
Ну и наконец, надо прописать соответствующие для цепочки навигации стили, которые следует поместить в файл style.css вашей темы Вордпресс. Вот набор этих свойств для примера:
#breadcrumb{display:block; float:none; margin:20px 0 40px 16px; font-weight:600}
#breadcrumb ul{font-family:Helvetica,sans-serif; list-style:none}
.crumbs{display:block}
.crumbs li.first{padding-left:8px}
.crumbs li a, .crumbs li a:link, .crumbs li a:visited, .b-crumbs{color:#616d7e; display:block; float:left; font-size:11px; margin-left:-23px; padding:10px 24px 12px 30px; position:relative; text-decoration:none}
.crumbs li a, .b-crumbs{background-image:url(images/breadcrumbs.png); background-position:100% 0%; background-repeat:no-repeat; position:relative}
.crumbs li a:hover{background-position:100% -50px; color:#333; cursor:pointer}
.crumbs li a:active{background-position:100% -99px; color:#333}
.crumb{border-left:1px solid #ad9e80; height:30px; left:0; position:absolute; top:0; width:3px} Трудно надеяться, что этот набор стилей будет красиво смотреться во всех без исключения темах (хотя некоторым, полагаю, подойдет даже без редактирования), поэтому требует пояснения.
Вы сразу должны вставить свою относительную ссылку на спрайт (ежели вы выбрали отличный от моего из загруженного архива), указанную в качестве параметра свойства background-image:
background-image:url(images/breadcrumbs.png)
Далее вы можете подобрать другие значения таких свойств CSS как display, float, position. Если же все выше сказанное вы воспринимаете с трудом, то вам следует посетить этот раздел блога.
Как уменьшить длину хлебных крошек
А теперь давайте посмотрим, как можно уменьшить длину навигационной цепочки. Скажем, ежели у вас слишком длинные названия страниц записей (а у меня, к примеру, это так), то логично их укоротить в хлебных крошках, чтобы цепочка не портила дизайн страницы.
Для этого нужно заменить в соответствующем фрагменте кода стандартную функцию вывода заголовка «the_title()» на «trim_title_words(3, ‘…’)»:
if(is_single())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span class="b-crumbs" itemprop="item" style="z-index:7;"><span itemprop="name">';trim_title_words(3, '...');echo '</span></span></p></li>';
} Здесь «3» означает количество первых слов заголовка, которые будут отображаться. Естественно, вы вольны поставить свое значение. Тогда весь код для цепочки навигации будет таким:
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <ul class="crumbs"><li class="first"><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="';
echo get_option('home');
echo '" style="z-index:9;"><span class="crumb"></span><span itemprop="name">';
echo "Goldbusinessnet.com</span></a></p></li>";
}
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="'.get_category_link($cat->term_id).'" style="z-index:8;"><span itemprop="name">
'.$cat->name.'</span></a></p>';
echo '<li>'.$output.'</li>';
}
if(is_single())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span class="b-crumbs" itemprop="item" style="z-index:7;"><span itemprop="name">';trim_title_words(3, '...');echo '</span></span></p></li>';
}
if(is_page())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="'.get_permalink().'" style="z-index:8;"><span itemprop="name">';the_title();echo '</span></a></p></li>';
}
echo "</ul></div><div class=\"clear\"></div>";
} На статических вебстраницах я их название не укорачиваю, поскольку они подходящие по длине. Но ежели вам это необходимо, вставьте ту же самую функцию «trim_title_words(3, ‘…’)» в кусок, отвечающий за вывод статических страниц:
if(is_page())
{
echo '<li><p itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="'.get_permalink().'" style="z-index:8;"><span itemprop="name">';trim_title_words(3, '...');echo '</span></a></p></li>';
} Однако, чтобы эта функция заработала, надо в тот же замечательный файл functions.php внедрить еще один специальный код:
function trim_title_words($count, $after) {
$title = get_the_title();
$words = split(' ', $title);
if (count($words) > $count) {
array_splice($words, $count);
$title = implode(' ', $words);
}
else $after = '';
echo $title . $after;
} Но здесь есть один существенный нюанс. Жизнь идет вперед, а с ней развиваются и технологии, включая языки программирования, PHP не исключение. Поэтому вполне возможно, что ваш сайт работает на сервере, где уже активирована версия выше PHP 7.0 (это можно проверить через панель хостинга либо обратившись в службу поддержки).
В этом случае строку:
$words = split(' ', $title); Следует заменить на:
$words = preg_split('/[: -]/', $title); Теперь хлебные крошки должны корректно отобразиться на страницах, куда вы внедрили код их вызова. Как я отмечал в публикации, этот элемент изначально снабжен микроразметкой, которая поможет отобразиться навигационной цепочке в сниппете вашей веб-страницы, находящейся в выдаче Гугла, а может, при выполнении некоторых условий, и в поиске Яндекса.
