Хлебные крошки для WordPress без плагина. Как сделать хлебные крошки без плагина Breadcrumb NavXT
Приветствую вас, уважаемые читатели блога сайт. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для
WordPress
—
Breadcrumb
NavXT
, который переводится как «хлебные крошки».
Данное название плагин получил из-за того, что его автору Джону Хавлику понравилась сказка про братьев Гримм, где мальчик Гензель сыпал хлебные крошки, чтобы по ним найти обратный путь. Правда было бы логичнее назвать плагин «камушки», так как по истории сказки Гензель и Гретель не смогли найти путь назад, так как хлебные крошки съели птицы. Ну да ладно, не в этом суть, главное, что этот плагин поможет посетителям не потеряться на вашем сайте и точно даст знать, где и в какой категории (части сайта) они сейчас находятся.
К тому же плагин Breadcrumb NavXT помогает равномерно распределить статический вес по всем страницам сайта, что очень важно для его и продвижения в поисковых системах. На всякий случай, если вы считаете, что внутренняя перелинковка (оптимизация) сайта не так важна, то рекомендую почитать вам вот эту , из которой вы поменяете свою точку зрения.
Итак, в этой статье я покажу вам, как реализовать данную навигацию у вас на сайте или блоге при помощи плагина Breadcrumb NavXT,
а также простого кода.
Установка плагина хлебных крошек Breadcrumb NavXT.
1
)
Как обычно скачиваем плагин и закачиваем его на блог, активируем.
2
)
Теперь нам нужно разместить специальный код в том месте, где вы хотите видеть строчку хлебных крошек. Для этого перейдите во «внешний вид» «редактор» и выберите файл, в который будете вставлять код. Чаще всего код плагина вставляют в файл «одна запись» (single.php) непосредственно перед или после заголовка статьи. Если вы совсем не разбираетесь в кодах, то просто ищите в самом начале кода два тега
и , которые отвечают за вывод названия публикаций. У меня данный код выглядит так:</p>
<p><b><h2>" title="<?php the_title (); ?>"><?php the_title (); ?></h2>
</b></p>
<p>Как найдете у себя нечто подобное, сразу же перед ним вставьте этот код хлебных крошек и обновите файл.</p>
<p><b><?php
</b><br><br><b>{ bcn_display (); }
</b><br><b>?>
</b></p>
<p>Кстати, если вам не нравится горизонтальная навигация и вы хотите чтобы она отображалась вертикально, то вам нужно вместо предыдущего кода вставить этот.</p>
<p><b><?php if (function_exists ("bcn_display_list"))
</b><br><b>{
</b><br><b>bcn_display_list ();
</b><br><b>}?>
</b></p>
<p>Гуд, как вы видите, у вас появилась навигационная строка, но без отображения даты публикации в самом конце, как у меня. Если хотите приделать ее к своей навигационной строке, то вам надо просто найти код в вашей теме оформления, который отвечает за вывод даты публикации, и добавить его после кода хлебных крошек.</p>
<p><b><?php
</b><br><b>if (function_exists ("bcn_display"))
</b><br><b>{ bcn_display (); }
</b><br><b>?><span>> <span>Опубликовано <?php the_time (" j F Y"); ?></span></div>
</span>
</b></p>
<p>Если что-то непонятно, то > — выводит у меня такую вот стрелку > а буква j – обозначает день, F- месяц, Y- год. Думаю после таких объяснений, вам и самим не будет трудно найти такой код.</p>
<p>Хорошо, теперь разберемся с дизайном. Сам стиль шрифта и цвет ссылок навигационной строки берутся из ваших стилей темы оформления, но если они вам не нравятся и вы их хотите изменить, то просто добавьте эту дополнительную строчку к коду, который мы вставляли выше.</p>
<p><b><divclass="breadcrumb"></div>
</b></p>
<p>В итоге у вас должен будет получиться такой код:</p>
<p><b><divclass="breadcrumb">
</b>
</span><br><b><?php
</b><br><b>if (function_exists ("bcn_display"))
</b><br><b>{
</b><br><b> bcn_display ();>
</b><br><b>}
</b><br><b>?>
</b><br><b></div>
</b>
</p>
<p>Теперь зайдите во «внешний вид» «редактор» и откройте файл «таблица стилей» (style.css). И вставьте <a href="/kak-ubrat-sistemnyi-parol-na-vindovs-10-etap-otklyuchit-vyvod-okna-vvoda.html">данный код</a> практически в самый низ и обновите файл.</p>
<p><b>.breadcrumb {
</b><br><b>font:bolder 12px «Trebuchet MS», Verdana, Arial;
</b><br><b>padding-bottom: 10px;
</b><br><b>}
</b><br><b>.breadcrumb a{
</b><br><b>color: #1B7499;
</b><br><b>}
</b><br><b>.breadcrumb a:hover {
</b><br><b>color: #EF0E0E;
</b><br><b>}
</b></p>
<p>Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:</p>
<ul><li>Во-первых, оно полезно с точки зрения юзабилити — навигация сориентирует людей на сайте и прояснит его структуру.</li>
<li>Во-вторых, эта фишка работает и для оптимизации, т.к. по сути, является еще одним вариантом , а также увеличивает число переходов и время пребывания (+ может отображаться в выдаче).</li>
</ul><p>Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами — совсем другое дело. Плюс в он тоже отлично смотрится.</p>
<p>Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте . Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.</p>
<p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread2.jpg' width="100%" loading=lazy></p>
<p>Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить. </p>
<h2>Плагины и хлебные крошки в WordPress</h2>
<p>Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.</p>
<p><img src='https://i2.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread3-560x380.jpg' width="100%" loading=lazy></p>
<p>Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:</p>
<p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread41-560x250.jpg' width="100%" loading=lazy></p>
<p>Основная задача модуля, в принципе, никак не связана с нашей сегодняшней темой, но не упомянуть его нельзя. Одна из дополнительных фишек плагина Yoast SEO — хлебные крошки. То есть вам не придется устанавливать новый модуль, а просто активируете соответствующую опцию. В работе я использую именно этот вариант.</p>
<p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread42-560x250.jpg' width="100%" loading=lazy></p>
<p> — самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.</p>
<p>Breadcrumb
</p>
<p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread43-560x250.jpg' width="100%" loading=lazy></p>
<p>В принципе, сложно найти решения, которые были бы интереснее предыдущих двух, хотя есть неплохие попытки. Так, например, в модуле Breadcrumb для WordPress внедрена поддержка шорткодов, плюс сама цепочка ссылок имеет оригинальное оформление (смотрите по ссылке Live Demo!»). Непонятно только поддерживаются ли дизайны в бесплатной версии. Также вы можете настраивать тип разделителя и добавлять текст в начале элемента. По словам разработчиков скрипт максимально простой и легкий.</p>
<p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread44-560x250.jpg' width="100%" loading=lazy></p>
<p>Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками. </p>
<h3>Хлебные крошки в Yoast SEO</h3>
<p>Я не буду детально описывать все тонкости работы, почитать об этом можете в , сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.</p>
<p>После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:</p>
<p><img src='https://i2.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread51-560x489.jpg' width="100%" loading=lazy></p>
<p>Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).</p>
<p>Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:</p>
<table><tr><td class="code"> <?php
if
( function_exists
("yoast_breadcrumb"
)
)
{
yoast_breadcrumb("<p id="breadcrumbs">"
,
"</p>"
)
;
}
?>
</td>
</tr></table><p><?php
if (function_exists("yoast_breadcrumb")) {
yoast_breadcrumb("");
}
?></p>
<p>Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.</p>
<p>Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:</p>
<p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread52-560x377.jpg' width="100%" loading=lazy></p>
<p>То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации. </p>
<h3>Плагин Breadcrumb NavXT для WordPress</h3>
<p>Также при создании хлебных крошек под Вордпресс используется планин Breadcrumb NavXT. Модуль обладает хорошей функциональностью, о которой я частично упоминал выше, плюс содержит много интересных опций. Разобраться в нем сможет практически каждый пользователь и легко поменять нужные настройки элемента навигации.</p>
<p>Через админку либо скачиваете с официального репозитория . Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.</p>
<p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread61-560x477.jpg' width="100%" loading=lazy></p>
<p>Здесь есть 4 закладки параметров:</p>
<ul><li>В «Основных» можно выбрать тип разделителя, убрать линк на главную и настроить показ текущей страницы. Формат строки задается через шаблоны.</li>
<li>«Записи» — содержит опции для постов.</li>
<li>«Таксономии» — отвечают за метки / категории.</li>
<li>«Другое» — форматы страниц автора, архивов, 404 ошибки.</li>
</ul><p>Советую пройтись по каждой вкладке, посмотреть все фишки. Формат отображения позволяет вносить любые изменения в данную навигацию — добавлять свой текст/символы, менять стили и т.п.</p>
<p>После указания параметров хлебных <a href="/hlebnye-kroshki-wordpress-nastroika-plagina-breadcrumb-navxt-hlebnye-kroshki-v.html">крошек Breadcrumb</a>s в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:</p>
<table><tr><td class="code"> <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if
(function_exists
("bcn_display"
)
)
{
bcn_display()
;
}
?>
</div>
</td>
</tr></table><p><div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists("bcn_display"))
{
bcn_display();
}?>
</div></p>
<p>Аналогично работе с Yoast SEO выбор места размещения кода зависит от установленной темы. Если предполагается вывод блока в шапке, тогда используете header.php. Учитывая то, что этот файл общий для всех страниц макета, увидите цепочку ссылок на каждой из них. Также можно показывать элемент только в избранных разделах — в таком случае вставляете код в single.php, page.php, archive.php и т.п. В целом, Breadcrumb NavXT — неплохой инструмент. </p>
<h2>Хлебные крошки в WordPress без плагина</h2>
<p>Допускается реализация функции Breadcrumbs в WordPress без плагинов. Однако перед тем как перейти к описанию разных вариантов, я выскажу свое субъективное мнение почему это не лучшая идея:</p>
<ul><li>Интеграция наверняка вызовет сложности у начинающих пользователей.</li>
<li>Редактирование параметров непосредственно в коде не особо наглядно — задание шаблонов отображения через админку куда удобнее нежели правка напрямую.</li>
<li>Модули имеют больше возможностей — взять хотя бы локализацию, поддержку Schema.org, виджеты.</li>
<li>Не все коды, найденные в сети, актуальны, корректны и регулярно обновляются, в то время когда, как минимум, Yoast SEO и Breadcrumb NavXT в WordPress стабильно работают.</li>
</ul><p>Если честно не думаю, что создание хлебных крошек в Вордпресс без плагина принесет вам серьезный прирост производительности. Да, если вы крутой веб-разработчик, создаете проект для себя, то вполне можно обойтись «чистым кодом», во всех остальных случаях готовый модуль намного проще.</p>
<p>Одно из самых компактных и плюс-минус актуальных решений . Первым делом вы добавляете новую пользовательскую функцию get_breadcrumb() в файл functions.php:</p>
<table><tr><td class="code"> <span>/**
* Generate breadcrumbs
* @author CodexWorld
* @authorURL www.codexworld.com
*/
</span>
function
get_breadcrumb()
{
echo
"Home"
;
if
(is_category()
||
is_single()
)
{
echo
" » "
;
the_category(" . "
)
;
if
(is_single()
)
{
echo
" » "
;
the_title()
;
}
}
elseif
(is_page()
)
{
echo
" » "
;
echo
the_title()
;
}
elseif
(is_search()
)
{
echo
" » Search Results for... "
;
echo
""<em>"
;
echo
the_search_query()
;
echo
"</em>""
;
}
}
</td>
</tr></table><p>/**
* Generate breadcrumbs
* @author CodexWorld
* @authorURL www.codexworld.com
*/
function get_breadcrumb() {
echo "Home";
if (is_category() || is_single()) {
echo " » ";
the_category(" . ");
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for... ";
echo ""<em>";
echo the_search_query();
echo "</em>"";
}
}</p>
<p>Затем в макете отображения постов single.php или любом другом вызываете ее:</p>
<table><tr><td class="code"> <div class="breadcrumb"><?php get_breadcrumb(); ?></div>
</td>
</tr></table><p><div class="breadcrumb"><?php get_breadcrumb(); ?></div></p>
<table><tr><td class="code"> breadcrumb {
padding
:
8px
15px
;
margin-bottom
:
20px
;
list-style
:
none
;
background-color
:
#f5f5f5
;
border-radius
:
4px
;
}
.breadcrumb
a {
color
:
#428bca
;
text-decoration
:
none
;
}
</td>
</tr></table><p>breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}</p>
<p>В итоге получите что-то вроде:</p>
<p>Если вам этого достаточно, то почему нет. Также могу посоветовать вариант от Dimox’а который постарался учесть все недостатки существующих сниппетов. Исходного кода там в разы больше, из него вполне можно создавать полноценный модуль:) </p>
<h2>Как убрать хлебные крошки в WordPress</h2>
<p>В принципе, эта задача обратная к процессу установки элемента. Поэтому перед тем как его отключить нужно понять как именно все реализовано в вашем конкретном случае. Алгоритм приблизительно следующий:</p>
<ol><li>Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.</li>
<li>Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.</li>
<li>Еще раз проверяем отображение страниц проекта в браузере.</li>
</ol><p>В принципе, отключить или убрать хлебные крошки в WordPress не так уж и сложно, главное разобраться как они добавлены. Внимательно правьте код, дабы не удалить ничего важного (можно предварительно закомментировать строки).</p>
<p><b>Итого.
</b> В статье детально разобрал как сделать хлебные крошки в WordPress, информации по настройке вам должно хватить с головой. Советую перед установкой подумать действительно ли вам необходим данный блок. Что касается реализации, то лично я не вижу смысла внедрять элемент пути по сайту в Вордпресс без плагина, учитывая, что в вашем веб-проекте наверняка будет присутствовать Yoast SEO. Что касается других модулей, то они пригодятся лишь в случае какой-то оригинальной функциональности. Breadcrumb NavXT кажется весьма неплохим, но я обеими руками за решение от Yoast.</p>
<p><i>Если у вас есть какие-то вопросы по работе с хлебными крошками Breadcrumbs и WordPress плагинами для них, пишите ниже, — будем разбирать.
</i></p>
<p><i>P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.
</i></p>
<p>Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. <span>Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.
</p>
<h2>Первая причина популярности плагина "Хлебные крошки"</h2>
<p>Это удобство для навигации по . После установки и настройке плагина Breadcrumb NavXT в верхней части страницы появляется удобное меню навигации которое поэтапно показывает пользователю не только название страницы на которой он находится но и последовательно все страницы сайта на которых он побывал ранее. Что безусловно очень удобно, особенно при изучении большого количества материала и просмотра нескольких страниц.</p>
<h2>Вторая причина востребованности этого плагина</h2>
<p>Дополнительная перелинковка страниц, и как следствие <b>+
</b>в ранжировании поисковиков. (Собственно, прозвище "Хлебные крошки" произошло от сказки братьев Гримм под названием Гензель и Гретель по сюжете которой дети чтобы не заблудится в лесу бросали хлебные крошки… Но это так, лирическое отступление.) Вернёмся всё же к нашему плагину.</p>
<h2>Скачиваем и устанавливаем плагин Breadcrumb NavXT.</h2>
<p>Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "<b>Breadcrumb NavXT
</b>"</p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065655.png' align="center" height="248" width="380" loading=lazy></p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-11_065501.png' align="center" width="100%" loading=lazy></p>
<p>Установка обычная ничем не отличается от установки остальных плагинов. А вот с настройками придётся повозиться.</p>
<p>Переходим по вкладке "Параметры"…</p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185405-e1389337037125.jpg' align="center" height="525" width="300" loading=lazy></p>
<p>… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка<b>"Основные"
</b>, все остальные вкладки настроек: <i>"Записи и страницы", "Таксономии", "Другое"
</i>, можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:</p><p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2019/01/2019-01-24_142049.jpg' align="center" width="100%" loading=lazy></p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_185939.png' align="center" height="648" width="600" loading=lazy></p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_190130.png' align="center" height="631" width="600" loading=lazy></p>
<p>Сохраняем изменения настроек, и на этом здесь все.</p>
<p>Теперь приступаем к самому интересному.</p>
<h2>Необходимо отредактировать шаблон вашей темы.</h2>
<p>К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.</p>
<p>Переходим в консоль и выбираем «Внешний вид»→«Редактор»:</p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-10_092847.png' height="288" width="192" loading=lazy></p>
<p>В результате переходим в раздел редактирования тем. В этом разделе для редактирования необходимо выбрать именно ту тему которую вы сейчас используете. Как правило многие администраторы сайтов устанавливают несколько шаблонов сайтов но используется всего один. Поэтому редактировать следует тот который используется.</p>
<p>Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)</p>
<p>Выглядит это так:</p>
<p>Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: <b>single.php, index.php и page.php, category.php
</b> Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)</p>
<p><b>Затем берём код:
</b></p>
<p><b><span><div class="breadcrumb">
</span>
</b></p>
<p><b><span><?php
</span>
</b></p>
<p><b><span>if(function_exists("bcn_display"))
</span>
</b></p>
<p><b><span>{
</span>
</b></p>
<p><b><span>bcn_display();
</span>
</b></p>
<p><b><span>}
</span>
</b></p>
<p><b><span>?>
</span>
</b></p>
<p><b><span></div>
</span>
</b></p>
<p>И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (<b>header
</b>):</p>
<p><img src='https://i0.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_191416.png' align="center" width="100%" loading=lazy></p>
<p>Естественно сохраняем каждый изменённый файл. После чего плагин Breadcrumb NavXT начнёт работать.</p>
<p>Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.</p>
<p>Но бывают случаи когда дизайн вашей темы сайта не совпадает с дизайном отображаемой строки Хлебных крошек.</p>
<h2>В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.</h2>
<p>Делается это так. <b>Берём этот код:
</b></p>
<p><b><span>.breadcrumb {
</b>
</p>
<p><b><span>font:bolder 12px "Trebuchet MS", Verdana, Arial;
</span>
</b>
</p>
<p><b>padding-bottom: 10px;
</b>
</p>
<p><b><span>}
</b>
</p>
<p><b><span>.breadcrumb a{
</b>
</p>
<p><b><span>color: #1B7499;
</b>
</p>
<p><b><span>}
</b>
</span><span><b>.breadcrumb a:hover {
</b>
</p>
<p><b><span>color: #EF0E0E;
</b>
</p>
<p><b><span>}
</b>
</p>
<p>Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке <b>"Таблица стилей"
</b> вашей темы</p>
<p><img src='https://i1.wp.com/minaev.biz/wp-content/uploads/2015/06/2014-01-09_192714.png' height="337" width="227" loading=lazy></p>
<p>… и вставляем код в самом низу редактора</p>
<p>… сохраняемся, нажав <b>"Обновить файл"
</b> Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.</p>
<p>Ну вот, теперь пожалуй всё.</p>
<p>Всем привет!</p>
<p>Еще одним способом улучшения внутренней перелинковки и юзабилити сайта являются хлебные крошки. Такое название данный вид навигации по сайту приобрел благодаря сказке братьев Гримм про Гензель и Гретель. Если помните, для того, чтоб найти дорогу домой, дети оставляли на дорожке хлебные крошки. Точно также одноименный метод навигации не даст пользователям заблудиться на вашем сайте. Подробнее о назначении и способах добавления хлебных крошек на блог пойдет речь в сегодняшней статье.</p>
<i>
</i>
<h2>Значение и пример хлебных крошек</h2>
<p>Для того чтоб вы имели представление о том, как выглядят хлебные крошки на сайте, приведу пример со своего блога:</p>
<p><img src='https://i2.wp.com/pro-wordpress.ru/wp-content/uploads/2015/01/bread1.png' align="center" width="100%" loading=lazy></p>
<p>Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.</p>
<p>Чаще всего такую цепочку можно найти под шапкой сайта, непосредственно перед заголовком статьи.</p>
<p>Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: <i>Главная страница -> Раздел -> Название статьи
</i>. Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: <i>Главная страница –> Раздел –> Подраздел –> Название статьи
</i>.</p>
<p>Кроме навигации по сайту, в SEO хлебные крошки также играют не последнюю роль. Они улучшают юзабилити сайта, перелинковку, также иногда они могут попасть в . Это позволит повысить кликабельность в выдаче, а также поможет поисковикам быстрее распознать структуру вашего ресурса. Для этого нужна микроразметка хлебных крошек. О том, как ее сделать, поговорим ниже.</p>
<h2>Хлебные крошки: как сделать на своем блоге?</h2>
<p>Для того чтоб добавить на Вордпресс хлебные крошки, можно использовать плагин, либо написать необходимый код для их вывода.</p>
<p>Для начала рассмотрим, как вывести хлебные крошки с php-кодом. Сразу скажу, что ниже будет приведен этот же код, но с элементами микроразметки, советую сразу взять .</p>
<p>Вот образец кода, который нужно вставить в файл functions.php:</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
</td><td class="code"> <span>"<div class="breadcrumb">Pro-wordpress » </div>
<div class="breadcrumb">"
</span>
term_id
)
.
"">
<span>"
.
$categories
[
0
]
->
name
.
" » "
</span>;
}
echo
<span>"</div>
<div class="breadcrumb">
"
;
echo
the_title()
;
echo
"</div>"
</span>;
}
</td>
</tr></table><p><div class="breadcrumb">Pro-wordpress » </div>
<div class="breadcrumb">term_id) . "">
". $categories->name . " » ";
}
echo "</div>
<div class="breadcrumb">
";
echo the_title();
echo "</div>";
}</p>
<p>Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
</td><td class="code"> <div class="breadcrumbs">
<?php
my_breadcrumb()
;
?>
</div>
</td>
</tr></table><p><div class="breadcrumbs">
<?php
my_breadcrumb();
?>
</div></p>
<p>После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в styles.css такой код:</p>
<p>Breadcrumbs{
margin: -5px 0 5px 3px; /* отступы */
overflow: hidden;
}
.breadcrumbs a {
color: #34a6d2; /* цвет ссылок - голубой */
text-decoration: underline;
}
.breadcrumb > span {
color: #000; /* цвет конечного пункта - черный */
}
.breadcrumb{
float:left;
}</p>
<p>Тут указаны цвет и размеры шрифтов, отступы, цвет ссылок при наведении курсора и без него. Все эти значения вы можете заменять своими, экспериментировать.</p>
<h2>Хлебные крошки на WordPress: плагин</h2>
<p>Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.</p>
<p>После установки в настройках вы сможете задать вариант пути (рубрики, даты, метки), максимальную длину заголовка, символы между разделами. Кроме того, можно отключить вывод названия страницы, на которой находится посетитель, чтобы не дублировать заголовок статьи. Для того чтобы хлебные крошки отображались на странице, вам опять-таки нужно прописать код в файле single.php или header.php.</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
</td><td class="code"> <div class="breadcrumb">
<?php
if
(function_exists
("bcn_display"
)
)
{
bcn_display()
;
}
?>
</div>
</td>
</tr></table><p><div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div></p>
<p>Внести изменения в стили можно по аналогии с тем, как это было описано выше.</p>
<h2>Микроразметка хлебных крошек</h2>
<p>Мы уже говорили о том, насколько важна . Хлебные крошки в сниппете моего блога выглядят так:</p>
<p><img src='https://i2.wp.com/pro-wordpress.ru/wp-content/uploads/2015/01/bread2.png' align="center" width="100%" loading=lazy></p>
<p>Такой вид более понятен и приятен для пользователя, нежели просто url страницы.</p>
<p>Поисковые системы могут автоматически принять ту структуру хлебных крошек, которая сделана на вашем сайте и соответственно выводить ее в сниппете. Для того чтоб это проверить нужно воспользоваться валидаторами Гугл и Яндекс.</p>
<p>Если поисковики не распознали хлебные крошки, тогда им нужно помочь. На своем блоге я использую код, приведенный в начале статьи. В него я добавила элементы микроразметки. Если вы тоже выводите хлебные крошки php-кодом, можете заменить свой код на этот:</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</td><td class="code"> function
my_breadcrumb()
{
echo
<span>"<div xmlns:v="https://rdf.data-vocabulary.org/#">
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Pro-wordpress</span> » </div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">"
</span>;
$categories
=
get_the_category()
;
if
($categories
[
0
]
)
{
echo
"
term_id
)
.
<span>"" itemprop="url">
<span itemprop="title">"
</span>.
$categories
[
0
]
->
name
.
" » "
</span>;
}
echo
<span>"</div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">"
</span>;
echo
the_title()
;
echo
"</div>
</div>"
</span>;
}
</td>
</tr></table><p>function my_breadcrumb() {
echo "<div xmlns:v="https://rdf.data-vocabulary.org/#">
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Pro-wordpress</span> » </div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">";
$categories = get_the_category();
if($categories){
echo "term_id) . "" itemprop="url">
<span itemprop="title">". $categories->name . "</span> » ";
}
echo "</div>
<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
<span itemprop="title">";
echo the_title();
echo "</span></div>
</div>";
}</p>
<p>Делать микроразметку для навигационной цепочки, созданной с помощью плагина, я не пробовала. Но, думаю, это не сложно. Можно по-аналогии с моим кодом видоизменить код плагина. Давайте разберем приведенный код.</p>
<p>Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».<br>
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .</p>
<p>itemprop="url" – определяет значение url, его нужно добавить в каждый тег a</p>
<p>itemprop="title – определяет значение заголовка элемента цепочки</p>
<p>Весь код оборачивается в div с параметром xmlns:v="https://rdf.data-vocabulary.org/#"> , чтобы подключить словарь schema.org.</p>
<p>После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.</p>
<p>Если у вас возникнут дополнительные вопросы по теме данной статьи, обязательно спрашивайте в комментариях.</p>
<p>Напоследок предлагаю посмотреть видео о внутренней перелинковке.</p>
<p><span class="KMZZBoSKP2c"></span></p>
<p>Навигация «Хлебные крошки» позволяет посетителю сайта понять, в каком месте сайта он сейчас находиться в данный момент. Обычно такая навигация состоит из линии ссылок, которые расположены цепочкой под шапкой сайта.</p><p>Такая навигация идет с главной страницы сайта в рубрики, на страницы со статьями, на отдельные страницы сайта. Все ссылки в хлебных крошках являются активными, за исключением последней, потому что именно в этом месте сейчас находится посетитель и ссылка на эту страницу сайта не нужна.</p><p>Навигация хлебные крошки дополняет еще одним элементом внутреннюю перелинковку сайта и позволяет посетителю удобно перемещаться по страницам и разделам сайта, повышая этим поведенческие факторы.</p><p>Термин «Хлебные крошки» (по-английски Breadcrumbs) был взят из немецкой сказки братьев Гримм. В этой сказке дети отмечали свой путь в лес, оставляя после себя на своем пути хлебные крошки, чтобы ориентируясь по оставленным хлебным крошкам, у них оставалась возможность вернуться домой.</p><p>На своем блоге я уже описывал установку хлебных крошек с помощью плагина .</p><p>Хлебные крошки можно установить на свой сайт и без помощи специального плагина. В этом есть свои преимущества, так как при этом не будет повышаться нагрузка на ваш сайт. Поэтому желательно, там, где возможно, заменять используемые на сайте плагины, вставкой кода и различными скриптами.</p><p>Внимание! Перед установкой кода сделайте резервные копии файлов, в которые вы будете вставлять коды, чтобы в случае неполадок восстановить работоспособность вашей темы WordPress.</p><p>Для установки хлебных крошек вам необходимо будет вставить несколько кодов в соответствующие файлы вашей темы.</p><p>Устанавливать навигацию хлебные крошки на главную страницу блога не требуется. Посетитель, набирая в поиске название сайта, в абсолютном большинстве случаев, итак в выдаче будет направлен на главную страницу сайта.</p><p>Если посетитель пришел с поиска на конкретную страницу, то он будет видеть с помощью хлебных крошек свое местонахождение на сайте. Главная страница при этом будет гиперссылкой и посетитель сможет перейти на главную страницу, если воспользуется для этого навигацией хлебные крошки.</p><h2>Установка хлебных крошек на сайт</h2><p>Два варианта кода потребуется вставить в следующие файлы темы: «Функции темы (functions.php)», «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».</p><p>Первый код нужно будет вставить в файл «Функции темы (functions.php)», установленной на вашем блоге темы WordPress.</p><p> // хлебные крошки
function dimox_breadcrumbs() {
$showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
$delimiter = "»"; // разделить между "крошками"
$home = "Главная"; // текст ссылка "Главная"
$showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать
$before = "<span>"; // тег перед текущей "крошкой"
$after = "
</span>"; // тег после текущей "крошки"
global $post;
$homeLink = get_bloginfo("url");
if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo "<div id="crumbs">" . $home . "</div>";
} else {
echo "<div id="crumbs">" . $home . " " . $delimiter . " ";
if (is_category()) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, " " . $delimiter . " "));
echo $before . single_cat_title("", false). $after;
} elseif (is_day()) {
echo "" . get_the_time("Y") . " " . $delimiter . " ";
echo "" . get_the_time("F") . " " . $delimiter . " ";
echo $before . get_the_time("d") . $after;
} elseif (is_month()) {
echo "" . get_the_time("Y") . " " . $delimiter . " ";
echo $before . get_the_time("F") . $after;
} elseif (is_year()) {
echo $before . get_the_time("Y") . $after;
} elseif (is_single() && !is_attachment()) {
if (get_post_type() != "post") {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo "" . $post_type->labels->singular_name . " " . $delimiter . " ";
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat;
echo get_category_parents($cat, TRUE, " " . $delimiter . " ");
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}
} elseif (!is_single() && !is_page() && get_post_type() != "post" && !is_404()) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif (is_attachment()) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat;
echo get_category_parents($cat, TRUE, " " . $delimiter . " ");
echo "" . $parent->post_title . " " . $delimiter . " ";
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} elseif (is_page() && !$post->post_parent) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} elseif (is_page() && $post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs = "ID) . "">" . get_the_title($page->ID) . "";
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . " " . $delimiter . " ";
if ($showCurrent == 1) echo $before . get_the_title() . $after;
} elseif (is_search()) {
echo $before . "Результаты поиска по запросу "" . get_search_query() . """ . $after;
} elseif (is_tag()) {
echo $before . "Записи с тегом "" . single_tag_title("", false) . """ . $after;
} elseif (is_author()) {
global $author;
$userdata = get_userdata($author);
echo $before . "Статьи автора " . $userdata->display_name . $after;
} elseif (is_404()) {
echo $before . "Error 404" . $after;
}
if (get_query_var("paged")) {
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 ")";
}
echo "</div>";
}
} // end dimox_breadcrumbs()
</p><p>Для вставки этого кода в файл установленной на вашем сайте темы, нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор => «Шаблоны», и там нажать на пункт «Функции темы (functions.php)».</p><p>В окне «Редактировать темы», в файл «Функции темы ((functions.php)» потребуется вставить первый код в самом верху файла, после <?php, как это показано стрелкой на изображении.</p><p><img src='https://i1.wp.com/vellisa.ru/wp-content/uploads/2012/11/24.png' width="100%" loading=lazy></p><p>Название записи домашней страницы - «Главная», можно изменить по вашему желанию на название вашего сайта. Для этого в соответствующей строке кода нужно заменить слово «Главная» на название вашего сайта.</p><p>Если вы хотите, чтобы на странице сайта, в навигации хлебные крошки не отображалось название той страницы, на которой вы находитесь в данный момент, то для этого нужно в следующей строке поменять цифру «1» на цифру «0».</p><p>После вставки кода и сделанных в нем по вашему желанию изменений, нажимаете на кнопку «Обновить файл».</p><p>Следующий код нужно будет вставить в несколько файлов установленной у вас темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».</p><p> <?php if (function_exists("dimox_breadcrumbs")) dimox_breadcrumbs(); ?>
</p><p>В файл «Одна запись (single.php)», отвечающий за страницам со статьями, код вставляется в место, показанное на изображении.</p><p><img src='https://i1.wp.com/vellisa.ru/wp-content/uploads/2012/11/33.png' align="center" width="100%" loading=lazy></p><p>После вставки этого кода нужно нажать на кнопку «Обновить файл».</p><p>В файл «Архивы (arhvie.php)», вставляете этот код, в место, которое выделено в рамке на изображении.</p><p><img src='https://i1.wp.com/vellisa.ru/wp-content/uploads/2012/11/43.png' align="center" width="100%" loading=lazy></p><p>Потом нажимаете на кнопку «Обновить файл».</p><p>В файл «Результаты поиска (search.php)», отвечающий за поиск по сайту, вставляете код в место, указанное на изображении.</p><p><img src='https://i0.wp.com/vellisa.ru/wp-content/uploads/2012/11/53.png' align="center" width="100%" loading=lazy></p><p>После того, как вы вставили код, нажимаете на кнопку «Обновить файл».</p><p>В файл «Шаблон страницы (page.php)», отвечающий за статические страницы, вставляете код, как это показано на изображении.</p><p><img src='https://i2.wp.com/vellisa.ru/wp-content/uploads/2012/11/63.png' align="center" width="100%" loading=lazy></p><p>После установки кода нажимаете на кнопку «Обновить файл».</p><p>Все, теперь хлебные крошки установлены на вашем сайте. Вам нужно открыть свой сайт, и вы увидите установленную навигацию. Если в это время ваш сайт был открыт, то вам потребуется обновить страницу, чтобы увидеть сделанные изменения.</p><p>Можно еще добавить такой код в файл «Таблица стилей (style.ccs)»:</p><p> /* Хлебные крошки */
#crumbs {
padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%;
border-radius:0 0 8px 8px;
-moz- border-radius:0 0 8px 8px;
-webkit- border-radius:0 0 8px 8px;}
</p><p>Этот код вставляется в самом конце файла «Таблица стилей (style.ccs)» для изменения внешнего вида установленной навигации хлебные крошки. Код для вставки в файл «Таблица стилей (style.php)» может иметь и другие характеристики (размеры, отступы и т. д.). Вставлять такой или подобный код на свой блог совсем не обязательно.</p><p>На своем сайте, в предыдущем шаблоне, я не стал устанавливать этот код, мне больше понравился внешний вид хлебных крошек без этих улучшений.</p><h2>Выводы статьи</h2><p>Теперь на вашем блоге установлены Хлебные крошки без использования плагина. Создателем этой функции является известный блогер Dimox (Дмитрий).</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
<div class="storenumber"></div>
<div class="clr5"></div>
</div>
</div>
<div class="bsep"> </div>
<div class="recklbigg">
</div>
<div class="popular">
<div class="kontrg">Статьи по теме:</div>
<div class="clr5"></div>
<a href="/chto-oznachaet-keshirovanie-chto-takoe-keshirovannye-dannye-i-keshirovanie.html">Что такое кэшированные данные и кэширование?</a>
<a href="/obzor-nakladnyh-shumoizoliruyushchih-naushnikov-xiaomi-mi-headphone-comfort--.html">Удобство использования на высоком уровне</a>
<a href="/optimalnyi-diapazon-vosproizvodimyh-chastot-dlya-tylovyh-kolonok-podrobnaya.html">Подробная расшифровка некоторых характеристик акустики</a>
<a href="/kak-naiti-ukradennyi-noutbuk-s-pomoshchyu-antivirusa-kak-naiti-poteryannyi.html">Как найти потерянный, украденный ноутбук</a>
<a href="/udalit-zashchitu-ot-zapisi-na-fleshke-kak-snyat-s-fleshki-zashchitu-ot.html">Как снять с флешки защиту от записи</a>
</div>
</div> </div>
</div>
<div class="lefting">
<div class="search-t">
<form method="get" action="/">
<input type="text" name="s" class="search" /> <input type="image" onclick="submit();" value="Поиск" src="/templates/112stroyblock11UTF8/images/pisi1.jpg" class="toptop" />
</form>
</div>
<div class="ppip">
<div class="dopletitle">Новое:</div>
<div class="clr"></div>
<div class="naxodit">
<div class="mainpopular">
<a href="/obzor-dnya-vernee-thor-plus-eshche-tonshe-yarche-i-avtonomnee-smartfon-vernee-thor.html"><img src="https://i0.wp.com/img.mysku-st.ru/uploads/images/02/55/13/2017/10/02/4dd2b3.jpg" / loading=lazy></a>
<div class="znal"><a href="/obzor-dnya-vernee-thor-plus-eshche-tonshe-yarche-i-avtonomnee-smartfon-vernee-thor.html">Еще тоньше, ярче и автономнее</a></div>
</div>
<div class="mainpopular">
<a href="/android-peredat-melodiyu-po-blyutuz-kak-peredat-muzyku-po-blyutuzu.html"><img src="https://i0.wp.com/androiday.ru/uploads/posts/2013-07/1373462923_130.png" / loading=lazy></a>
<div class="znal"><a href="/android-peredat-melodiyu-po-blyutuz-kak-peredat-muzyku-po-blyutuzu.html">Как передать музыку по блютузу?</a></div>
</div>
<div class="mainpopular">
<a href="/kompaniya-huawei---krupneishii-mirovoi-proizvoditel-istoriya-huawei-kak-kitaiskii.html"><img src="https://i1.wp.com/4huawei.ru/wp-content/uploads/2013/02/SHtabkvartira-Huawei.png" / loading=lazy></a>
<div class="znal"><a href="/kompaniya-huawei---krupneishii-mirovoi-proizvoditel-istoriya-huawei-kak-kitaiskii.html">История Huawei: Как китайский бренд меняет...</a></div>
</div>
<div class="mainpopular">
<a href="/zagruzka-sistemy-s-fleshki-bez-ustanovki-sposoby-zagruzki-os-s-fleshki.html"><img src="https://i0.wp.com/vindavoz.ru/uploads/posts/2013-01/thumbs/1357529723_download_tool_2.jpg" / loading=lazy></a>
<div class="znal"><a href="/zagruzka-sistemy-s-fleshki-bez-ustanovki-sposoby-zagruzki-os-s-fleshki.html">Способы загрузки ос с флешки</a></div>
</div>
<div class="mainpopular">
<a href="/svetodiodnaya-podsvetka-dlya-klaviatury-kak-sdelat-na-noutbuke.html"><img src="https://i2.wp.com/composs.ru/wp-content/uploads/2017/07/podsvetka_klaviatury3.jpg" / loading=lazy></a>
<div class="znal"><a href="/svetodiodnaya-podsvetka-dlya-klaviatury-kak-sdelat-na-noutbuke.html">Как сделать на ноутбуке подсветку клавиатуры</a></div>
</div>
<div class="mainpopular">
<a href="/anvil-studio-noty-s-mikrofona-sozdanie-midi-melodii-v-programme-anvil-studio-kak-sozdat.html"><img src="https://i0.wp.com/soft-file.ru/wp-content/uploads/2017/02/anvil-studio-2-150x178.jpg" / loading=lazy></a>
<div class="znal"><a href="/anvil-studio-noty-s-mikrofona-sozdanie-midi-melodii-v-programme-anvil-studio-kak-sozdat.html">Создание MIDI мелодии в программе Anvil Studio</a></div>
</div>
<div class="clr"></div>
</div>
<div class="dopletitle">Популярное:</div>
<div class="clr"></div>
<div class="mainpopular">
<a href="/css3-effekty-pri-navedenii-hover-effekty-dlya-izobrazhenii-na-chistom.html"><img src="https://i0.wp.com/design-mania.ru/wp-content/uploads/2018/03/hover-css2.jpg" / loading=lazy></a>
<div class="znal"><a href="/css3-effekty-pri-navedenii-hover-effekty-dlya-izobrazhenii-na-chistom.html">Hover-эффекты для изображений на чистом CSS3...</a></div>
</div>
<div class="mainpopular">
<a href="/varianty-perenosa-strok-varianty-perenosa-strok-kak-pereiti-na-strochku-nizhe.html"><img src="https://i0.wp.com/comp-profi.com/wp-content/uploads/files/150917/perenos-slov-v-yachejke-excel/2.jpg" / loading=lazy></a>
<div class="znal"><a href="/varianty-perenosa-strok-varianty-perenosa-strok-kak-pereiti-na-strochku-nizhe.html">Варианты переноса строк Как перейти на строчку...</a></div>
</div>
<div class="mainpopular">
<a href="/kak-pomenyat-klavishi-mestami-na-klaviature-nadoela-standartnaya.html"><img src="https://i1.wp.com/wincore.ru/uploads/posts/2017-02/thumbs/1487593691_image-33152516.jpg" / loading=lazy></a>
<div class="znal"><a href="/kak-pomenyat-klavishi-mestami-na-klaviature-nadoela-standartnaya.html">Надоела стандартная раскладка клавиш?</a></div>
</div>
<div class="mainpopular">
<a href="/samye-interesnye-prilozheniya-dlya-android-reiting-prilozheniya-dlya-android.html"><img src="https://i1.wp.com/fb.ru/misc/i/gallery/28277/1149459.jpg" / loading=lazy></a>
<div class="znal"><a href="/samye-interesnye-prilozheniya-dlya-android-reiting-prilozheniya-dlya-android.html">Приложения для Android: обучающие программы для...</a></div>
</div>
<div class="mainpopular">
<a href="/power-bi-otchet-s-1s-bi---sistemy-kriterii-dlya-ocenki-kachestva-it-resheniya.html"><img src="https://i0.wp.com/catalog.mista.ru/upload/iblock/326/326821d426d8d447e5ff0b2847b846ff.png" / loading=lazy></a>
<div class="znal"><a href="/power-bi-otchet-s-1s-bi---sistemy-kriterii-dlya-ocenki-kachestva-it-resheniya.html">Power bi отчет с 1с. BI - системы. Критерии для...</a></div>
</div>
<div class="mainpopular">
<a href="/vklyuchit-yusb-v-biose-na-noutbuke-pochemu-ne-rabotayut-usb-porty-na.html"><img src="https://i2.wp.com/f1comp.ru/wp-content/uploads/2018/02/01-1.png" / loading=lazy></a>
<div class="znal"><a href="/vklyuchit-yusb-v-biose-na-noutbuke-pochemu-ne-rabotayut-usb-porty-na.html">Почему не работают USB порты на компьютере?</a></div>
</div>
<div class="clr"></div>
</div>
<div class="clr20"></div>
<div align='center'>
</div>
</div>
</div></div>
<div id="nav-container">
<div id="yandex_rtb_R-A-195807-2"></div>
<div class="footer">
<noindex>
<div class="footercopy">
optest.ru Copyright © 2024 <br />
</div>
</noindex>
</div>
</div></div>
</body>
</html>
