X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 4176 переглядів

  • Дизайн та розробка сайту

Доброго времени суток 🙂
В этой статье хочу показать вам не сложный способ, как можно организовать хлебные крошки WordPress без плагина.
Хлебные крошки (навигационная цепочка, англ. Breadcrumbs) – по сути является видом навигации на Вашем сайте. Крошку указывают путь от главной страницы сайта, до той, где Вы находитесь.
Чаще всего хлебные крошки находятся под шапкой над контентом в виде строки и имеют вид на подобии такого:

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

Хлебные крошки

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

И так приступим.

1. Функция the_breadcrumb()

Находим в папке темы файл functions.php и вносим в него новый код:

function the_breadcrumb() {
    echo '';
    if (!is_front_page()) {
        echo '<a href="';        
       echo get_option('home'); echo '">Главная';
        echo '</a>  » ';
        if (is_category() || is_single()) {
            the_category(' ');
            if (is_single()) {
                echo ' » ';
                the_title();
            }
        } elseif (is_page()) {
            echo the_title();
        }
    }
    else {
        echo 'Последние записи';
    }
}  

В 5 строке указана ссылка на главную и как она будит выводится - Главная. Далее в 6 и 10 строке есть символ » - это символ которым будут разделяться ссылки. Можете заменить на какой-нибудь div и задать ему фон в виде картинки (Так сделано у меня на сайте). В 18 строке есть текст - Последние записи это текст будет выводится когда Вы находитесь на главной, то есть путь из крошек отсутствует. Можете просто удалить текст или написать опять Главная.

2. Вывод на странице

Для того чтобы подключить функцию, Вы должны в нужном месте, чаще всего над выводом названия записи, в файлах single.php, category.php, archive.php также по желанию в page.php и index.php, в общем везде где хотите видеть крошки - вставить следующую строку:

<div class="entry-breadcrumb"><?php the_breadcrumb() ?></div>

Функцию мы заключили в div с классом entry-breadcrumb, которому можно присвоить стили.

3. Стили CSS

Открываем style.css и добавляем туда стили наших крошек.

.entry-breadcrumb{
padding:10px 0;
font-size:13px;
color:#888;
margin-bottom:20px;
border-bottom:1px solid #eee;
} 

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 6, в среднем: 4.2 из 5
Читайте також