Как просто добавить крошку в Divi

1. Что такое хлебная крошка на сайте?
2. Какой смысл в хлебных крошках?
3. Маршрут и навигация
4. Тропинка крошки и SEO (SEO)
5. Внедрение Breadcrumb в Divi
6. Активация хлебных крошек
7. Получение кода для вставки
8. Автоматическая вставка кода
9. И со стилем?
10. Фильтрация страниц
11. комплементов
12. Метки уровней глубины
13. заключение

Привет всем,

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

Что такое хлебная крошка на сайте?

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

Какой смысл в хлебных крошках?

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

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

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

Маршрут и навигация

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

Это позволяет посетителю:

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

Тропинка крошки и SEO (SEO)

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

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

Кроме того, это очень эффективный способ:

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

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

Внедрение Breadcrumb в Divi

Чтобы добавить крошку в Divi, мы будем:

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

Активация хлебных крошек

Пример с плагином Yoast

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

Получение кода для вставки

Если вы используете Yoast, просмотрите этот страница справки по настройке пути крошки и получите предложенный код (или подождите 30 секунд, потому что он интегрирован ниже).

Для других расширений, обратитесь к документации 😉

Автоматическая вставка кода

Чтобы автоматически включать HTML-код в виде хлебных крошек на всех страницах сайта, мы используем хук WordPress и тип_ действия_предшественника_контента, предоставляемый Divi в файле header.php.

Этот хук позволяет внедрить код сразу после заголовка Divi, перед содержимым страницы, без изменения файла header.php , таким образом без риска для будущих обновлений этого файла Elegant Themes.

Код для добавления в файл functions.php вашей дочерней темы:

add_action ('and_before_main_content', function () {if (function_exists ('yoast_breadcrumb')) {yoast_breadcrumb ('<p id = "breadcrumbs">', '</ p>');}});

И со стилем?

Очевидно, что рендеринг, как таковой, не обязательно велик, так как мы вставляем HTML-элемент «p» в середине ничего между заголовком и содержимым страницы. Весьма вероятно, что отображаемый текст приклеен к левому краю экрана и к заголовку.

Вы должны стилизовать этот абзац в CSS, чтобы правильно интегрировать его в свой дизайн.

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

add_action ('and_before_main_content', function () {if (function_exists ('yoast_breadcrumb')) {?> <div id = "section-breadcrumbs" class = "and_pb_section and_pb_with_background and_section_regular"> <div class = "and_pb_row = "et_pb_column and_pb_column_4_4 and_pb_css_mix_blend_mode_passthrough and -last-child"> <div class = "and_pb_module and_pb_text and_pb_bg_layout_light and_pb_text_al___t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_t_p_t_t_t_t_t_t_t_t_t_t_t_t_t_p_p_5_5_7 p> ');?&gt; </ div> </ div> </ div> </ div> </ div> <? php}});

Будьте осторожны , вам, вероятно, все равно придется вносить изменения в CSS, например, чтобы уменьшить высоту вставляемого раздела; Я добавил для этого идентификатор "section-breadcrumbs" в раздел. Например:

# section-breadcrumbs {padding: 20px 0! важный; } # section-breadcrumbs .et_pb_row {padding: 0! важный; }

Обратите внимание, что для «фиксированного» или «закрепленного» меню (которое не прокручивается вместе со страницей, но остается застрявшим в верхней части окна), необходимо добавить высоту меню к верхнему отступу раздела. Например, для высоты меню 160 пикселей:

# section-breadcrumbs {padding: 180px 0 20px 0! важный; } # section-breadcrumbs .et_pb_row {padding: 0! важный; }

Фильтрация страниц

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

И по разным причинам, которые меня не касаются, вы можете не отображать крошки на некоторых страницах.

В этом случае можно фильтровать страницы с помощью функций WordPress, таких как is_front_page (), is_page () или is_single ().

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

add_action ('and_before_main_content', function () {if ((! is_front_page ()) && (! is_single ()) && function_exists ('yoast_breadcrumb')) {?> <div id = "section-breadcrumbs" class = "and_pb_section and_pb_with_background et_section_regular "> <DIV класс =" et_pb_row "> <DIV класс =" et_pb_column et_pb_column_4_4 et_pb_css_mix_blend_mode_passthrough и-последний ребенок "> <DIV класс =" et_pb_module et_pb_text et_pb_bg_layout_light et_pb_text_align_left "> <DIV класс =" et_pb_text_inner «> <? PHP yoast_breadcrumb ( '<p id = "breadcrumbs">', '</ p>');?&gt; </ div> </ div> </ div> </ div> </ div> <? php}});

комплементов

Хлебная крошка "ручная"

Yoast также предлагает шорткод [wpseo_breadcrumb], который вы можете вставить в любой контент, чтобы вручную отобразить хлебную крошку.

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

Метки уровней глубины

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

заключение

Хлебные крошки являются важным элементом для всех крупных сайтов, как эргономичных, так и SEO. Не пренебрегайте этим!

Это легко настроить, и вы будете радовать посетителей при оптимизации вашего SEO.

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

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