4

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

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

Способ 1. Хлебные крошки для сайта.

Данный способ мне понравился своей лаконичностью. Код получается очень короткий и совсем не нагружает сайт.
1. Копируете код функции.

function the_sergeyneznamov_ru_() {
if (!is_front_page()) {
echo 'Главная';
echo " » ";
if (is_category() || is_single()) {
the_category(' ');
 if (is_single()) {
echo " » ";
the_title();
 }
 } elseif (is_page()) {
echo the_title();
}
 }
 else {
echo 'Главная';
 }
 }

2. Вставляете скопированный код в файл «functions.php» в самый конец кода перед значком «?>

Внимание! Перед внесением изменений в код не забудьте предварительно сделать резервную копию сайта.

У меня в шаблоне такого символа в конце файла нет. Ничего страшного вставляйте код в самый конец после основного кода. Если, что-то не получится, вы всегда сможете вернуться к исходному состоянию. Посмотрите как я вставил код на своем сайте;
Хлебные-крошки-wordpress-без-плагина
3. Далее, выводим функцию на страницы, на которых мы хотим видеть Хлебные крошки”. Для вывода копируем второй  код и вставляем его в файлы нужных страниц.  Я вывел крошки на странице записей «single.php».  Для этого я установил код вывода функции сразу после первой строки файла <?php get_header(); ?>

Посмотрите как установлен код на моем сайте.

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

Способ 2 Хлебные крошки” для wordpress сайта.

Тоже простой способ. С небольшим, аккуратным кодом. Создает полностью функциональную строку хлебных крошек.
1.  Копируете код.

<div id="breadcrumbs">  
   <?php if (is_home()) { ?>  
  <?php } elseif (is_single()) { ?> 
      <a href="<?php echo get_option('home'); ?>">Главная</a> »  
      <?php foreach((get_the_category()) as $cat) { 
      $cat=$cat->cat_ID; 
      echo(get_category_parents($cat, TRUE, ' » ')); } the_title(); ?>  
     <?php } ?> 
 </div> 

2.  Заходите в файл «single.php» и ищите строку похожую на

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Код вставляете перед данной строкой. Не забываем нажать кнопку Обновить файл”. Посмотрите как это выглядит на моем блоге.
хлебные-крошки-Wordpress-без-плагина
Все готово. Хлебные крошки должны появиться перед заголовками статей. Смотрите, что получилось.
хлебные-крошки-Wordpress-без-плагина
Вы можете поработать над внешним видом строки Хлебных крошек”. Для этого копируем код стилей. Код полностью закомментирован, чтобы было понятно для чего служит каждая строка.

/* Стили для хлебных крошек */
#breadcrumbs {

 width: auto;    /* Автоматический выбор ширины страницы */

font-size: 16px;  /* Размер шрифта */

color:  #0C0C0C;  /* Цвет текста, который не является ссылкой (название текущей статьи) */
text-shadow: #FFFFFF 0px 0px 0px;  /* Тени для текста, цвет и отступы от шрифта (необязательно) */

text-align: left;  /* Прижимаем текст к левому краю страницы */
margin: 3px 30px 5px 30px;  /* Внешние отступы */
padding-bottom: 5px;  /* Внутренние отступы */
border-bottom: 2px solid #3E49E2;  /* Добавляем разделительную черту снизу, толщина линии, непрерывная, цвет (не обязательно) */
 }

/* цвет ссылок */
 #breadcrumbs a, #breadcrumbs a:visited {
color:#2F35FF;  /* Цвет ссылки */
text-decoration: none;  /* Отменяем подчеркивание ссылок */
 }
 /* цвет ссылок при наведении курсора */

#breadcrumbs a:hover, #breadcrumbs a:active {
color: #FF00AE;  /* цвет ссылки при наведении курсора */
text-decoration: none;  /* Отменяем подчеркивание ссылок при наведении курсора */
 }

Смело экспериментируйте с цветами и отступами. Для подбора цвета, рекомендую использовать программу ColorMania или ColorCop”. Посмотрите, что у меня получилось после небольшого редактирования стилей.
хлебные-крошки-Wordpress-без-плагина

На этом пожалуй все. Существует большое количество методов вывода «Хлебных крошек » на сайте. Какой способ, выбрать вам смотрите сами. Мне больше всего понравился второй. Код не большой, есть возможность настроить внешний вид крошек, под дизайн вашего сайта. Интересно, какими  способами пользуетесь вы, уважаемые читатели. Всего доброго!

 

комментария 4
  1. admin
    01.08.2018 в 23:14

    Здравствуйте. Необходимо изменить путь к title страницы в коде функции. Как это выполнить честно не знаю и не понимаю для чего это делать.

  2. Николай
    31.07.2018 в 10:55

    Здравствуйте. Как сделать так, чтобы в хлебных крошках выводился title страницы, а не H1 «Продающий заголовок»?

  3. admin
    25.01.2017 в 09:51

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

  4. Андрей
    25.01.2017 в 09:18

    У вас, как всегда, все самое полезное для нас, ваших читателей! Сергей огромное спасибо за готовое решение создания навигации без использования плагинов! Вот и еще один плагин можно смело удалять, и все сделать ручками! Мы так в скором времени уйдем вообще от использования плагинов, сайт будет грузиться со скоростью света! Все таки хоть мы и используем cms для создания сайтов, но знания HTML, CSS и PHP хоть минимальные, но необходимы! Взял себе учебник буду грызть HTML.

Добавить комментарий

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