Как сделать хлебные крошки
Добавил пользователь Alex Обновлено: 08.09.2024
Навигационная цепочка на сайте – удобство для посетителя и дополнительная перелинковка для поисковых систем. Обычно в ВордПресс-темах есть эта функция. Если в вашей нет, то разберем как установить и настроить хлебные крошки от Yoast SEO.
Это мощный плагин, который призван облегчить СЕО-оптимизацию. Удобно позволяет заполнить мета-теги как для всего сайта, так и для отдельных его разделов – рубрик, тегов, категорий, страниц, записей.
Еще одна его “фишка” – добавляет хлебные крошки. Они оптимизированы и подходят для всех поисковых систем. Посмотрим как это делается.
Как на счет разметки schema org?
Плагин уже использует эту микроразметку (или microdata). Изобретать больше ничего не надо.
Как вывести Breadcrumbs?
- Убедитесь, что расширение установлено и активировано – в панели управления должен появится пункт меню SEO.
- Откройте админ-раздел SEO > Отображение в поисковой выдаче и перейдите на вкладку “Хлебные крошки”.
- Установите ползунок в состояние “Включено” и нажмите Сохранить изменения.
Если тема поддерживает этот модуль, то навигация уже будет работать.
Настройка цепочки в плагине
На странице опций вы сможете управлять внешним видом с поведением крошек.
Как еще можно добавить навигацию в WordPress-плагине Йоаст?
Если тема не поддерживает работу этого wp-дополнения, то его разработчики предусмотрели и такой вариант.
PHP-код в шаблонах темы
Все ВП-темы имеют шаблоны. Это файлы, которые отвечают за конкретную часть сайта. Например, header.php отвечает за шапку или хэдэр. В файле footer.php можно изменить блоки, которые выводятся в подвале.
Чтобы добавить хлебные крошки от Yoast, создатели плагина предоставляют код
Для каждой темы содержимое и количество шаблонов разные. А поэтому нет универсальной инструкции, куда именно нужно вставить вызов этой PHP-функции.
Обычно навигация выводится в записях, страницах, архивах. Для этого исследуйте шаблоны single.php, page.php и archive.php соответственно.
Обычно цепочка навигации вставляется перед заголовком страницы (title).
Шорткод
Еще один способ – вставка короткого кода (shortcode) в контенте. Подойдет, если нужно где-нибудь выборочно задействовать хлебные крошки.
Для этого откройте публикацию на редактирование и вставьте строку в формате
Если плагин активен, то на это место будет выведен набор ссылок навигации.
Полезные фишки и возможности
Посмотрим, что еще можно сделать с хлебным крошками от модуля Йоаст.
Как убрать с главной?
Специалисты по поисковой оптимизации советуют избавится от крошек, если пользователь находится на главной странице. Объясняют тем, что ни к чему выводить цепочку, которая никуда не ведет. Ссылка со страницы на саму себя не имеет смысла.
Создатели расширения предусмотрели этот момент, и по умолчанию на главной ссылка не устанавливается.
Как убрать дубль (последнюю крошку)?
Поисковые системы не любят дублей на страницах веб-ресурса. Обычно в хлебных крошках Yoast SEO отображает название последней крошки, т.е. записи, страницы, архива. Этого не нужно.
Чтобы скрыть, в каталоге своей темы найдите файл functions.php и в самый конец добавьте несколько строк PHP-кода:
Эту задачу можно решить проще. Если вы используете премиум-плагин Clearfy Pro :
- откройте Clearfy Pro,
- перейдите на вкладку SEO,
- активируйте опцию Убирает дублирование названия в хлебных крошках WP SEO by Yoast.
Хлебные крошки в Yoast SEO работают во всех плагинах кэширования, а также в WooCommerce.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Настройки
Этот код создает навигационные ссылки, которые выводятся в зависимости от того, на какой вы сейчас странице находитесь. Если вы находитесь на странице с постом, то выводится ссылка на главную страницу, за ней идет ссылка на категорию, и за ней написано название поста. То же самое касается и отдельной страницы.
Если вы находитесь в архиве какой-то рубрики, то выводится ссылка на главную страницу, и за ней следует ссылка на рубрику.
Получается примерно такой вид:
Так начинается цикл, в котором выводится содержимое поста. Вот в этот цикл и нужно вставить код, присоединяющий созданный нами файл:
Пример
Хочу сказать, что данная статья будет делиться на две части. В первой части мы будем делать само оформление хлебных крошек, примеров будет 4. А во второй части мы будем прикреплять одно из понравившихся оформлений на блог WordPress. В общем надеюсь, что Вам всё понятно, теперь приступаем к работе.
Для начала нам нужно будет создать обычный html файл, например, index.html. Затем открыть его с помощью любого текстового редактора (например блокнот) и добавить следующее:
Далее для тега добавляем стили CSS:
Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.
Первый пример
Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:
Второй пример
Тут как и в первом примере, элемент состоит из трёх частей, которые соеденяются в одну часть с помощью CSS.
Третий пример
В третьем предмете элементы состоят из двух частей.
Четвёртый пример
Пример
Вот и всё, я считаю, что очень стильные и одновременно простые крошки. Тем более нет никаких изображений, соответственно быстрее загружаются.
Во всех примерах в стилях используется тег hover, который меняет цвет элемента при наведении, так же если Вам не нравится не один из представленных цветов, Вы с лёгкость сможете заменить его на свой.
Теперь пришло время перейти к второй части, а именно, будем прикреплять один из примеров на свой блог WordPress, поехали.
И так, для начала нам нужно скачать плагин Breadcrumb NavXT, скачать его Вы сможете тут. После того как плагин будет скачан и активирован, нужно будет произвести некоторые настройки:
Настройки плагина находятся в параметрах. Во вкладке General нужно найти строчку Breadcrumb Separator и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.
Далее выбираем вторую вкладку Current Item и на против строчки Link Current Item ставим галочку. Обязательно после того как всё сделаете, не забудьте сохраниться.
Всё, с плагином закончили, теперь нужно выбрать то оформление, которое Вам больше всего понравилось. В данном случае на примере будет вот этот стиль:
Это второй пример, который находится выше в статье.
Берём и просто копируем данные стили, а затем добавляем их в style.css Вашей темы, в любое место, которое больше всего Вам понравится, советую выделить начало и конец стилей крошек, потому что если в будущем захочется что либо там изменить, запутаетесь.
Теперь нужно хлебные крошки добавить непосредственно на блог.
В админке блога находим внешний вид, затем редактор, и выбираем single.php. Далее добавьте следующее:
Важно
Обратите внимание, что сама функция вызова крошек стоит между тегами
id которых breadcrumbs-two, не забудьте поменять данный id на пример который добавили в стили. Например, если это первый пример (который выше) тогда должно быть так:
Если у Вас шаблон на блоге похож на мой, в том смысле, что бэкграунд серый а сам блок с контентом белый, крошки лучше всего ставить над блоком, как у меня. Потому что они могут перенестись на новую строку если название слишком длинное и, поверьте, это не очень красиво. :-)
Вот и всё. Дорогие друзья, если возникнут какие то трудности обязательно спрашивайте в комментариях. До скорых встреч.
Нашла способ, как сократить количество движений при приготовлении панировочных сухарей.
Раньше я готовила панировочные сухари совсем по-другому. Вначале сушила кусочки хлеба, а затем измельчала в блендере. А мама это делала в мясорубке.
Способ неплохой. Но давайте посчитаем движения:
- найти доску
- нарезать на ней хлеб на кусочки
- выложить на противень
- поставить в духовку и высушить
- достать блендер (или мясорубку)
- измельчить в нем (в ней) готовые сухари
- вымыть, высушить и собрать блендер (мясорубку), убрать на место. Эти движения самые сложные))
Причем, после такого использования чаша блендера вся поцарапанная внутри стала (напишите, если у вас не так). Да и готовить такие сухари мне лень (как вспомню про блендер 🤨).
Ну много движений! Проще купить было!
Но я нашла способ намноооого быстрее (и плюс сухари получаются хлопьями, а не мелкая крошка). В такой панировке продукт берет меньше масла и выглядит более аппетитно.
А главное, движений в два раза меньше!
Хлеб или батон с помощью любой терки, которая есть под рукой, натираю сразу на противень .
Читайте также: