Wp breadcrumbs: How to Enable Them on Your WordPress Site

6 месяцев 30 дней назад

113 просмотров

Как отобразить их на своем сайте — Go WordPress

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

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

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

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

В этом посте мы более подробно рассмотрим навигационные ссылки WordPress и то, как они могут улучшить ваш пользовательский опыт (UX) и поисковую оптимизацию (SEO). Затем мы покажем вам несколько различных способов добавить эти ссылки на ваш сайт WordPress.com. Давайте начнем!

Что такое навигационные ссылки WordPress Breadcrumb (и почему они важны для вашего сайта)

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

Важно отметить, что навигационная цепочка служит несколько иной цели, чем главное меню навигации.

Какова цель навигационной цепочки WordPress?

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

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

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

США > Нью-Йорк > Чем заняться > Бесплатные достопримечательности

Нью-Йорк, они могут решить вернуться на страницу «Чем заняться», чтобы просмотреть другие виды деятельности. Если они посещают новую страницу, меню хлебных крошек может выглядеть немного по-другому:

США > Нью-Йорк > Чем заняться > Активный отдых

Как мы видим, навигационная цепочка может улучшить UX вашего сайта. Это достигается за счет того, что читателям очень легко ориентироваться в вашем контенте.

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

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

Как добавить навигационную цепочку на ваш сайт WordPress.com (2 метода)

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

Если вы являетесь пользователем WordPress.com, вам нужно будет использовать план с поддержкой плагинов для доступа к плагинам, упомянутым в этом руководстве.

1. Используйте плагин WordPress

Один из самых простых способов добавить навигацию по крошкам на ваш сайт — использовать бесплатный плагин. Давайте рассмотрим два популярных варианта: All in One SEO и Breadcrumb NavXt.

Добавление хлебных крошек с помощью All-in-One SEO

All-in-One SEO (AIOSEO) — один из самых мощных SEO-плагинов на рынке WordPress:

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

Для начала перейдите на Плагины > Добавьте новый в панель инструментов WordPress.com и выполните поиск «Все в одном SEO». Затем нажмите Установить сейчас , а затем Активировать :

Это приведет вас к мастеру установки плагина. Нажмите Давайте начнем :

Сначала вам будет предложено выбрать категорию, которая лучше всего описывает ваш веб-сайт:

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

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

Вам также необходимо выбрать функции SEO, которые вы хотите добавить на свой сайт:

После завершения настройки вернитесь на панель инструментов WordPress.com и перейдите к All in One SEO > . Общие настройки . Затем выберите в меню Breadcrumbs :

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

Если вы выберете опцию Shortcode , введите следующий код там, где вы хотите отобразить хлебные крошки:

[aioseo_breadcrumbs]

Если вы используете редактор блоков, вы можете просто добавить Shortcode блок в свой пост и вставь туда код:

Кроме того, вы можете отобразить свою навигационную цепочку через специальный блок Гутенберга. Для этого вам просто нужно вставить блок AIOSEO — Breadcrumbs в свой пост:

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

Чтобы добавить его на свой сайт, перейдите на Внешний вид > Виджеты . В настройщике выберите параметр Widgets , найдите AIOSEO — хлебные крошки и добавьте его на боковую панель:

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

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

Кроме того, вы можете настроить метки для страницы архивов, страницы результатов и ошибок 404:

Когда вы будете готовы, нажмите кнопку Сохранить изменения . Вот и все — навигация по хлебным крошкам теперь полностью настроена на вашем сайте!

Добавление навигационных крошек с помощью Breadcrumb NavXT

Хотя AIOSEO — мощный инструмент, возможно, вы уже используете плагин SEO на своем веб-сайте. Если это так, проверьте, есть ли в вашем плагине SEO опция «хлебных крошек». Если нет, вы можете выбрать плагин, специально предназначенный для навигации по хлебным крошкам.

Одним из таких инструментов, который вы можете использовать, является Breadcrumb NavXT. Этот плагин создает «хлебные крошки» для вашего сайта WordPress. Это также позволяет вам настроить их в соответствии с вашими потребностями и предпочтениями.

После того, как вы установили и активировали плагин, перейдите в Настройки > Breadcrumb NavXT на панели управления WordPress. Здесь вы можете настроить параметры для различных цепочек навигации на вашем сайте:

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

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

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

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

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

Чтобы отобразить хлебные крошки на вашем сайте, перейдите к Внешний вид > Виджеты . Затем снова выберите Widgets в меню. Здесь вы можете добавить виджет Breadcrumb NavXT на боковую панель:

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

2. Используйте тему WordPress.com

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

TextBook

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

Тема имеет сложную иерархию страниц, как вы можете видеть в верхней части этого снимка экрана:

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

Sequential

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

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

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

Edin

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

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

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

Заключение

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

В этом посте мы рассмотрели два разных способа добавить навигацию по крошкам на свой сайт WordPress:

1. С помощью мощного плагина SEO, такого как All in One SEO или Breadcrumb NavXt
.
2. С помощью темы WordPress.com, которая содержит навигационные ссылки, такие как TextBook, Sequential или Edin

Нравится:

Нравится Загрузка. ..

Основное руководство по добавлению хлебных крошек WordPress

Хотите снизить показатель отказов, улучшить навигацию по веб-сайту, улучшить SEO и предложить потрясающий пользовательский опыт? Конечно, вы делаете!

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

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

Источник: dedoles.se

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

Что такое панировочные сухари?

Забудьте о золотых и хрустящих, свежеподжаренных или панко. Эти панировочные сухари могут быть очень вкусными, но сегодня мы не об этом. Нет, мы здесь, чтобы обсудить онлайн-панировочные сухари , более функциональный (и менее съедобный) кусочек.

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

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

Понимание того, как работают различные навигационные цепочки

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

Панировочные сухари на основе иерархии

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

Хлебные крошки на основе атрибутов

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

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

Источник изображения

Хлебные крошки, основанные на истории

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

Преимущества «хлебных крошек»

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

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

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

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

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

Сканеры сайта облегчают ранжирование нужных страниц

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

Например, если вы ищете «что такое хлебные крошки?» в Google, в результатах поиска будет указан URL-адрес каждого веб-сайта, хлебные крошки и название.

Три способа добавления хлебных крошек на ваш сайт WordPress 

Итак, как именно вы собираетесь добавлять хлебные крошки на свой сайт WordPress? Ну, есть несколько разных маршрутов, которые вы можете выбрать. Мы познакомим вас с различными методами шаг за шагом.

Выберите тему WordPress, в которой уже есть навигационные крошки

Самый простой способ добавить навигационные крошки на сайт WordPress — установить тему, в которой они уже есть. Если вы можете найти тот, который хорошо сочетается с вашим брендом и имеет удобные панировочные сухари, тогда эй, вуаля, вы готовы к работе.

Внедрение навигационных цепочек с помощью пользовательского кода

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

Вот что вам нужно сделать:

1. Подключите WordPress к вашему серверу с помощью FTP-сайта, такого как FileZilla FTP 9.0326 .  
2. Щелкните папку public_html в клиенте FileZilla (включая файлы вашего веб-сайта).
3. Щелкните папку wp-content.
4. Щелкните каталог тем и выберите папку с текущей темой.
5. Нажмите на папку functions.php, затем выберите просмотр/редактирование.
6. Вставьте приведенный ниже код, чтобы зарегистрировать функцию навигации на своем сайте.
7. Сохраните изменения и загрузите обновленный файл при появлении запроса.

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

Третий и последний способ добавить хлебные крошки на ваш сайт WordPress — использовать плагин. Для этого вам понадобится специальный инструмент, такой как Yoast SEO, Breadcrumb NavXT или плагин WooCommerce Breadcrumbs.

Использование SEO-плагина Yoast

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

Чтобы добавить хлебные крошки с помощью Yoast, выполните следующие действия:

1. Установите плагин Yoast SEO с панели инструментов WordPress, т. е. плагины >
   добавить новый > введите «Yoast» в строку поиска > установить.
2. В подключаемом модуле Yoast перейдите к внешнему виду.
3. Нажмите на редактор тем.
4. Выберите шаблон с именем header.php.
5. Вставьте приведенный ниже фрагмент кода.
6. Сохраните изменения, нажав «Обновить файл».

Использование подключаемого модуля Breadcrumb NavXT

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

1. В плагине NavXT перейдите к настройкам.
2. Нажмите на навигационную цепочку NavXT.
3. Выберите один из четырех вариантов навигации.
4. Настройте подключаемый модуль и сохраните изменения.
5. Перейти к внешнему виду.
6. Нажмите на редактор тем.
7. Выберите файл header.php.
8. Вставьте код ниже.
9. Щелкните файл обновления.

Использование подключаемого модуля Woocommerce Breadcrumbs

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

Вот что вам нужно сделать:

1. Установите плагин Woocommerce Breadcrumbs на свой сайт WordPress.
2. Перейдите к настройкам.
3. Щелкни туалетными сухарями.
4. Установите флажок рядом, чтобы включить хлебные крошки.
5. Нажмите, чтобы сохранить изменения .  

Источник: fixrunner.com

Настройка хлебных крошек WordPress с помощью CSS 

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

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

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

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

Переключите переключатель отключения 

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

Удалить введенный вручную код

Другой вариант — удалить введенный вручную код. Просто вернитесь в папку header.php вашего сайта и удалите строку кода, которая добавляет хлебные крошки на ваш сайт.

Оставьте след из хлебных крошек 

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

Более того, включить хлебные крошки на свой сайт довольно просто. В некоторые шаблоны WordPress даже включены хлебные крошки.

Если вы еще не занимаетесь панировочными сухарями, чего же вы ждете?

Ник Браун

+ posts

Ник Браун является основателем и генеральным директором Accelerate, маркетингового агентства SaaS, которое эксклюзивно сотрудничает с корпоративными технологическими компаниями для масштабирования их SEO и контент-маркетинга.