Хлебные крошки на WordPress блоге с плагином и без — пошаговая инструкция для новичков! Хлебные крошки на WordPress без плагинов и с ними

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

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

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

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

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

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

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

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

Как устанавливать данный Yoast 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");

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

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

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

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

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

Хлебные крошки – удобный способ перелинковки блога

Один из простых способов одновременно упростить навигацию по сайту и его перелинковку, это Хлебные крошки (breadcrumbs). Свое название он получил в честь того способа, благодаря которому герои немецкой сказки «Гензель и Гретель» пытались найти дорогу из леса.

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

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

Главная страница > Рубрика > Подрубрика > Текущая страница

Причем все «звенья», кроме последнего — это внутренние ссылки.

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

Какую пользу несут хлебные крошки для сайта и блога

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

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

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

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

Данную функцию можно добавлять на сайты и блоги разными способами. Рассмотрим два самых простых варианта для WordPress – установку с помощью плагина и с помощью внесения небольших изменений в код.

Как добавить хлебные крошки на блог плагином

Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.

Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».

Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».

и над этой строчкой вставляем следующий кусочек кода:

Если вы хотите разместить навигационную цепочку в другом месте, значит этот же код размещаете там.

После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.

Осталось перейти на блог и полюбоваться на результат.

Как добавить хлебные крошки на блог без плагина

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

Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:

Function the_breadcrumb() { echo "You are here: "; if (!is_front_page()) { echo "Home"; echo " » "; if (is_category() || is_single()) { the_category(" "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo "Home"; } }

и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.

Теперь нужно вот этот код:

разместить там, где вы хотите видеть навигационную цепочку, например, опять же над заголовком статьи. Для этого идем в single.php, ищем строчку с the_title и над ней вставляем этот код и сохраняем изменения.

Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).

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

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

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

Всем привет!

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

Значение и пример хлебных крошек

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

Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.

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

Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: Главная страница -> Раздел -> Название статьи . Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: Главная страница –> Раздел –> Подраздел –> Название статьи .

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

Хлебные крошки: как сделать на своем блоге?

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

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

Вот образец кода, который нужно вставить в файл functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

" Pro-wordpress » " term_id ) . ""> " . $categories [ 0 ] -> name . " » " ; } echo " " ; echo the_title() ; echo " " ; }

"; }

Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.

1 2 3 4 5

После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в styles.css такой код:

Breadcrumbs{ margin: -5px 0 5px 3px; /* отступы */ overflow: hidden; } .breadcrumbs a { color: #34a6d2; /* цвет ссылок - голубой */ text-decoration: underline; } .breadcrumb > span { color: #000; /* цвет конечного пункта - черный */ } .breadcrumb{ float:left; }

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

Хлебные крошки на WordPress: плагин

Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.

После установки в настройках вы сможете задать вариант пути (рубрики, даты, метки), максимальную длину заголовка, символы между разделами. Кроме того, можно отключить вывод названия страницы, на которой находится посетитель, чтобы не дублировать заголовок статьи. Для того чтобы хлебные крошки отображались на странице, вам опять-таки нужно прописать код в файле single.php или header.php.

1 2 3 4 5 6 7 8

Внести изменения в стили можно по аналогии с тем, как это было описано выше.

Микроразметка хлебных крошек

Мы уже говорили о том, насколько важна . Хлебные крошки в сниппете моего блога выглядят так:

Такой вид более понятен и приятен для пользователя, нежели просто url страницы.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function my_breadcrumb() { echo " Pro-wordpress » " ; $categories = get_the_category() ; if ($categories [ 0 ] ) { echo " term_id ) . "" itemprop="url"> " . $categories [ 0 ] -> name . " » " ; } echo " " ; echo the_title() ; echo " " ; }

function my_breadcrumb() { echo "

"; }

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

Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .

itemprop="url" – определяет значение url, его нужно добавить в каждый тег a

itemprop="title – определяет значение заголовка элемента цепочки

Весь код оборачивается в div с параметром xmlns:v="https://rdf.data-vocabulary.org/#"> , чтобы подключить словарь schema.org.

После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.

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

Напоследок предлагаю посмотреть видео о внутренней перелинковке.

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

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

Зачем крошки и почему без плагина?

Реализованы они тогда были на основе плагина — довольно таки функционального, но с довольно бедными возможностями визуального оформления крошек.

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

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

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

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

Я, как вы помните (правда не понятно, зачем вам это помнить, но все же), сейчас сижу на от Инфобокса . Замечательная и недорогая штука, но вот чуть больше месяца назад у меня — как будто бы меня вернули к обычному .

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

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

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

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

Использование на больших сайтах (более 1000 сообщений) может привести к падению сайта

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

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

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

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

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

Реализация красивых хлебных крошек для Вордпресс

Для начала нужно будет подключится к своему серверу (виртуальному хостингу) по ФТП. Например, с помощью описанной Файлзилы. Потом заходите в папку с вашей текущей темой оформления, которая обычно живет по такому пути:

/wp-content/themes/ее название

Вообще, темы Вордпресса я описывал , а точнее рассказывал из каких файлов (шаблонов) они могут состоять и за какие фрагменты макета блога они отвечают. Однако, кроме чисто дизайнерских решений в папке с темой вы найдете и файл functions.php (если его нет, то просто создаете его).

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

Итак, добавляете в этот расчудесный файл следующую функцию:

//Breadcrumb как у Google function the_breadcrumb() { if (!is_home()) { echo "

"; }

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

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

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

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

Но сначала распакуйте архив с фонами и залейте их в папку с вашей темой в имеющуюся там директорию:

/wp-content/themes/папка темы/images

Теперь откройте на редактирование (лучше не в админке Вордпресс, а подключившись к сайту по ФТП) файл со стилями style.css из папки с вашей темой оформления. Можно прямо в его конец добавить следующий код:

#breadcrumb {display:block;float:none;margin:0 0 40px 0;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 {color: #616d7e;display: block;float: left;font-size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;} .crumbs li a {background-image: url(images/bg-crumbs-blue.png);background-position: 100% 0%;background-repeat: no-repeat;position: relative;} .crumbs li a:hover {background-position: 100% -48px;color: #333;cursor: pointer;} .crumbs li a:active {background-position: 100% -96px;color: #333;} .crumbs li.first a span {border-left: 1px solid #d9d9d9;height: 29px;left: 0;position: absolute;top: 0;width: 3px;}

В строке background-image: url (images/bg-crumbs-blue.png) вы вольны будете изменить название графического файла фона на тот, чей цвет больше всего подходит дизайну вашего блога. Про то, как работает , а так же про все его возможные вариации (color, position, image, repeat, attachment). На самом деле жуть, как интересно, ибо открывает массу возможностей.

Вывод крошек в постах Вордпресса и небольшой их тюнинг

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

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

Он (код) будет выглядеть так:

Я не долго думая запихнул его в самом начале, сразу после подгрузки шапки блога: