Хлебные крошки WordPress — настройка плагина Breadcrumb NavXT. Wordpress, "хлебные крошки": обзор плагинов
Приветствую вас, уважаемые читатели блога сайт. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для
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). И вставьте данный код практически в самый низ и обновите файл.</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>Термином «хлебные крошки» называется иерархическая система навигации меню, представленная в форме цепочки ссылок. Она позволяет посетителям понять, в каком разделе блога они находятся. На Wordpress «хлебные крошки» часто используются в качестве вспомогательной навигации, с помощью которой пользователи перемещаются по страницам сайта. В этой статье рассказывается о том, как вывести ссылки в блоге посредством плагинов.</p><h2>Функции</h2><p>Перед тем как добавить в Wordpress «хлебные крошки», нужно понять, для чего это делается. С помощью вспомогательного меню можно указать посетителю, где находится заметка или товар, которые он рассматривает в данный момент. При необходимости пользователь мгновенно возвращается в нужную категорию, не прибегая к поиску более сложных элементов навигации. Таким способом можно повысить удобство использования сайта.</p><p>«Хлебные крошки» страниц Wordpress позволяют создать правильную перелинковку. Это мероприятие является одним из самых высокоэффективных способов продвижения блога. С помощью «хлебных крошек» можно распределять ссылочный вес между главной страницей, категориями и статьями.</p><p>Поисковая система Google уже начала отображать вспомогательную навигацию под названиями сайтов в результатах выдачи. Это предоставляет веб-ресурсу возможность переместиться на верхние позиции. Подробное описание процесса дано в официальной справке компании Google. Не все так легко, как кажется. Поисковая система не всегда может понять, нужно ли отображать «хлебные крошки» Wordpress в выдаче. <br></p><h2>Стоит ли добавлять вспомогательную навигацию на сайт</h2><p>Если пользователю удается разбить тему блога на 3-4 рубрики, то устанавливать блок со ссылками необязательно. Структура веб-ресурса останется простой и понятной. В этом случае не рекомендуется использовать «хлебные крошки» Wordpress. Вспомогательную навигацию нужно добавлять, только если сайт имеет сложную структуру.</p><p>«Хлебные крошки» в Wordpress выводятся на страницы блога с помощью плагинов. Существует множество расширений, позволяющих устанавливать дополнительный блок со ссылками на сайте. В этом обзоре будут рассмотрены только некоторые из них. <br></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21132/1785144.jpg' width="100%" loading=lazy></p><h2>Breadcrumb NavXT</h2><p>Этот программный продукт является самым популярным и мощным плагином, позволяющим создавать в Wordpress «хлебные крошки». С его помощью можно генерировать вспомогательное меню, которое будет широко настраиваемым. Плагин подойдет как новичкам, так и специалистам в сфере Wordpress. Он обладает большим количеством функций. Пользователь может задавать уникальные классы и идентификаторы для продвинутой стилизации вспомогательного меню.</p><p>Плагин имеет поддержку нескольких языков. К недостаткам следует отнести отсутствие встроенных тем оформления. Этот недочет можно исправить путем использования стилей, предлагаемых в сообществах. Последние версии программного продукта на русском языке. Авторы проекта предлагают работать с большим количеством тонких настроек.</p><p>При необходимости можно включить функцию генерирования кода в соответствии с принятым Google стандартом RDFa. Подобная разметка панели вспомогательного меню не будет гарантией того, что система применит «хлебные крошки» при создании поискового сниппета, однако шансы на это существенно возрастут. Ссылки отображаются только в виджете. Добавить вспомогательное меню в начало страницы не удастся. Стоит учитывать, что «хлебные крошки» не поддерживаются поисковой системой «Яндекс». <br></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21132/1785145.jpg' width="100%" loading=lazy></p><h2>Yoast Wordpress SEO</h2><p>Создание вспомогательного меню - это одна из функций данного программного продукта. Большое количество инструментов позволяет выполнять расширенную SEO-оптимизацию. Этот плагин используют люди, настроенные на качественное продвижение блога. Редактирование блока со ссылками у некоторых владельцев сайтов может вызвать затруднения. Чтобы выполнить эту задачу, нужно открыть административную панель Wordpress, перейти в раздел «SEO» и выбрать строку «дополнительно».</p><p>Будет загружена страница с дополнительными настройками плагина. Здесь необходимо перейти на вкладку «навигационная цепочка». Пункт «включить» следует отметить галочкой. Для появления вспомогательного меню на сайте требуется добавить в код блога PHP-функцию, отвечающую за вывод. В поле «разделитель» можно ввести любой символ, который поддерживается HTML5.</p><p>В качестве текста ссылки на основную страницу сайта следует указать домен или просто слово «Главная». В поле «основной префикс» нужно вписать несколько букв или символов. Они будут отображаться перед всеми ссылками вспомогательного меню. Таким же образом заполняются поля префиксов навигационных цепочек для архивов и страниц с результатами поисковой выдачи. В подразделе «таксономия» необходимо выбрать пункт «рубрики», «метки» или «форматы». <br></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21132/1785146.jpg' width="100%" loading=lazy></p><h2>Breadcrumb Trail</h2><p>С помощью плагина от Джастина Тэдлока можно быстро создавать в Wordpress «хлебные крошки». Начинавшееся с небольшого скрипта, это программное обеспечение переросло в продвинутую систему.</p><p>Плагин позволяет выводить вспомогательное меню для любой структуры. Он автоматически выполняет поиск постоянных ссылок для блога. Основываясь на полученной структуре, плагин выводит на сайт «хлебные крошки». Ссылки добавляются на каждую страницу. Плагин автоматически обнаруживает таксономии, типы заметок и т.п.</p><h2>Yummi «хлебные крошки»</h2><p>Этот программный продукт можно установить прямо из панели администратора в Wordpress. Для этого следует перейти на страницу «плагины». Затем нужно кликнуть по кнопке «добавить новый», ввести название в строку поиска, нажать Enter и установить ПО. После активации необходимо настроить плагин. С этой задачей справится даже начинающий пользователь.</p><p>Сначала нужно указать тип установки блока со ссылками. Чтобы «хлебные крошки» Wordpress плагин вывел автоматически, следует выбрать соответствующий пункт. Если пользователь укажет тип «ручная установка», то он должен будет вставить код на сайт самостоятельно. Затем требуется выбрать внешний вид блока со ссылками. Далее следует указать, на каких страницах будут отображаться «хлебные крошки».</p><p>При желании можно включить показ всплывающих подсказок и ссылки Home. Пользователю также следует выбрать стиль шрифта для «хлебных крошек» и основных категорий. Здесь же находится опция включения атрибута title для ссылок. Чтобы удалить со страниц сайта информацию об авторе плагина, необходимо указать пункт «спрятать» рядом с графой «ваша благодарность» и сохранить результат. Можно заметить, что настройки плагина достаточно просты и понятны. <br></p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21132/1785148.jpg' width="100%" loading=lazy></p><h2>Really Simple Breadcrumb</h2><p>Этот программный продукт - еще одно простое решение для Wordpress. Плагин работает корректно и без ошибок, отображается согласно коду используемой темы. Установить программное обеспечение можно через панель администратора. Для того чтобы «хлебные крошки» отображались на статических страницах, необходимо прописать над строкой вывода заголовка соответствующий код. Если пользователю нужно изменить тип разделителя, то он может редактировать 17 строчку файла breadcrumb.php.</p><p>В этом варианте добавления вспомогательного меню отсутствует микроразметка. С нею «хлебные крошки» будут отображаться в сниппете поисковой выдачи Google вместо URL. Это повысит кликабельность. Поэтому пользователю необходимо добавить микроразметку или использовать другой вариант. <br></p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21132/1785150.jpg' width="100%" loading=lazy></p><h2>DP RDFa Breadcrumb Generator</h2><p>Плагин был создан для поисковой оптимизации сайта. Как и в случае с Yoast Wordpress SEO, «хлебные крошки» отображаются в сниппете выдачи автоматически.</p><p>После установки программного обеспечения нужно открыть панель администратора и перейти в настройки. Затем следует выбрать плагин. В появившемся окне создатель рекламирует свой продукт. Далее идет код для копирования. Его необходимо вставить там, где нужно отобразить цепочку навигации.</p>
<p>Flector
5
<h1></h1>
<p><b>Breadcrumb NavXT
</b> это самый продвинутый и популярный плагин "<b>хлебных крошек
</b>" для блога на <b>WordPress
</b>. У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель "<b>хлебных крошек
</b>" в разметке <b>RDFa
</b>, которая поможет поисковикам найти и использовать эту панель при формировании сниппета.</p>
<tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/6.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/7.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i1.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/8.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i2.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/9.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i0.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/10.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><tr><td valign="top" width="18">
</td>
<td valign="top" width="465">
<p><img src='https://i2.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/11.gif' width="100%" loading=lazy></p>
</td>
<td valign="top" width="44">
</td>
</tr><p>Эти стили подойдут к дизайну большинства шаблонов, но никто вам не мешает поиграться с цветами, чтобы получить что-то типа:</p>
<p><b>Breadcrumb NavXT
</b> это очень настраиваемый плагин. При желании можно настроить его так, чтобы он генерировал код "<b>хлебных крошек
</b>" в соответствии с принятым гуглом стандартом <b>RDFa
</b>. Такая разметка панели "<b>хлебных крошек
</b>" не является гарантией того, что гугл применит их при формировании поискового сниппета, но шансы на это резко возрастут.</p>
<p>Как это сделать? Первым делом, поменяйте код вызова панели на:</p>
<p><span typeof="v:Breadcrumb">
Главная
</p></p>
<table><tr><td class="code"> <
span typeof=
"v:Breadcrumb"
>
<
a href=
"%link%"
rel=
"v:url"
property=
"v:title"
>%
htitle%</
a>
</
span>
</td>
</tr></table><p><span typeof="v:Breadcrumb">
%htitle%
</p>
<p>И так для каждой ссылки в панели навигации. Я не буду заставлять вас вручную менять каждую ссылку в настройках плагина - вот вам готовый настроек (правая кнопка мышки и "<b>Сохранить объект как
</b>"). Нажмите "<b>Помощь
</b>", затем кликните на "<b>Импорт/Экспорт/Сброс
</b>" и выберите скаченный файл для загрузки и импорта. В данном файле экспорта использованы настройки плагина по умолчанию плюс <b>RDFa
</b> разметка и ничего больше. При желании вы можете настроить плагин под себя, но не трогайте в настройках все, что относится к <b>RDFa
</b>.</p>
<p>После этого плагин начнет генерировать правильный код панели "<b>хлебных крошек
</b>", пригодный для поисковиков. При желании можно проверить выводимый код . Если все правильно, то вам визуально покажут, как примерно будет выглядеть ваш сниппет в выдаче:</p>
<p><img src='https://i0.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/13.gif' width="100%" loading=lazy></p>
<p>Главная страница в этом превью не отображается, но в реальном поиске она, конечно, будет присутствовать.</p>
<p>Кстати, формально плагин поддерживает разметку для "<b>хлебных крошек
</b>". Но почему-то только в виджете и только разметку "<b>schema.org
</b>". Однако поддерживает он ее криво - валидацию у гугла такая разметка не проходит:</p>
<p><img src='https://i2.wp.com/wordpressplugins.ru/pics/breadcrumb-navxt/14.gif' width="100%" loading=lazy></p>
<p>Но в любом случае плагин поддерживает разметку только в виджете, что вряд ли может кого устроить, так как "<b>хлебные крошки
</b>" выводят, как правило, в начале страницы, а вовсе не в сайдбаре.</p>
<p>К сожалению, на данный момент "<b>хлебные крошки
</b>" не поддерживаются яндексом . Причем ни в каком виде – что в размеченном, что нет. Жаль, конечно, но тут ничего не поделаешь.Скачать плагин версии 6.2.1
(всего скачено <b>6 988 695
</b> раз)<br></p>
<p>Понравился пост? Подпишись на обновления по или</p>
<p>Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу рассказать о плагине для WordPress, который используются на моем блоге сразу для двух очень важных целей.</p><p>Во-первых, он облегчает навигацию, а во-вторых, решает очень важную проблему — создание правильной внутренней перелинковки. Чтобы не затягивать интригу сразу скажу, что речь пойдет о плагине Breadcrumb NavXT. Но обо все по порядку.</p><p>Я уже много говорил о необходимости создания надлежащей перелинковки страниц сайта для того, чтобы статический вес, передаваемый по любым внешним ссылкам, равномерно распределялся по всем вебстраницам проекта. Особенно это важно .</p><h2>Зачем нужны хлебные крошки в WordPress</h2><p>Продвижение по НЧ имеет ряд преимуществ, главное из которых (особенно важно для не коммерческих проектов) — не требуется вложения денежных средств, необходимых для покупки внешних ссылок. Связано это с тем, что по НЧ можно продвигаться только за счет одной лишь внутренней сайта и за счет создания правильной перелинковки, как было описано .</p><p>Кстати, для коммерческих проектов раскрутка по НЧ тоже имеет целый ряд преимуществ, основным из которых опять же является меньшая стоимость, но кроме этого посетители, пришедшие с выдачи по таким запросам, будут гораздо чаще конвертироваться в денежные знаки, нежели посетители, пришедшие по запросам средне и высокочастотным (в связи с неконкретность последних).</p><p>Основная мысль правильной линковки сводится к тому, чтобы статический вес, передаваемый на разные страницы сайта (больше всего внешних ссылок обычно ведет на главную), без проблем перетекал на те, которые непосредственно продвигаются по НЧ (там, где, собственно, расположены статьи).</p><p>Но идеальная круговая схема, описанная в приведенной статье, трудно осуществима в реальных условиях, поэтому хорошим вариантом будет сферическая схема линковки. Грубо говоря, такую схему можно утрировать до того, что чем больше будет внутренних ссылок, тем лучше будет распределяться статический вес. Это похоже на разветвленную кровеносную систему, позволяющую крови донести кислород до всех, даже самых отдаленных от легких, внутренних органов.</p><p>Вы можете вручную добавлять каждый раз при написании статей линки на другие материалы вашего же сайта, которые будут уместны. Правда очень серьезно подходите к создаваемому таким образом внутреннему анкор-листу для каждой из статей. Делать это нужно примерно так же, как и . Не стоит употреблять во всех ссылках на нее один и тот же неразбавленный ключ, ну вы понимаете, о чем я.</p><p>Это очень хороший способ, но его всегда будет не лишним расширить и дополнить с помощью автоматических методов.Одним из самых распространенных вариантов организации чего то подобного являются, так называемые, хлебные крошки, расширяющие возможности навигации по ресурсу, а так же создание блока ссылок на другие похожие материалы вашего проекта, схожие по тематике с данной статьей.</p><p>Сегодня я хочу подробно рассмотреть первый вариант, а вот про похожие материалы для Вордпресс в .</p><p>Для реализации хлебных крошек мы будем использовать плагин Breadcrumb NavXT. В принципе, вы можете использовать для этих целей и другие плагины WordPress, но мне больше приглянулись именно эти. Можно даже .</p><h3>Установка плагина Breadcrumb NavXT в Вордпресс</h3><p>Ладно, пора переходить непосредственно к установке и настройке плагина. Если вы вдруг не знаете что такое хлебные крошки, то ничего страшного. Собственно, я тоже по началу не знал, ибо термин этот взят из буржунета и связан с их буржуйской сказкой про Гензеля и Грету, которые использовали их для того, чтобы пометить путь.</p><p>В нашем понимании, этот элемент навигации по сайту нужно было бы назвать «нить Ариадны», ибо нам как-то ближе. Ну, да ладно, как назвали, так и назвали. Итак, они обычно отображаются где-нибудь в верхней части окна сайта и фактически представляют из себя путь до той статьи, которую вы в данный момент читаете.</p><p>Мне, например, очень нравится навигация с помощью крошек и я всегда стараюсь найти их строчку на любом сайте для того, чтобы понять, а где я, собственно, нахожусь и как перейти в тот раздел, где находится данная замечательная статья, чтобы почитать еще на ту же тему.</p><p>Ну что, вспомнили что такое хлебные крошки? Думаю, что вспомнили, а если нет, то посмотрите в самом верху этого окна под шапкой этого блога.</p><p>Для начала вам нужно будет скачать Breadcrumb NavXT <b>отсюда
</b> . Установка плагина на WordPress стандартная. Подключитесь к своему блогу по протоколу FTP (работа с клиентом FileZilla подробно описана ) и откройте на сервере папку:</p><p> /wp-content/plugins
</p><p>Распакуйте архив с Breadcrumb NavXT и скопируйте получившуюся в результате папку на сервер хостинга в директорию (/wp-content/plugins). Теперь нужно будет зайти в админку Вордпресса, выбрать из левого меню пункт «Плагины», а в открывшемся окне перейти на вкладку «Неактивно». Найдите строчку с нужным и щелкните по расположенной чуть ниже надписи «Активировать».</p><h2>Вызов Breadcrumb NavXT и настройка внешнего вида крошек</h2><p>Вот, собственно, и все. Теперь осталась еще одна существенная деталь: выбрать место в шаблоне (теме) WordPress, где будет выводиться строка с хлебными крошками, и вставить в это место код функции плагина Breadcrumb NavXT. Задача не совсем тривиальная для начинающего вебмастера, мало знакомого со структурой движка и работой его тем.</p><p>Но вас, пожалуй, это в тупик не поставит, т.к. вы всегда можете почитать , благо, что там ничего сложно нет.</p><p>Если вы уже знакомы с устройством тем и знаете назначение тех или иных шаблонов в ней, то мы продолжим. Но, в противном случае, все же советую вам хотя бы поверхностно ознакомиться с этим, используя указанный выше материал (или какой-либо другой).</p><p>Итак, наша задача состоит в том, чтобы определить те файлы из папки с используемой вами темой, в которые мы должны будем вставить код вызова крошек. А затем нужно будет определиться, в какое именно место кода будем вставлять это:</p><p> <div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div>
</p><p>Во-первых, вам нужно подключиться к вашем блогу по FTP и открыть папку с темой, которую вы в данный момент используете:</p><p>Wp-content/themes/название темы WordPress
</p><p>А теперь давайте вам расскажу, как сделал вывод хлебных крошек я сам, а вы сможете повторить все за мной, либо использовать свой вариант вставки.</p><p>Если попробовать наглядно представить предназначение шаблонов из темы, то получится примерно такой макет:</p><p>Из этого макета мы можем сделать вывод, что код вызова Breadcrumb NavXT нам нужно будет вставлять в те шаблоны, которые отвечают за вывод контента в центральной части блога: INDEX, SINGLE, ARCHIVE, PAGE или SEARCH.</p><p>Правда, я не стал выводить крошки в INDEX, отвечающий за формирование главной страницы WordPress, ибо там дополнительная навигация будет излишней.</p><p>Я вставил его в: SINGLE (отвечает за формирование страниц со статьями), ARCHIVE (формирует страницы рубрик, временных архивов, архивов тегов), PAGE (формирует в статические страницы, например, «О блоге»).</p><p>Код вызова Breadcrumb NavXT в эти шаблоны я вставлял в одно и тоже место — в самом начале, сразу после первой строки:</p><p> <?php get_header(); ?>
</p><p>чтобы получилось так:</p><p> <?php get_header(); ?>
<div class="breadcrumb">
<?php
if(function_exists("bcn_display"))
{
bcn_display();
}
?>
</div>
</p><p>В файл таблицы каскадных стилей STYLE.CSS из папки с используемой темой я добавил несколько CSS свойств для класса BREADCRUMB:</p><p>Breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}
</p><p>Эти свойства задают внешний вид для хлебных крошек в WordPress: , а . Так же определяют цвет ссылок с хлебных крошек (.breadcrumb a) и цвет ссылок при наведении на них курсора мыши (.breadcrumb a:hover). Вообще советую ознакомиться странице.</p><h2>Возможности и настройки плагина Breadcrumb</h2><p>Вы вольны делать так, как захочется. Как говорится, хозяин — барин. Но этим мы только определили место вывода хлебных крошек и задали их внешний вид. Но у этого плагина еще довольно много настроек.</p><p>Для этого заходите в админку WordPress и выбираете из левого меню в области «Настройки» пункт «Breadcrumb NavXT». В открывшемся окне увидите несколько вкладок:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt.png' height="607" width="541" loading=lazy></p><p>На вкладке «Общие» можете задать параметры, которые будут применены для всех страниц вашего блога. В поле «Разделитель» — задать символ, который будет служить разделителем в хлебных крошках. В моем случае это символ «>», который задается специальным кодом, т.к. символ «>» проставленный в явном виде, буде интерпретирован Вордпресс, как знак открывающегося HTML тега.</p><p>Вообще существует (мнемоник), которые, например, нельзя вставить напрямую. Вот некоторые из них:</p><p>Мнемокод Символ
" "
& &
< <
> >
¤ ¤
¦ ¦
§ §
©
ª ?
« «
® ®
° °
± ±
µ µ
¶ ¶
·
¹ ?
€ €
</p><p>Выбирайте любой понравившийся вам символ в качестве разделителя для хлебных крошек.</p><p>В поле «Максимальная длинна» вы можете задать длину анкора (текста ссылки) в символах. Я задал ограничение длины в 60 символов, исходя не из соображений дизайна, а из соображений оптимизации контента.</p><p>Поисковики могут неоднозначно относиться к ссылкам с одинаковыми анкорами, поэтому я и укорачиваю их в крошках для уникализации. Возможно, что это и не очень-то нужно, но так, на всякий случай.</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/plagin-breadcrumb-navxt.png' width="100%" loading=lazy></p><p>В полях «Префикс» и «Суффикс» можете ввести текст, который будет предшествовать или следовать после ссылки на главную в хлебных крошках.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-glavnay.png' width="100%" loading=lazy></p><p>Учтите, что этот текст будет помещен в атрибут TITLE тега A и, возможно, будет учтен поисковыми системами как альтернативный анкор. Это я к тому, что в нем следует употребить ключевые слова, относящиеся к главной странице вашего блога.</p><p>Не забудьте сохранить произведенные изменения в настройках плагина Breadcrumb NavXT с помощью одноименной кнопки. Далее вы можете пройтись по всем вкладкам. Например, на следующей сможете задать настройки для ссылки, которая будет вести на ту страницу, где вы сейчас находитесь:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/nastroika-breadcrumb-navxt.png' width="100%" loading=lazy></p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-tekushay.png' width="100%" loading=lazy></p><p>На следующей вкладке «Записи / Страницы» можете настроить отображение ссылок на страницы со статьями и статические страницы вашего блога:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/nastroika-hlebnye-kroshki.png' height="607" width="541" loading=lazy></p><p>Для статей я задал предшествующую надпись «Текущая статья» и заключил текст в кавычки с помощью мнемокода (список мнемокодов см. выше):</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-statiy.png' width="100%" loading=lazy></p><p>Переходим на следующую вкладку «Рубрики». В принципе, здесь повторяются все те же настройки, что и на предыдущих. Я не стал задавать обрамление (префикс и суффикс) для ссылок на рубрики, но задал обрамление для страниц архивов:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/hlebnye-kroshki-nastroiki.png' width="100%" loading=lazy></p><p>В результате на вебстраницах архива хлебные крошки выглядят так:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/breadcrumb-navxt-rubriki.png' width="100%" loading=lazy></p>
<p>Всем привет друзья. В сегодняшней статье я расскажу вам о том, что такое хлебные крошки, для чего они нужны и как добавить их на свой wordpress блог при помощи плагина и без него. Начнем!
</p><h2>Хлебные крошки – удобный способ перелинковки блога</h2>
<p>Один из простых способов одновременно упростить навигацию по сайту и его перелинковку, это Хлебные крошки (breadcrumbs). Свое название он получил в честь того способа, благодаря которому герои немецкой сказки «Гензель и Гретель» пытались найти дорогу из леса.</p>
<p>Правда, детям крошки не помогли – их склевали птицы, а вот в сайтостроении функция, названная в честь неудачного способа спасения, прижилась и используется в ресурсах самого разного назначения, от личных блогов до интернет-магазинов.</p>
<p>Вы наверняка видели эту навигационную цепочку на самых разных интернет ресурсах. Обычно ее размещают над статьей, и выглядит она примерно так:</p>
<p>Главная страница
</span> > Рубрика
> Подрубрика
> <span>Текущая страница
</p>
<p>Причем все «звенья», кроме последнего — это внутренние ссылки.</p>
<p>Благодаря этой цепочке, читатель в любой момент может понять, на каком уровне сайта он находится и имеет возможность пройти как по всей цепочке, так и сразу перейти в интересующий его раздел или же вернуться на главную страницу ресурса.</p>
<h2>Какую пользу несут хлебные крошки для сайта и блога</h2>
<p>Как сказано выше, во-первых, это упрощение навигации. Например, читатель зашел в статью, прочитал ее и решил почитать другие статьи раздела. Благодаря хлебным крошкам, ему не нужно искать карту сайта или список рубрик. Он просто вернется на шаг назад.</p>
<p>Вы ненавязчиво приглашаете читателя перейти по ссылкам, то есть даете ему еще одну причину задержаться на вашем сайте. Это, в свою очередь, улучшает поведенческие факторы, то за что поисковые роботы, в первую очередь, отличают блоги и сайты.</p>
<p>Чем сложнее структура сайта, тем важнее установить на него breadcrumbs. Так как посетителям, особенно впервые оказавшимся на данном ресурсе, сложно разобраться во всех блоках, страницах, разделах и подразделах. Если им не будет подсказок, они так и будут уходить, прочитав лишь одну статью.</p>
<p>Вторая задача этого элемента, тесно связанная с первой – внутренняя оптимизация сайта, точнее еще один способ связать ссылками как можно большее количество статей. Причем, в отличие от ручной перелинковки, здесь все происходит автоматически. Над каждой опубликованной статьей сразу появляется нужная навигационная цепочка.</p>
<p>Данную функцию можно добавлять на сайты и блоги разными способами. Рассмотрим два самых простых варианта для WordPress – установку с помощью плагина и с помощью внесения небольших изменений в код.</p>
<h2>Как добавить хлебные крошки на блог плагином</h2>
<p>Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.</p>
<p>Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».</p>
<p><img src='https://i1.wp.com/isif-life.ru/wp-content/uploads/2014/08/1.jpg' align="center" width="100%" loading=lazy></p>
<p>Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».</p>
<h1><?php the_title (); ??></h1>
<p>и над этой строчкой вставляем следующий кусочек кода:</p>
<p><?php if(function_exists("bcn_display"))
{
bcn_display();
}
??></p>
<p>Если вы хотите разместить навигационную цепочку в другом месте, значит этот же код размещаете там.</p>
<p>После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.</p>
<p><img src='https://i2.wp.com/isif-life.ru/wp-content/uploads/2014/08/2.jpg' align="center" width="100%" loading=lazy></p>
<p>Осталось перейти на блог и полюбоваться на результат.</p>
<h2>Как добавить хлебные крошки на блог без плагина</h2>
<p>Так как любые плагины, это дополнительная нагрузка на блог, замедляющая его работу, то лучше просто немного изменить код, тем более что в данном случае, это проще, чем установить плагин.</p>
<p>Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:</p><p>Function the_breadcrumb() {
echo "You are here: ";
if (!is_front_page()) {
echo "Home";
echo " » ";
if (is_category() || is_single()) {
the_category(" ");
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
else {
echo "Home";
}
}
</p><p>и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.</p>
<p>Теперь нужно вот этот код:</p>
<?php the_breadcrumb();
??><p>разместить там, где вы хотите видеть навигационную цепочку, например, опять же над заголовком статьи. Для этого идем в single.php, ищем строчку с the_title и над ней вставляем этот код и сохраняем изменения.</p>
<p>Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).</p>
<p>Кроме того, нужно убедиться, что изменения одинаково хорошо смотрятся на разных браузерах – не наплывают на другие части темы и, одновременно, хорошо заметны.</p>
<p>Все, «Хлебные крошки» помогают вашим читателям, а вы можете гордиться тем, что самостоятельно разобрались в их установке. Всем спасибо за внимание!</p>
<p>P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог:</p>
<p><span class="MVWNvgeSPJI"></span></p>
<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>
</article>
<div class="related-posts">
<h3 class="title text-uppercase text-center">Еще на эту тему:</h3>
<div class="row">
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">
Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты </span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">
Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3 </span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4">
<div class="article-in-loop">
<a class="thumb-title" href="/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Поиск похожей фотографии в интернет" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
</span>
<span class="title">
Поиск похожей фотографии в интернет </span>
</a>
</div>
</div>
</div>
</div>
</div>
<aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary">
<div class="content-menu bs-docs-sidebar">
<div class="progress-right" id="progress-right">0%</div>
<script>
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100));
document.getElementById('progress-right').innerHTML = scrollprogress + '%';
}
</script>
<div class="ad clearfix text-center">
</div>
</div>
<script>
/**
* Скрипт закріплення блоку при прокрутці
*/
(function() {
var a = document.querySelector('#sidebar'),
b = null,
P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''),
s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = -R + 'px';
} else {
b.className = 'evr-sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
</script>
<style>
/* Додаємо відступ вгорі, щоб було на одному рівні із змістом */
body.single #breadcrumbs {
margin-bottom: 5px;
}
#content article {
padding-top: 15px;
}
#sidebar .evr-sticky {
position: fixed;
z-index: 101;
}
#sidebar .stop {
position: relative;
z-index: 101;
}
#div-gpt-ad-30906309 {
margin-top: 20px;
}
#sidebar .evr-sticky #div-gpt-ad-30906309,
#sidebar .stop #div-gpt-ad-30906309 {
margin-top: 20px;
}
#sidebar .content-menu {
transition: 0.5s all;
}
#sidebar .content-menu .title {
padding-top: 15px;
font-size: 20px;
margin: 0 0 15px 0;
}
#sidebar .content-menu .title .glyphicon {
padding-right: 5px;
}
#sidebar .content-menu ul {
padding: 0;
margin: 0;
overflow: auto;
}
#sidebar .content-menu .nav li {
margin: 0;
clear: both;
margin-bottom: 4px;
}
/* Bullet before text */
#sidebar .content-menu .nav li a:before {
content: "●";
position: absolute;
font-size: 17px;
color: #dedede;
left: 0;
top: -1px;
}
#sidebar .content-menu .nav li a {
position: relative;
display: inline-block;
font-size: 15px;
color: #000;
line-height: 1.2;
padding: 3px 0 0 18px;
overflow: hidden;
text-decoration: none !important;
}
#sidebar .content-menu .nav li.active:focus>a,
#sidebar .content-menu .nav li.active:hover>a,
#sidebar .content-menu .nav li.active>a,
#sidebar .content-menu .nav li a:hover {
text-decoration: none;
font-weight: normal;
color: #c23085;
background-color: transparent;
border-left: 0 none;
}
/* Bullet before text */
#sidebar .content-menu .nav li.active>a:hover:before,
#sidebar .content-menu .nav li.active>a:before {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
left: 1px;
color: #c23085;
background: transparent;
}
#sidebar .content-menu .nav li a:hover:before {
color: #c23085;
background: transparent;
}
#sidebar a.go-top {
display: block;
margin-top: 5px;
padding: 14px 0 5px 0;
text-align: center;
text-transform: lowercase;
font-size: 17px;
color: #666;
background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%;
opacity: 0;
transition: 0.2s all;
}
#sidebar a.go-top:hover {
color: #000;
text-decoration: none;
}
/* Якщо блок зафіксовний */
#sidebar .evr-sticky a.go-top {
opacity: 1;
}
#sidebar .evr-sticky {
box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important;
}
</style>
<script>
jQuery(document).ready(function() {
// (c) http://jsfiddle.net/gableroux/S2SMK/
// підсвітка активного пункту меню, bootstrap
jQuery('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 70
});
// даємо висоту меню, щоб зробити прокрутку
jQuery(window).bind("load resize", function() {
var body_w = jQuery("body").width(); // визначаємо ширину вікна
var window_h = jQuery(window).height(); // визначаємо висоту вікна
//alert(window_h);
if (body_w > '767') { // якщо ширина більша 767
window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у перспективі треба буще ще відняти інші-нові блоки
var menu_h = jQuery('#sidebar .content-menu').height();
//if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна
jQuery('#sidebar .content-menu ul.nav').css('height', window_h);
//}
}
});
// парсимо контент і формуємо меню
jQuery('#content .evr-section').each(function() {
var evr_section_id = jQuery(this).attr('id');
var evr_section_title = jQuery(this).find(':header:first').text();
var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>';
//var txt = txt.unwrap();
//txt = jQuery('li', txt).unwrap;
//txt = txt.unwrap('h3');
//txt = jQuery(txt).wrap('<li>');
jQuery('#sidebar ul.nav').append(txt); // Insert
});
// Додаємо спеціальний клас для посилання на відео
jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video');
// навігація по статті (плавна прокрутка до потрібного блоку)
jQuery('#sidebar .content-menu .nav a').click(function() {
jQuery.scrollTo(this.hash, {
offset: -10, // Відступ вгорі
duration: 750
});
return false;
});
// перейти вгору (плавна прокрутка вгору)
jQuery('#sidebar a.go-top').click(function() {
jQuery.scrollTo(this.hash, {
offset: 0, // Відступ вгорі
duration: 450
});
return false;
});
});
</script>
<link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script>
<script>
// Прокрутка оновлюється при зміні висоти вікна
jQuery(function() {
jQuery('#sidebar .content-menu ul.nav').each(
function() {
jQuery(this).jScrollPane({
showArrows: jQuery(this).is('.arrow')
});
var api = jQuery(this).data('jsp');
var throttleTimeout;
jQuery(window).bind("load resize", function() {
// IE fires multiple resize events while you are dragging the browser window which
// causes it to crash if you try to update the scrollpane on every one. So we need
// to throttle it to fire a maximum of once every 50 milliseconds...
if (!throttleTimeout) {
throttleTimeout = setTimeout(
function() {
api.reinitialise();
throttleTimeout = null;
},
50
);
}
});
}
)
});
</script>
<style>
/* Styles specific to this particular page */
.scroll-pane {
overflow: auto;
height: 400px;
}
.jspTrack {
background: #dedede;
}
.jspVerticalBar {
width: 6px;
}
.jspDrag {
background: #309dc6;
}
</style>
</aside>
</div>
</div>
<div class="other-posts">
<div class="container">
<h3 class="title text-uppercase text-center h">Другие статьи:</h3>
<div class="row articles">
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Самые мощные смартфоны Топ 10 самых мощных телефонов" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
Самые мощные смартфоны Топ 10 самых мощных телефонов </span>
<span class="title">
Современные технологии позволяют уместить в обычном смартфоне мощность и производительность... </span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Как удалить страницу и аккаунт в моем мире" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
Как удалить страницу и аккаунт в моем мире </span>
<span class="title">
Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет... </span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Как удалить аваст с компьютера если он не удаляется" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
Как удалить аваст с компьютера если он не удаляется </span>
<span class="title">
Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не... </span>
</a>
</div>
</div>
<div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
<div class="article-in-loop">
<a class="thumb-title" href="/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/">
<span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
<span class="embed-responsive-item">
<span class="super-wrp">
<span class="span-table">
<span class="span-table-row">
<span class="span-table-row-cell">
<img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Подключение Nokia Lumia к ПК" loading=lazy>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="date">
Подключение Nokia Lumia к ПК </span>
<span class="title">
Статьи и Лайфхаки
впервые могло разочаровать всех, кто недавно приобрёл данное мобильное... </span>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Додаємо відступ внизу */
body.single #content .ad {
margin-bottom: 20px;
}
/* Додаємо відступ вгорі */
body.single #sidebar .ad {
margin-top: 20px;
}
</style>
<footer id="footer" class="clearfix">
<noindex>
<div class="container row-1 hidden-xs">
<nav class="nav">
<div class="menu menu-footer">
<ul id="menu-podval" class="menu">
<li class="menu-item type-custom object-custom home "><a href="/">Главная</a></li>
<li class="menu-item type-post_type object-page "><a href="">О проекте</a></li>
<li class="menu-item type-post_type object-page "><a href="">Рекламодателям</a></li>
<li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li>
<li class="menu-item type-post_type object-page "><a href="/feedback/">Обратная связь</a></li>
</ul>
</div>
</nav>
</div>
<div class="border-blue clearfix"></div>
<div class="container row-2">
<div class="row">
<div class="col-sm-6">
<div id="text-2" class="block widget-container widget_text">
<div class="textwidget">
<div class="sn">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/hlebnye-kroshki-wordpress-nastroika-plagina-breadcrumb-navxt-wordpress-hlebnye/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy></a>
<a href="https://vk.com/share.php?url=https://battlecase.ru/hlebnye-kroshki-wordpress-nastroika-plagina-breadcrumb-navxt-wordpress-hlebnye/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy></a>
<a href="https://youtube.com/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy></a>
</div>
<style>
.sn a {
display: inline-block;
margin: 0 10px 0 0;
width: 55px;
}
@media (max-width:767px) {
.sn {
text-align: center;
}
.sn a {
margin: 0 7px;
width: 43px;
}
}
.sn a:hover {
opacity: 0.9;
}
</style>
</div>
</div>
</div>
</div>
</div>
<div class="border-3 clearfix"></div>
<div class="container row-3">
<div class="row">
<div class="col-sm-8 col-txt col-txt-1">
Размещенные на сайте материалы, могут содержать информацию для пользователей старше 18 лет. </div>
<div class="col-sm-4 col-txt col-txt-2 text-right">
<div class="project-by-um">
© 2012 - 2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy>
</div>
</div>
</div>
</div>
</noindex>
</footer>
</div>
<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel">
<div class="modal-dialog modal-lg itc-container" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-searchLabel">Поиск по сайту</h4>
</div>
<div class="modal-body">
<form role="search" method="get" class="form-search" id="modal-searchform" action="/">
<div class="form-group">
<input type="search" autocomplete="off" spellcheck="false" placeholder="Введите текст поиска" value="" name="s" id="modal-s" class="input-lg form-control">
</div>
</form>
<div class="modal-search-results"></div>
</div>
</div>
</div>
</div>
<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' />
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script>
<script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var thickboxL10n = {
"next": "\u0414\u0430\u043b\u0435\u0435 \u2192",
"prev": "\u2190 \u041d\u0430\u0437\u0430\u0434",
"image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
"of": "\u0438\u0437",
"close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c",
"noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.",
"loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif"
};
/* ]]> */
</script>
<script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script>
<div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000">
<a class="mmenu_open" href="#irevoltmenu">
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
</a> Рубрики
</div>
<div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="ad text-center">
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css">
<script src="/assets/jquery1.cookie1.js"></script>
<script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script>
</body>
</html>
