Оптимизируем навигацию на сайте wordpress

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

"Хлебные крошки" в большинстве случаев встраиваются в шаблоны, но иногда так бывает, что в ходе разработки шаблона о них просто забыли. Собственно, в таких случаях возникает необходимость в их реализации. Но как это сделать человеку, далекому от хитрых php кодов?

Реализация "хлебных крошек" без плагина

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

Итак, если ваша тема на wordpress не поддерживает "хлебные крошки", открываем простой текстовый файл с именем breadcrumbs.php и копируем туда нижеприведенный код:

<font size="1"><?php
$category = get_the_category();
$current_cat = $category[0]->cat_ID;
?>
<?php if (is_single()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php $category = get_the_category(); if ($category) { echo '<a href="' . get_category_link( $category[0]->term_id ) . '" title="' . sprintf( __( "Все материалы в рубрике %s" ), $category[0]->name ) . '" ' . '>' . $category[0]->name.'</a> '; } ?> &raquo; <?php the_title(); ?></div>
<?php } else if (is_home()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></div>
<?php } else if (is_category()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php single_cat_title(); ?></div>
<?php } else if (is_tag()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php single_cat_title(); ?></div>
<?php } else if (is_page()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php the_title(); ?></div>
<?php } else if (is_archive()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_day()) { ?>
Архивы за день <?php the_time('F jS, Y'); ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
Архивы за месяц <?php the_time('F Y'); ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
Архивы за год <?php the_time('Y'); ?>
<?php } ?></div>
<?php } else if (is_search()) { ?>
<div id="breadcrumbs">Вы здесь&nbsp;: <a href="<?php echo esc_url( home_url() ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &raquo; Результаты поиска &quot; <?php the_search_query(); ?> &quot;</div>
<?php } else { ?>
<?php { /* nothing */ } ?>
<?php } ?></font>

Собственно, код, выводящий "хлебные крошки" уже готов! Файл breadcrumbs.php загружаем в папку с используемой темой на сайте. Осталось его подключить в нужном месте шаблона. Делается это нехитрой строчкой кода:

<?php include (TEMPLATEPATH . '/breadcrumbs.php'); ?>

Куда писать эту строчку? Если вы хотите выводить "хлебные крошки" на всех страницах сайта, нужно эту строчку кода прописать в файле header.php, скажем, после вывода меню (этот код может выглядеть примерно так: <?php wp_nav_menu( array( 'theme_location' => 'primary-nav', 'container_class' => 'menu', 'fallback_cb' => false ) ); ?>).

Можно подключить лишь для страниц или записей - в файлах page.php и single.php соответственно (поэкспериментировав с местом для вывода "хлебных крошек").

Некоторые замечания к коду

Обратите внимание, что начало и конец кода "хлебных крошек" обрамлены в оформление <font size="1">...</font>. Вы можете изменить вид "хлебных крошек" под себя, изменив размер и цвет шрифта или использовав другие html-атрибуты для вывода текста.

Также в коде, адрес главной страницы вашего сайта выводится php-кодом:

<?php echo esc_url( home_url() ); ?>

А название сайта кодом:

<?php bloginfo('name'); ?>

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

https://seo-zona.ru

и

Блог типичного интернетчика

соответственно.

Результат работы "Хлебных крошек" можно видеть на скриншоте:

хлебные крошки - реализация

Google и Яндекс мы угодили непременно! Как говорят, и волки сыты, и овцы целы!

 

 

 

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 голоса, рейтинг: 5,00 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

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

4 комментарий

  1. Александр says:

    Вячеслав, у меня такая проблема с хлебными крошками(сделано по вашему рецепту): внедрил в блог магазин, на странице магазина все товары, но сам магазин в крошках не отображается. Когда открываешь страницу товара, то она появляется но с пробелом, вот так
    "главная| |такойто товар".
    как мне в этой схеме вставить shop?

  2. Пьяный блогер says:

    Привет! Так полагаю, что свои крошки предлагаешь?
    Мне то всё по фигу, лишь бы работало и надёжно было! Да и Димок по моему очень много славы на себя принял за этот код, который стоит у дохера блогеров!   

    1. Вячеслав says:

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

  3. Руслан says:

    Очень удобно! Спасибо Вам за Ваш труд!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *