onlinemoneta.ru
Hostenko — лучший WordPress-хостинг SEO sprint - Всё для максимальной раскрутки!

Урок №1: Как сделать хлебные крошки для WordPress без плагинов за 5 минут

Как сделать хлебные крошки для WordPress

Приветствую Вас, уважаемые читатели. Этой статьей я начинаю новую рубрику на своем блоге, которую я назвал «Уроки WordPress». В ней я буду публиковать небольшие полезные уроки по работе с CMS системой WordPress. Это основная CMS, которую я используя для создания своих сайтов и все мои интернет проекты сделаны именно на ней. В общем, у меня есть много интересного, чем хочется с Вами поделиться. Итак, урок №1: Как сделать хлебные крошки для WordPress.

Что такое хлебные крошки?

Хлебные крошки – это специфический набор ссылок, который отображается на странице, обычно сверху, который показывает поочередный путь к странице. Для примера приведу хлебные крошки, которые сделаны на моем туристическом сайте KrymTurizm.ru.

Как выглядят хлебные крошки на сайте

Как выглядят хлебные крошки на сайте

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

Есть два пути создания хлебных крошек. Первый – это с помощью специализированного плагина. Но зачем нам загружать базу данных кучей плагинов, если можно все сделать с помощью языка 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 'Home';
    }
} 

Этот код, нужно вставить в файл functions.php, который находится в папке с темой Вашего сайта. Открываем FTP-клиет и заходим в папку с темой. Открываем файл functions.php и вставляем код в конце перед закрывающимся тегом «?>», как это показано на рисунке ниже.

Вставка первой части кода в файл functions.php

Вставка первой части кода в файл functions.php

Так же не забудьте поменять в коде фразу «Ваш сайт» на домен Вашего сайта или напишите «Главная страница» — так будет отображаться первая часть хлебных крошек. Лично я написал туда домен своего сайта «KrymTurizm.ru».

Вторая часть кода

<?php
          the_breadcrumb();
?>

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

Вставка второй части кода в файл single.php

Вставка второй части кода в файл single.php

Таким образом, мы вставили хлебные крошки в статью нашего сайта, сделанного на CMS WordPress. На этом сегодняшний урок под названием «Как сделать хлебные крошки для WordPress» подошел к концу. Если у Вас возникли какие-то вопросы, то можете задать их ниже в комментариях к данной статьей. Не забывайте подписываться на обновления моего блога, впереди еще много интересного!

С уважением Александр Красильный

Интересное в моем блоге:

Понравилась статья? Поделись с друзьями!


28 комментариев

  1. Родион пишет:

    Интересно! я читал что хлебные крошки вроде повышают конверсию сайта!

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

  2. Родион пишет:

    Я имею в виду что увеличивается количество посетителей, которые выполняют действие необходимое веб мастеру!

  3. Инна пишет:

    у меня хлебные крошки от плагина SEO by Yoast — без него никак мне, и крошки нужны для перелинковки.

    • Виталий пишет:

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

  4. У меня стоит плагин WordPress Seo by Yoast для оптимизации и с помощью него же я вывожу и хлебные крошки.

  5. Юрий пишет:

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

  6. Виталий пишет:

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

  7. Милена пишет:

    Здравствуйте! А не подскажете мне , как быть — у меня в файле functions.php нет закрывающегося тега в конце. Тема Twenty Ten. Он у меня в начале. Может, в футере поставить? Там в начале есть.

    • Здравствуйте, я специально скачал Вашу тему, чтобы оценил что и как. Просто добавите необходимый код в файл functions.php после последней квадратной скобки «}» и все будет работать. А если честно, тема сильно замороченная. Там много файлов, в которых раскидан функционал. Я бы не рекомендовал ее использовать, но это лично мое мнение.

      • Милена пишет:

        Здравствуйте, Александр! Спасибо большое за внимание. Да, тема не очень, она мне не нравится тоже. Но она мне досталась в наследство). Я вообще не программист, я дизайнер. Просто так получилось, что взялась и пришлось вникать. Поэтому что-то менять принципиально я пока не готова. Приходится оптимизировать насколько это возможно. Попробую прописать, как Вы посоветовали, хотя я там пробовала, но не в том месте. Только я немного не поняла, после какой скобки — их там две. А еще — будет ли работать , если прописать в стилях стиль для breadcrumb, скажем #breadcrumbs { блаблабла?

        • Код прописывать после последней скобки. По поводу стилей, то нужно сделать чуток по другом. Нужно в файле single.php куда вы вставили вторую часть кода прописать определенный класс. Допустим назовем класс hk, тогда вторая часть кода будет выглядеть вот так:

          < ?php

          the_breadcrumb ();

          ?>

          После чего в файле style.css нужно дописать описание класса hk:

          .hk{

          //сюда пишите все что вам угодно из стилей css//

          }

          Все проверил на Вашей теме, у меня работает.

          • Милена пишет:

            Спасибо большое, Александр. Сегодня ночью буду пробовать(днем не могу, мало ли что). Я ведь могу прописать в category тоже самое?

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

              • Милена пишет:

                В общем, таким образом получилась только крошки по страницам. А тот код, который я уже прописывала до этого, работает на записях и категориях. И стили работают только если #hk{ блаблабла. Ну, в принципе — какая разница, лишь бы работало)) Спасибо, Александр.

  8. Надежда пишет:

    Уточните, что нужно изменить что бы на главной не выводились крошки?

  9. Мила пишет:

    Код забрала, работает. вп 3.7.1 Кнопочку я.ру нажала. благодарю! )

  10. Ольга пишет:

    Большое спасибо, за предоставленный вариант «хлебных крошек»! Из всех перепробованных этот подошёл мне как нельзя лучше! Так как в моём случае нужно было, чтобы выводились все рубрики, в которых размещена статья (рецепт). И что немаловажно — с этим кодом валидация сайта не пострадала ))))

  11. Мария пишет:

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

  12. Николай пишет:

    Спасибо большое. Установил и все сразу без проблем заработало. Кстати приятный на вид и интересный блог у вас, еще вернусь добавил в закладки.

  13. AnSummer пишет:

    Несмотря на то, что статье больше года, все получилось, спасибо за подробное объяснение. Правда в моей теме single.php выглядит совсем по другому и слова title и h1 не упоминаются. Вставила методом тыка)). Да, и слово «главная страница» не отображалась, пришлось заменить на домен. Возможно, это особенности темы.

  14. vit пишет:

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

Оставить комментарий

Почта (не публикуется) Обязательные поля помечены *