Как включить хлебные крошки в wordpress. Как добавить хлебные крошки на блог без плагина
Здравствуйте, уважаемые читатели! Сегодня речь пойдет о том, что такое хлебные крошки, какие функции они выполняют на блоге, а самое главное — как установить и настроить плагин Breadcrumb NavXT, позволяющий создать хлебные крошки WordPress .
Что такое хлебные крошки
«Хлебные крошки» показывают путь на блоге, по которому необходимо пройти от главной до текущей страницы. Это своего рода навигационная цепочка, каждое звено которой является ссылкой на страницу более высокого уровня. Самый высокий уровень — это главная блога. В идеале путь к любой странице блога от главной должен занимать максимум 3 клика мыши. Фактически, это главная — категория — запись или главная — категория — категория — запись , но никак не длиннее. Это необходимо для удобства не только пользователей, но и поисковых систем. Посты с более глубоким заложением поисковики могут индексировать с некоторой задержкой. К тому же их важность в глазах поисковиков уменьшается с увеличением уровня вложенности. Как следствие — ссылки на самые важные и интересные статьи на блоге старайтесь проставлять на главной.
Подобную фишку на сайте называются по-разному — навигатор, навигационная цепочка, путь на сайте, но самым популярное название — это именно «хлебные крошки». Такое название пошло от сказки про Гензеля и Грету, в которой герои разбрасывали хлебные крошки, чтобы найти дорогу назад.
Помимо удобства и навигации они выполняют еще одну важную функцию — улучшает внутреннюю перелинковку страниц блога. Ранее я уже рассказывал о трех важных и интересных плагинах, для внутренней перелинковки — , которые настоятельно рекомендую установить каждому на свой блог. Breadcrumb NavXT смело можно причислить к этому списку.
Когда поисковики индексируют какую-то статью блога, они сразу видят к какой рубрики она относятся и полный путь до главной, что помогает им определить структура блога. Только не забудьте еще добавить на блог как для поисковиков, так и для пользователей.
Установка и настройка плагина Breadcrumb NavXT
Установка Breadcrumb NavXT несколько отличается от , поэтому рассмотрим ее подробно:
2. Распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Для этого воспользуйтесь — FileZilla.
3. Активируйте плагин через раздел «Плагины» панели администратора WordPress.
4. Теперь необходимо вставить следующий код:
Второе по популярности место — это шапка сайта. Для этого код необходимо вставить только в один шаблон — header.php . Точного места я не могу сказать, все зависит от темы. Здесь подойдет способ научного тыка — вставляете код, сохраняете, смотрите результат, не нравится — меняете местоположения кода в шаблоне.
Некоторые продвинутые темы по умолчанию выводят хлебные крошки на блоге, но я бы посоветовал все-таки использовать плагин Breadcrumb NavXT, потому что он имеет более гибкие настройки. В таких случаях следует заменить стандартный код в шаблонах темы, отвечающий за вывод хлебных крошек, на код плагина, указанный выше. Стандартный код во многом должен быть похож на приведенный код плагина, поэтому найти его не составит труда (обычно он заключен в тег div, ID или class которого имеет тоже название — breadcrumb).
После добавления кода, можно изменить внешний вид хлебных крошек WordPress. Для этого следует добавить стили к классу breadcrumb в файл style.css используемой темы. Конечно, для этого необходимо знать основы CSS, поэтому советую ознакомиться с бесплатным самоучителем по CSS от Влада Мержевича, который вы можете скачать с моего блога.
Настройки плагина располагаются в разделе «Параметры» — «Breadcrumb NavXT». В интернете можно найти русификатор к нему, но, к сожалению, на последние версии плагина он встает очень криво — большая часть настроек так и остается на английском языке. Поэтому я рассматривать буду настройки именно на английском, давая перевод и свои комментария по самым важным пунктам.
Первая закладка называется «General» — Общие.
Breadcrumb Separator — символ, который будет использоваться в качестве разделителями между звеньями навигационной цепочки.
Breadcrumb Max Title Length — в качестве звена навигационной цепочки используется заголовок страницы, эта опция задает максимальную длину заголовка, 0 — используется заголовок целиком, не обрезая его.
Home Breadcrumb — указывать или нет в хлебных крошках главную блога. Советую включить и задать ей имя в соответствии с названием вашего блога.
— текст, который будет виден на главной блога, если это не ссылка.
Переходим на вкладку Current Item , что означает «Текущей пункт» или «Текущее местоположение».
Link Current Item — выводить название текущей страницы в качестве ссылки на нее же или нет.
Paged Breadcrumb — поддержка постраничной навигации. После включения будут отображаться номера в хлебных крошках.
— шаблон, определяющий название текущей позиции при включенной поддержки постраничной навигации.
Следующий раздел называется «Post & Pages» — Записи и страницы.
Post Taxonomy Display — показывать все варианты путей, ведущих к записи.
Post Taxonomy — в вариантах путей к записи можно отображать. Для своего блога выбрал стандартный вариант — Рубрики.
Page Template и Page Template (Unlinked) — аналогичны рассмотренным выше Post Template и Post Template (Unlinked), только выводится будут для опубликованных статей.
На очереди раздел «Categories & Tags» .
В этом разделе задаются шаблоны для формирования хлебных крошек рубрик и тэгов. Просто действуйте по аналогии с рассмотренными выше шаблонами для записей.
В разделе можно задать шаблоны для страницы автора (Author ), даты/архива (Date ), результатов поиска (Search ) и ошибки 404 .
Остальные опции я не использую, поэтому умничать о их назначении не буду.
Ну вот во всем и разобрались! Поздравляю! На этом свое повествование заканчиваю и прощаюсь с вами, но не надолго, ибо скоро на моем блоге выйдет очередная интересная статья!
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про то, как сейчас у меня реализованы хлебные крошки, помогающие читателю понять, внутри какой структуры находится данная статья. Наверное, они в первую очередь необходимы проектам со сложной системой вложенных категорий (рубрик), но лично мне они понравились чисто внешне.
Есть и оптимизаторская подоплека в использовании крошек — они являются элементом внутренней перелинковки, о которой я писал не так давно. Другие дело, что статический вес они нагоняют на рубрики и главную страницу, что лично мне совсем не нужно. Однако, у меня уже был период, когда крошки стояли довольно продолжительное время (более года, и это совпало с периодом наибольшего роста посещаемости).
Зачем крошки и почему без плагина?
Реализованы они тогда были на основе плагина — довольно таки функционального, но с довольно бедными возможностями визуального оформления крошек.
Конечно же, можно было бы использовать и стили для создания красивости, но тогда я не очень то шибко с ним дружил. Только написав по CSS стилям, стал и сам в этом немного разбираться. Получилось как в анекдоте про негодующего на непонятливость студентов преподавателя, который в сердцах заявил: «Три раза объяснил! Сам понял! А вы...».
Вот, потом крошки я убрал и уже даже точно не помню почему, но точно не из-за соображений оптимизации. Вообще, если опираться на и мои статьи, то крошки будут лишними в тонком деле создания идеальной схемы перелинковки. Но, тем не менее, стоит ли мне верить после .
Теорий много по данному вопросу. Если в упомянутых статьях я пытался умничать и искать истину в высоких материях (аякс, правильная схемы перелинковки) то вот этот товарищ, например, рассказывает как оптимизировать wordpress в тезисах, без деталей, но вполне понятно. Надо быть проще и люди к тебе потянутся, а за ними и поисковики, возможно. Ладно вернем к крошкам.
Сделать их совсем не сложно и плагинов ставить не придется. В этом есть свой плюс, ибо один кривоватый плагин может нагнуть довольно мощный сервер. У меня, например, похожие проблемы возникли после установки описанного чуть ранее плагина внутренней перелинковки (выезжающая панелька в правой области, которая появляется на моем блоге при прокрутки его страницы до начала комментариев).
Я, как вы помните (правда не понятно, зачем вам это помнить, но все же), сейчас сижу на от Инфобокса . Замечательная и недорогая штука, но вот чуть больше месяца назад у меня — как будто бы меня вернули к обычному .
Волнообразно накатывали жуткие тормоза, что довольно часто происходит на обычном хостинге, если кто-то с твоего же сервера начинает отжирать общие ресурсы не мерено или ддосят кого-либо из твоих виртуальных соседей.
Начал писать гневные письма в техподдержку, требовать сатисфакции и потрясать ссылкой на упомянутую чуть выше статью про их Parallels, который я там хвалил, а он вон какой гадкий оказался.
Мне отвечали (вежливо, но довольно убедительно), что у меня нагрузка идет очень высокая. Я им отвечал, что она у меня с начала года в разы снизилась (имея в виду посещаемость и количество просмотров). Ну, в общем, они меня убедили подумать в сторону того, а что я, собственно, последнее время такое с блогом делал, что могло так нехорошо отразиться на его работе.
В силу возникших сложностей с поисковым трафиков я думал в основном о способах все вернуть взад, ну или предавался меланхолии, вспоминая славные деньки до обвала. В общем, с трудом вспомнил, что примерно в это же время я и ставил этот самый плагин upPrev. Полез в его настройки и прочитал правильно фразу на вкладке «Кеш»:
Использование на больших сайтах (более 1000 сообщений) может привести к падению сайта
Точнее, я ее просто не дочитал до конца в момент настройки и поставил галочку на автомате, решив что кеш это вообще замечательно, а в отношения Вордпресс, так вообще полный цимус (вспомните моего и позволяющего платить за хостинг в разы меньше). В общем, кеш в upPrev отключил и тормоза исчезли.
Конечно же, этот пример не говорит однозначно о вреде плагинов, но они могу являться причиной тормозов (может быть даже по началу и незаметных). В общем, если кто-то upPrev тоже ставил, то вы знаете что делать, если хостер сообщит вам о превышении допустимой нагрузки или вы сами это почувствуете.
Собственно поэтому, по возможности, стараюсь обходиться минимальным . Тем более, что довольно интересно использовать разные функции, ибо сам себе кажешься умнее, чем есть на самом деле. Особенно это здорово, когда PHP ты знаешь, а точнее совсем не знаешь. Вот тогда прям таки настоящий ребус получается, как, например, тот, что был описан мною .
Ну, и кроме всего прочего данные хлебные крошки производят очень приятное визуальное впечатление:
А для подгона их под дизайн своего блога у вас будет выбор из шести цветовых гамм.
Реализация красивых хлебных крошек для Вордпресс
Для начала нужно будет подключится к своему серверу (виртуальному хостингу) по ФТП. Например, с помощью описанной Файлзилы. Потом заходите в папку с вашей текущей темой оформления, которая обычно живет по такому пути:
/wp-content/themes/ее название
Вообще, темы Вордпресса я описывал , а точнее рассказывал из каких файлов (шаблонов) они могут состоять и за какие фрагменты макета блога они отвечают. Однако, кроме чисто дизайнерских решений в папке с темой вы найдете и файл functions.php (если его нет, то просто создаете его).
Он служит для прописывания всяческих функций или фильтров, которые позволяют реализовать много чего полезного не копаясь непосредственно в файлах движка, изменения в которых после могут быть потеряны. А все, что внесете в functions.php, будет жить вплоть до смены вами темы оформления.
Итак, добавляете в этот расчудесный файл следующую функцию:
//Breadcrumb как у Google function the_breadcrumb() { if (!is_home()) { echo "
"; }Только не впихивайте ее внутрь уже существующей функции. Наверное, проще всего будет найти слово function и вставить приведенную выше конструкцию сразу перед ней (хотя, лучше будет разделить переносом строки для наглядности).
Это каркас. Теперь нужно будет добавить к нему еще немного стилей. Сначала вам желательно определиться с расцветочкой, но можно будет ее откорректировать и по ходу.
В архиве будет шесть графических файлов в формате PNG, каждый из которых представляет из себя с полосками выбранного вами оттенка и разными степенями осветления:
Одна из полосок будет использоваться по умолчанию, другая будет показана при подведении к ней курсора мыши, а третья — при щелчке по ссылке из хлебных крошек. Все это задается, естественно, в стилях CSS, которые мы сейчас и пропишем.
Но сначала распакуйте архив с фонами и залейте их в папку с вашей темой в имеющуюся там директорию:
/wp-content/themes/папка темы/images
Теперь откройте на редактирование (лучше не в админке Вордпресс, а подключившись к сайту по ФТП) файл со стилями style.css из папки с вашей темой оформления. Можно прямо в его конец добавить следующий код:
#breadcrumb {display:block;float:none;margin:0 0 40px 0;font-weight:600;} #breadcrumb ul {font-family: Helvetica, sans-serif;list-style: none;} .crumbs {display: block;} .crumbs li.first {padding-left: 8px;} .crumbs li a, .crumbs li a:link, .crumbs li a:visited {color: #616d7e;display: block;float: left;font-size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;} .crumbs li a {background-image: url(images/bg-crumbs-blue.png);background-position: 100% 0%;background-repeat: no-repeat;position: relative;} .crumbs li a:hover {background-position: 100% -48px;color: #333;cursor: pointer;} .crumbs li a:active {background-position: 100% -96px;color: #333;} .crumbs li.first a span {border-left: 1px solid #d9d9d9;height: 29px;left: 0;position: absolute;top: 0;width: 3px;}
В строке background-image: url (images/bg-crumbs-blue.png) вы вольны будете изменить название графического файла фона на тот, чей цвет больше всего подходит дизайну вашего блога. Про то, как работает , а так же про все его возможные вариации (color, position, image, repeat, attachment). На самом деле жуть, как интересно, ибо открывает массу возможностей.
Вывод крошек в постах Вордпресса и небольшой их тюнинг
Собственно, базу мы подготовили и осталось теперь только определиться, где-именно наши хлебные крошки будут видны посетителям. Очевидно, что на главной они будут лишними. Лично я решил их выводить только в постах, а значит нам нужно будет добавить код их вызова в тот файл (шаблон) вашей темы оформления, который за это отвечает.
В большинстве случаев это будет файл single.php, но возможно, что у вас вместо него работает index.php (см. выше ссылку на статью про устройство тем Вордпресс). Тогда для вывода хлебных крошек только в постах, вам придется создать файл single.php, скопировав в него содержимое index.php, а затем добавив код вызова крошек только в single.
Он (код) будет выглядеть так:
Я не долго думая запихнул его в самом начале, сразу после подгрузки шапки блога:
Собственно, на блоге крошки прорезались, но побродив по страницам я обнаружил один неприятный момент — некоторые заголовки моих статей оказывались длиннее, чем ширина графической подложки. Буковки вылазили на ее пределы и было не айс.
Можно было бы, конечно, удлинить в графическом редакторе () полоски подложки, но это было бы слишком просто, а мы не ищем легких путей. Или, наоборот.
В общем, я немного сократил количество символов (заменил в коде the_title () на trim_title_chars (60, "...")), которое отображается в ссылке на текущий пост, ибо названия у меня слишком длинные и в заготовки подложек попросту не влазят:
Function the_breadcrumb() { ... if(is_single()) { echo "
Вот, но для этого в наш многострадальный файл functions.php пришлось добавить еще одну функцию:
Function trim_title_chars($count, $after) { $title = get_the_title(); if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count); else $after = ""; echo $title . $after; }
Замечательная штука и может везде, где вам понадобится, заменить the_title () на trim_title_chars (60, "..."). Например, у меня это реализовано в . Естественно, что цифра 60 означает количество отображаемых символов Тайтал и вы вольны его заменить на нужное вам.
Но потом мне не понравилось, что слова обрезаются посередине или еще как-то некрасиво, поэтому я в итоге заменил trim_title_chars (60, "...") на trim_title_words (5, "..."). Догадайтесь — чего там 5? Ну, очевидно, что слов, а дальше будет стоять троеточие.
Echo "
Правда, в functions.php нужно добавить еще одну функцию:
Function trim_title_words($count, $after) { $title = get_the_title(); $words = split(" ", $title); if (count($words) > $count) { array_splice($words, $count); $title = implode(" ", $words); } else $after = ""; echo $title . $after; }
Вот и все, что я хотел сказать по этому многозначительному поводу.
P.S. перенес мой маленький отчет в комментарии к посту о .
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)
Файл functions.php из папки с темой WordPress и реальные примеры его использования
Граватар - как создать глобальный аватар и настроить вывод иконки Gravatar в теме Вордпресса
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Как использовать Ajax для закрытия ссылок и как задать условие вывода чего-либо в постах нужных рубрик Вордпресса (in_category)
Как в WordPress можно выводить посты из категории с миниатюрами (их создание в Auto Post Thumbnail и catch_that_image)
Привет всем!. Сегодня в этой статье я хотел бы рассказать вам, как можно улучшить юзабилити своего сайта при помощи плагина Yoast SEO, о котором я расскажу подробно в одной из следующих своих статей.
Наверняка многие уже слышали про этот плагин и знают, что он необходим для написания сео-оптимизированных статей. Но то, что еще можно сделать хлебные крошки WordPress Yoast SEO, догадываются немногие.
Для начала, давайте я поясню, что такое «хлебные крошки» и для чего вообще они нужны.
Итак, «хлебные крошки» - это дополнительная постраничная навигация, которая отображает в какой рубрике или в каком разделе находится статья. Посетитель, перейдя на какую-то страницу вашего блога должен понимать, в каком разделе он находится и в той ли рубрике он ищет нужную ему информацию. Обобщенно эта навигация может быть представлена так:
У нас на сайте она выглядит следующим образом:
Кроме того, наличие данной навигации помогает роботам более четко понимать структуру сайта и быстрее индексировать ваш блог. А это очень важно при проекта в сети.
«Почему?» — вы спросите, мы решили пользоваться данным плагином. Ответ тут будет прост. В интернете существует большое количество похожих сервисов, которые помогут с выводом «крошек», но при этом они дополнительно будут нагружать сайт, от этого лучше уж точно не станет. А раз мы все равно используем Yoast SEO для оптимизации постов, то грех не воспользоваться его возможностями и не сделать удобное юзабилити с его помощью.
Настройка вывода хлебных крошек плагином Yoast SEO
Как устанавливать данный Yoast SEO я писать тут не буду. Если вы не знаете, как это сделать, то прочитайте вот эту мою статью « ». В ней я подробно рассказываю и показываю, какими способами можно устанавливать необходимые плагины для работы.
В открывшемся окне поставьте галочку «Включить навигационную цепочку (breadcrumbs)».
К нашей радости откроются настройки все на русском языке, и они интуитивно понятны. В видео, которое скоро появится в этой статье, я более наглядно покажу, что будет происходить при изменении некоторых пунктов данного меню. А пока, вы можете сами с легкостью поэкспериментировать и попробовать поменять настройки. Ничего страшного тут сотворить не возможно, так как это всего лишь визуальные корректировки наших «крошек».
Следующим шагом после включения навигационной цепочки, будет вставка кода активации данной функции в шаблон вашей темы. Чтобы узнать, какой код нужно вставить, переходим по ссылке, которая идет после настроек нашей цепочки.
После того, как мы попали на официальный сайт данного плагина, копируем требуемый код и вставляем в то место своей темы, в котором мы планируем, чтобы они выводились.
Универсального места для вставки данного кода я вам посоветовать не могу, так как это зависит от темы, которую вы используете. Возможно вам понадобиться прописать его или в файл single.php, или в page.php, а в некоторых случаях и в header.php.
В нашем случае код мы вставили практически в самом начале файла single.php, который расположен по адресу www/wp-content/themes/ваша тема/ .
Примечание: Обращаю ваше внимание, что вставлять код лучше через FTP клиент. Мы используем Filezilla, о работе которой подробно писали . Обязательно прочитайте нашу инструкцию, чтобы избежать многих ошибок новичков.
Причем прошу также обратить внимание, что код который стоит у нас, немного отличается от того, который нам рекомендован разработчиками. А именно, функцию breadcrumbs мы обернули в тэг div. Это сделано для того, чтобы можно было задать свой индивидуальный стиль отображения.
Для этого в файле style.css мы прописываем те стили, которые нам требуются. В них мы можем задать цвет, фон, размер шрифта, подчеркивание, то есть привести к такому виду, который бы полностью устраивал бы наш вкус или сочетался с общей стилистикой страницы. В нашем случае это выглядит вот так:
На этом настройка плагина практически закончена, но в таком варианте, у нас после вывода рубрики еще будут выводиться и название статьи. Это может привести к переспамленности. Я думаю, вы со мной согласитесь, что это лишнее, поскольку название статьи и так прекрасно видно пользователю и дублировать его еще раз нет никакой необходимости.
Чтобы избежать этого, требуется дополнительно вставить небольшой код в файл functions.php.
Function adjust_single_breadcrumb($link_output) { if(strpos($link_output, "breadcrumb_last") !== false) { $link_output = ""; } return $link_output; } add_filter("wpseo_breadcrumb_single_link", "adjust_single_breadcrumb");
Вот теперь все наши настройки окончены. Если вы все сделали правильно, то у вас получится примерно также как на нашем блоге.
Если возникнут вопросы — пишите в комментариях!
Всем пока-пока!
С вами был Калмыков Антон
Термином «хлебные крошки» называется иерархическая система навигации меню, представленная в форме цепочки ссылок. Она позволяет посетителям понять, в каком разделе блога они находятся. На Wordpress «хлебные крошки» часто используются в качестве вспомогательной навигации, с помощью которой пользователи перемещаются по страницам сайта. В этой статье рассказывается о том, как вывести ссылки в блоге посредством плагинов.
Функции
Перед тем как добавить в Wordpress «хлебные крошки», нужно понять, для чего это делается. С помощью вспомогательного меню можно указать посетителю, где находится заметка или товар, которые он рассматривает в данный момент. При необходимости пользователь мгновенно возвращается в нужную категорию, не прибегая к поиску более сложных элементов навигации. Таким способом можно повысить удобство использования сайта.
«Хлебные крошки» страниц Wordpress позволяют создать правильную перелинковку. Это мероприятие является одним из самых высокоэффективных способов продвижения блога. С помощью «хлебных крошек» можно распределять ссылочный вес между главной страницей, категориями и статьями.
Поисковая система Google уже начала отображать вспомогательную навигацию под названиями сайтов в результатах выдачи. Это предоставляет веб-ресурсу возможность переместиться на верхние позиции. Подробное описание процесса дано в официальной справке компании Google. Не все так легко, как кажется. Поисковая система не всегда может понять, нужно ли отображать «хлебные крошки» Wordpress в выдаче.
Стоит ли добавлять вспомогательную навигацию на сайт
Если пользователю удается разбить тему блога на 3-4 рубрики, то устанавливать блок со ссылками необязательно. Структура веб-ресурса останется простой и понятной. В этом случае не рекомендуется использовать «хлебные крошки» Wordpress. Вспомогательную навигацию нужно добавлять, только если сайт имеет сложную структуру.
«Хлебные крошки» в Wordpress выводятся на страницы блога с помощью плагинов. Существует множество расширений, позволяющих устанавливать дополнительный блок со ссылками на сайте. В этом обзоре будут рассмотрены только некоторые из них.
Breadcrumb NavXT
Этот программный продукт является самым популярным и мощным плагином, позволяющим создавать в Wordpress «хлебные крошки». С его помощью можно генерировать вспомогательное меню, которое будет широко настраиваемым. Плагин подойдет как новичкам, так и специалистам в сфере Wordpress. Он обладает большим количеством функций. Пользователь может задавать уникальные классы и идентификаторы для продвинутой стилизации вспомогательного меню.
Плагин имеет поддержку нескольких языков. К недостаткам следует отнести отсутствие встроенных тем оформления. Этот недочет можно исправить путем использования стилей, предлагаемых в сообществах. Последние версии программного продукта на русском языке. Авторы проекта предлагают работать с большим количеством тонких настроек.
При необходимости можно включить функцию генерирования кода в соответствии с принятым Google стандартом RDFa. Подобная разметка панели вспомогательного меню не будет гарантией того, что система применит «хлебные крошки» при создании поискового сниппета, однако шансы на это существенно возрастут. Ссылки отображаются только в виджете. Добавить вспомогательное меню в начало страницы не удастся. Стоит учитывать, что «хлебные крошки» не поддерживаются поисковой системой «Яндекс».
Yoast Wordpress SEO
Создание вспомогательного меню - это одна из функций данного программного продукта. Большое количество инструментов позволяет выполнять расширенную SEO-оптимизацию. Этот плагин используют люди, настроенные на качественное продвижение блога. Редактирование блока со ссылками у некоторых владельцев сайтов может вызвать затруднения. Чтобы выполнить эту задачу, нужно открыть административную панель Wordpress, перейти в раздел «SEO» и выбрать строку «дополнительно».
Будет загружена страница с дополнительными настройками плагина. Здесь необходимо перейти на вкладку «навигационная цепочка». Пункт «включить» следует отметить галочкой. Для появления вспомогательного меню на сайте требуется добавить в код блога PHP-функцию, отвечающую за вывод. В поле «разделитель» можно ввести любой символ, который поддерживается HTML5.
В качестве текста ссылки на основную страницу сайта следует указать домен или просто слово «Главная». В поле «основной префикс» нужно вписать несколько букв или символов. Они будут отображаться перед всеми ссылками вспомогательного меню. Таким же образом заполняются поля префиксов навигационных цепочек для архивов и страниц с результатами поисковой выдачи. В подразделе «таксономия» необходимо выбрать пункт «рубрики», «метки» или «форматы».
Breadcrumb Trail
С помощью плагина от Джастина Тэдлока можно быстро создавать в Wordpress «хлебные крошки». Начинавшееся с небольшого скрипта, это программное обеспечение переросло в продвинутую систему.
Плагин позволяет выводить вспомогательное меню для любой структуры. Он автоматически выполняет поиск постоянных ссылок для блога. Основываясь на полученной структуре, плагин выводит на сайт «хлебные крошки». Ссылки добавляются на каждую страницу. Плагин автоматически обнаруживает таксономии, типы заметок и т.п.
Yummi «хлебные крошки»
Этот программный продукт можно установить прямо из панели администратора в Wordpress. Для этого следует перейти на страницу «плагины». Затем нужно кликнуть по кнопке «добавить новый», ввести название в строку поиска, нажать Enter и установить ПО. После активации необходимо настроить плагин. С этой задачей справится даже начинающий пользователь.
Сначала нужно указать тип установки блока со ссылками. Чтобы «хлебные крошки» Wordpress плагин вывел автоматически, следует выбрать соответствующий пункт. Если пользователь укажет тип «ручная установка», то он должен будет вставить код на сайт самостоятельно. Затем требуется выбрать внешний вид блока со ссылками. Далее следует указать, на каких страницах будут отображаться «хлебные крошки».
При желании можно включить показ всплывающих подсказок и ссылки Home. Пользователю также следует выбрать стиль шрифта для «хлебных крошек» и основных категорий. Здесь же находится опция включения атрибута title для ссылок. Чтобы удалить со страниц сайта информацию об авторе плагина, необходимо указать пункт «спрятать» рядом с графой «ваша благодарность» и сохранить результат. Можно заметить, что настройки плагина достаточно просты и понятны.
Really Simple Breadcrumb
Этот программный продукт - еще одно простое решение для Wordpress. Плагин работает корректно и без ошибок, отображается согласно коду используемой темы. Установить программное обеспечение можно через панель администратора. Для того чтобы «хлебные крошки» отображались на статических страницах, необходимо прописать над строкой вывода заголовка соответствующий код. Если пользователю нужно изменить тип разделителя, то он может редактировать 17 строчку файла breadcrumb.php.
В этом варианте добавления вспомогательного меню отсутствует микроразметка. С нею «хлебные крошки» будут отображаться в сниппете поисковой выдачи Google вместо URL. Это повысит кликабельность. Поэтому пользователю необходимо добавить микроразметку или использовать другой вариант.
DP RDFa Breadcrumb Generator
Плагин был создан для поисковой оптимизации сайта. Как и в случае с Yoast Wordpress SEO, «хлебные крошки» отображаются в сниппете выдачи автоматически.
После установки программного обеспечения нужно открыть панель администратора и перейти в настройки. Затем следует выбрать плагин. В появившемся окне создатель рекламирует свой продукт. Далее идет код для копирования. Его необходимо вставить там, где нужно отобразить цепочку навигации.
Раз уж этот блог в первую очередь ориентирован на чайников новичков, то давайте сначала ответим на вопрос, не как сделать хлебные крошки в WordPress (breadcrumb) , а для чего их делать)
И что бы на него ответить познакомимся с определением. Я уже частично затрагивал эту тему в одной из статей.
Хлебные крошки (breadcrumb) это своего рода навигационная цепочка, дополнительная навигация на вашем сайте. Она отображается в виде полного пути к открытой текущей странице, состоящей из ссылок, анкорами которых являются названия страниц.
Если это объяснение для вас звучит как пустой звук, то можете просто прокрутить эту страницу вверх, и над названием моего поста вы увидите те самые хлебные крошки)
Почему они так называются, думаю, многие догадались, если любили сказки в детстве 🙂
Эти полезные остатки мучного изделия не только упрощают навигацию для пользователей, но и главным образом позитивно сказываются на . Таким образом, вы получаете дополнительное ключевое слово на странице с записью.
Но и это еще не все. Благодаря хлебным крошкам (по англ. они называются breadcrumbs ) в результатах поиска Google в сниппете вместо ссылки на страницу будет показываться название категории, примерно так это выглядит:
Обратите внимание, верхняя поисковая выдача благодаря хлебным крошкам показывается не как длинная непонятная ссылка латинскими буквами (как на нижней выдаче), а в виде кириллического названия категории “Новости сайта ” что является более семантичным и привлекательным для пользователя.
И что всё это даст нам в сумме? Верно, увеличит количество переходов с поисковых систем на наш сайт, что совсем не помешает)
Ну а теперь о главном.
Как сделать хлебные крошки в WordPress
Есть несколько путей решения данной задачи.
1. С помощью функции плагина Yoast WordPress SEO
Если вы пользуетесь плагином Yoast WordPress SEO, то у вас есть возможность сделать хлебные крошки для сайта с его помощью, подробно этот плагин я разбирал в . Для этого достаточно лишь зайти на страницу Хлебные крошки в настройках плагина, и там увидите код, который нужно скопировать и вставить в нужное место:
< ?php if (function_exists(‘yoast_breadcrumb’)) {
yoast_breadcrumb(‘
‘,»);
} ?>
Я использую именно этот способ. Код вставил в файл single.php темы оформления, в самом верху страницы. Если вас не устраивает внешний вид крошек, то можете задать им свои css-стили, для них присваивается идентификатор #breadcrumbs которому и можем прописывать все что душа пожелает.
Внимание . Если вы новичок, то перед внесением изменений в файлы WordPressa, советую всегда делать их резерные копии, на всякий случай) В данном случае скопируйте и сохраните на компьютере single.php перед изменением.
2. Плагин Breadcrumb NavXT
Если вы не используете Yoast WordPress SEO то можете просто установить отдельный плагин для хлебных крошек. К таким плагинам относится Breadcrumb NavXT но можете использовать и аналоги.
Для того, что бы включить отображение хлебных крошек, нужно опять таки вставить код там, где хотим их вывести.
Я предлагаю и тут разместить код в файл single.php
Мы размещаем навигацию в самом верху контейнера, отвечающего за вывод страниц с записью на экран. Как правило эти контейнеры называются В настройках плагина можно менять разделители, иерархию и шаблоны вывода текста в ссылках, если что-то не устраивает. Для настройки внешнего вида опять же можно прописывать стили, только тут уже к классу .breadcrumb
Вы можете внести самостоятельно нужный код в функции вашей темы — файл functions.php
и вызвать крошки там, где вам нужно без всяких плагинов. Из плюсов данного способа – уменьшаем нагрузку на блог, т.к. избавляемся от лишнего плагина. Из минусов – использование хаков, и тем более их настройка под себя может вызвать трудности у новичков. В сети присутствует немало разных хаков с вариантами хлебных крошек. Один из лучших вариантов на мой взгляд это скрипт от . Разрешение на размещение скрипта от автора получено, так что выкладываю: /* === ОПЦИИ === */ $showCurrent = 1; // 1 — показывать название текущей статьи/страницы, 0 — не показывать global $post; if ($showOnHome == 1) echo ‘ echo ‘ if (is_category()) { } elseif (is_search()) { } elseif (is_day()) { } elseif (is_month()) { } elseif (is_year()) { } elseif (is_single() && !is_attachment()) { } elseif (!is_single() && !is_page() && get_post_type() != ‘post’ && !is_404()) { } elseif (is_attachment()) { } elseif (is_page() && !$post->post_parent) { } elseif (is_page() && $post->post_parent) { } elseif (is_404()) { if (get_query_var(‘paged’)) { echo ‘ } Вставлять данный код нужно, как вы уже догадались, в functions.php
вашего шаблона (не забываем делать резервную копию
) в любое место между и ?>
(Для новичков - копировать левую колонку с цифрами не нужно, они лишь для удобства, показывают номер строки кода на блоге)
Как вы заметили, в строчках с 3 по 16ю идут настройки скрипта, которые вы можете менять по своему усмотрению. И теперь для вывода навигации делаем уже знакомую процедуру - вставляем в single.php следующий код:
Сам скрипт проверил, все отлично работает, так что если вы предпочитаете обходиться без плагинов, то этот вариант для вас. Теперь вы знаете, что такое хлебные крошки, для чего они нужны, и как их сделать для своего блога на WordPress. А если нет, то перечитайте все сначала:) Если после 2-3 прочтений вы что-то так и не поняли, то задавайте вопросы в комментариях, постараюсь помочь) Думаю этот гусь тоже не отказался бы от хлебных крошек, глядишь не такой злой был бы:)
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>
3. Хлебные крошки с помощью хаков в WordPress
function dimox_breadcrumbs() {
$text[‘home’] = ‘Главная’; // текст ссылки "Главная"
$text[‘category’] = ‘Архив рубрики "%s"’; // текст для страницы рубрики
$text[‘search’] = ‘Результаты поиска по запросу "%s"’; // текст для страницы с результатами поиска
$text[‘tag’] = ‘Записи с тегом "%s"’; // текст для страницы тега
$text[‘author’] = ‘Статьи автора %s’; // текст для страницы автора
$text[‘404’] = ‘Ошибка 404’; // текст для страницы 404
$showOnHome = 0; // 1 — показывать "хлебные крошки" на главной странице, 0 — не показывать
$delimiter = ‘ » ‘; // разделить между "крошками"
$before = »; // тег перед текущей "крошкой"
$after = »; // тег после текущей "крошки"
/* === КОНЕЦ ОПЦИЙ === */
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = »;
$linkAfter = »;
$linkAttr = ‘ rel="v:url" property="v:title"’;
$link = $linkBefore . ‘
if (is_home() || is_front_page()) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(», false)) . $after;
echo $before . sprintf($text[‘search’], get_search_query()) . $after;
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo $before . get_the_time(‘F’) . $after;
echo $before . get_the_time(‘Y’) . $after;
if (get_post_type() != ‘post’) {
$slug = $post_type->rewrite;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
} else {
$cat = get_the_category(); $cat = $cat;
if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
}
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat;
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo $delimiter; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif (is_tag()) { echo $before . sprintf($text[‘tag’], single_tag_title(», false)) . $after; } elseif (is_author()) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;
echo $before . $text[‘404’] . $after;
}
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ‘ (‘;
echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) echo ‘)’;
}
} // end dimox_breadcrumbs()
< ?php if (function_exists(‘dimox_breadcrumbs’)) dimox_breadcrumbs(); ?>