Как сделать хлебные крошки WordPress? Плагин Yoast SEO наш лучший помощник

Wordpress-хлебные-крошки-плагин

Привет всем! С вами я, Калмыков Антон и Blog-Bridge.ru. Сегодня в этой статье я хотел бы рассказать вам, как можно улучшить юзабилити своего сайта при помощи плагина Yoast SEO, о котором я расскажу подробно в одной из следующих своих статей.

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

Статьи в тему:

Как оценить юзабилити сайта или забота о своем читателе превыше всего

Основы юзабилити сайта главной страницы или как не растерять читателей

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

Для начала, давайте я поясню, что такое «хлебные крошки» и для чего вообще они нужны.

Что такое «хлебные крошки»

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

замена-картинки

У нас на сайте она выглядит следующим образом:

хлебные-крошки-наш-сайт

Кроме того, наличие данной навигации помогает роботам более четко понимать структуру сайта и быстрее индексировать ваш блог. А это очень важно при продвижении проекта в сети.

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

Онлайн-эксперимент в блоггинге!

Следите за блогерским шоу, проходящем в реальном времени, на ваших глазах. Здесь и сейчас.

Подписаться

Настройка вывода хлебных крошек плагином Yoast SEO

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

Давайте, будем считать, что вы внимательно прочитали и установили Yoast SEO. Теперь перейдите в левой панеле админки WordPress во вкладку SEO и выберите подменю «Дополнительно».

Настройки-плагина-SEO

В открывшемся окне поставьте галочку «Включить навигационную цепочку (breadcrumbs)».

Включение-навигации

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

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

Переход-по-ссылке

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

Код-для-вставки-в-шаблон

Универсального места для вставки данного кода я вам посоветовать не могу, так как это зависит от темы, которую вы используете. Возможно вам понадобиться прописать его или в файл single.php, или в  page.php, а в некоторых случаях и в header.php.

В нашем случае код мы вставили практически в самом начале файла single.php, который расположен по адресу  www/wp-content/themes/ваша тема/ .

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

код-вставки-в-наш-шаблон

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

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

Стиль-крошек

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

образец-переспамленности

 

Чтобы избежать этого, требуется дополнительно вставить небольшой код в файл functions.php.

function adjust_single_breadcrumb( $link_output) { if(strpos( $link_output, 'breadcrumb_last' ) !== false ) { $link_output = ''; } return $link_output; } add_filter('wpseo_breadcrumb_single_link', 'adjust_single_breadcrumb' );

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

Если возникнут вопросы — пишите в комментариях!

Всем пока-пока!

С вами был Калмыков Антон

Поделись с друзьями:

Комментариев: 19

  1. Валентин

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

    Ответить
    1. Екатерина Калмыкова

      Привет, Валентин!

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

      А по поводу создания хлебных крошек через плагин можешь написать поподробнее, какие могут быть проблемы? Вроде бы пока пользуемся — никаких отрицательных моментов не было выявлено.

      Ответить
  2. Александр

    К сожалению, в последней версии Yoast SEO уже нельзя сделать хлебные крошки бесплатно. Это стало возможно только в премиум версии. Вот сейчас ищу более менее приемлемый вариант php кода.

    Ответить
    1. Antey

      Все можно. Я из 2018. Только в другом разделе эта функция есть. Надо выбрать раздел «Отображение в поисковой выдаче» — там они есть.

      Автору статьи — ваш код в функциях не работает в теме Twentifourteen. То есть самый последний код, где вы пишите, чтоб категории не отображались. Все равно отображаются.

      Ответить
      1. Екатерина Калмыкова

        Возможно, особенности конкретной темы. А обойтись без использования темы 2014 никак нельзя?

        Ответить
        1. Antey

          Я эту тему переделал под себя. Менять не буду, на платную тему денег нет.

          То есть у меня еще отображается заголовок рубрики. Его бы убрать тоже. Можно наверно удалить из php совсем заголовок рубрик...

          Ответить
  3. Цифровой

    Ну что же вы код картинками вставляете? Перенабирать сложнее, чем скопировать ;)

    Ответить
    1. Екатерина Калмыкова

      Действительно, сложнее.

      Ответить
  4. Antey

    На многих сайтах нет переспамленности от «Главная / Создание блога / Плагины/название страницы» я много таких сайтов нахожу в поиске. Поэтому, как мне кажется, можно не добавлять эту функцию

    Ответить
    1. Екатерина Калмыкова

      Как хотите, у каждого свое видение удобного сайта.

      Ответить
  5. Antey

    Вы бы обновили статью, ведь интерфейс плагина поменялся...

    Ответить
    1. Екатерина Калмыкова

      Да, надо бы, но руки еще не скоро дойдут...

      Ответить
  6. Михаил

    Здравствуйте!

    У вас на главной странице не отображается хлебная крошка «Главная», но если перейти на другие страницы, она присутствует в цепочке. Как этого добиться?

    Ответить
    1. Екатерина Калмыкова

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

      Ответить
  7. Алекс

    Привет! А как сделать чтоб в строке крошки прописана была промежуточная страница, то есть родительская по отношению к открытой? У меня только «Главная --> Конечная» несмотря на то что в меню есть иерархия. Речь идет о многостраничнике, не о блоге.

    Ответить
    1. Екатерина Калмыкова

      Имеете ввиду страницу категории?

      Ответить
      1. Алекс

        Да) Хочу так: " Главная / Категория / Название статьи "

        У меня сейчас: " Главная / Название статьи "

        Ответить
        1. Алекс

          В качестве категории — пункты меню, которым соответствует страница.

          Ответить
          1. Екатерина Калмыкова

            Покажите скриншоты настройки плагина и как вставлен код в single.php

            Ответить

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

=) 8) :( ;( ;) :P :-D =-O :-! *IN LOVE* %) *CRAZY* *LOL* ]:-> *MACHO* *EEK*