Сдейлай добро - напиши информацию о рос. войсках в телеграм @evorog_bot

GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Задонатити ₴
Темний режим
GRAVITSAPA.info - интересный блог

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

4759 просмотров Создание сайтов 9 коментарів » 11 Лип 2018

Раньше использовал “Хлебные крошки” от 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;}

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

Оставь свой коммент

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

  1. Александр

    То что доктор прописал..

  2. Николай Вьюнов

    Спасибо тебе, добрый человек!

  3. Дмитрий Николаевич

    Доброго дня.
    Пожалуйста, если Вас не затруднит, не могли бы Вы подсказать, как исправить (добавить в код) ошибку валидатора Гугла по параметру itemid?
    Его нет в Вашем коде.
    Заранее Вам благодарен!

    • Vitaliy

      Здравствуйте. В контейнере “if ( is_category() || is_single() ) {” Между itemprop="item" и href= вставьте itemid="'.get_category_link($cat->term_id).'"

      • Дмитрий

        К сожалению, не помогло: joxi.ru/eAO40o3t6WMMBr
        Гугл ругается: joxi.ru/YmEk1oQhB18NBA
        Могли бы помочь?
        Спасибо!

  4. Нико

    А если категория /подкатегория / подподкатегория?

    А таксономии?

    • Vitaliy

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

Наверх