Site icon GRAVITSAPA.INFO

Делаем Хлебные крошки (Breadcrumb) с микроразметкой для WordPress без плагинов

Раньше использовал “Хлебные крошки” от Yoast плагина… Но к сожалению, в таком варианте не было микроразметки, и не было возможности сделать по своему. Погуглив, нашел отличное решение реализации хлебных крошек для WordPress без плагина. Внедрил “структурированные данные” и получилось идеально! Ко всему незначительно уменьшается скорость загрузки страницы… Появляется возможность пихать всякий юникод)) всевозможные разделители и вообще можно переписать код по своему под свои задачи… Уже использую такой вариант у себя. Следуйте простой инструкции и у Вас будут такие же хлебные крошки, которые Google будет правильно индексировать и выводиться в сниппетах результатов выдачи привлекая больше трафика:

  1. В файле functions.php Вашего шаблона добавляем этот код (самое главное, не вставьте случайно этот код в уже работающую функцию):

    <?php
    //Хлебные крошечки
    function the_breadcrumb() {
    if ( !is_home() ) {
    echo '<div id="breadcrumb"> <ul class="crumbs" itemscope itemtype="http://schema.org/BreadcrumbList"><li class="first" itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
    itemprop="item" href="';
    echo get_option('home');
    echo '"><span itemprop="name">';
    echo ''. bloginfo('name') . '';
    echo '</span></a><meta itemprop="position" content="1" /></li><span class="delimiter">›</span>';
    }
    if ( is_category() || is_single() ) {
    $cats = get_the_category();
    $cat = $cats[0];
    $output .= '<a itemscope itemtype="http://schema.org/Thing"
    itemprop="item" href="'.get_category_link($cat->term_id).'"><span itemprop="name">
    '.$cat->name.'</a></span>';
    echo '<li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">'.$output.'<meta itemprop="position" content="2" /></li>';
    }
    if(is_single())
    {
    echo '<span class="delimiter">›</span><li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
    itemprop="item" href="'.get_permalink().'"><span itemprop="name">';the_title();echo '</span></a><meta itemprop="position" content="3" /></li>';
    }
    if(is_page())
    {
    echo '<span class="delimiter">›</span><li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing"
    itemprop="item" href="'.get_permalink().'"><span itemprop="name">';the_title();echo '</span></a><meta itemprop="position" content="3" /></li>';
    }
    echo "</ul></div>";
    }
    ?>
  2. Теперь в таких файлах как single.php, page.php, category.php нужно вывести в удобном месте хлебные крошки. Для этого вставьте код ниже. Обращаю внимание, что Ваша тема WordPress может быть сильно кастомизирована, и код придётся вставлять в других файлах. Обычно это нужно делать после кода <?php get_header(); ?>:
    <?php the_breadcrumb(); ?>
  3. И последний этап это css стили… Разумеется можете дополнить своими.
    #breadcrumb ul {padding:0;margin:0;}
    #breadcrumb ul span.delimiter {margin: 0 5px 0 5px;}
    #breadcrumb ul li {padding:0;margin:0;display: inline-block;}

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

Exit mobile version