Хлебные крошки WordPress. Только не ешьте их! 09.08.2013

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

Для тех кто не знает что это такое, покажу. Хлебные крошки wordpress на моем блоге выглядят вот так:

Состоят они из ссылок, которые призваны во-первых ориентировать человека, на кокой страницы он находится. Вот из картинки видно что находимся мы на странице статьи под названием «Что такое сниппет?», рубрика в которой находится эта статья называется «SEO энциклопедия», ну а на рубрику можно попасть с главной страницы сайта.

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

Теперь давайте я расскажу как их установить на сайт и как красиво оформить.

Устанавливаем хлебные крошки wordpress.

Первый шаг для вывода наших крошек, это установить соответствующий плагин. Называется он - Breadcrumb NavXT. Скачиваем его вот тут>> А как установить плагин я рассказывал вот в этой статье.

Итак плагин мы установили и активировали. Далее идем в параметры/Breadcrumb NavXT.

Мы попали в настройки плагина, который великое множество. Если честно я уже не помню детальные настройки для этого плагина, поэтому поступим следующим образом. Вот скриншоты всех страниц с моими настройками:

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

Вкладка «Основные»:

Разделитель:  >

Шаблон ссылки на главную: <a title="Перейти на %title%" href="%link%"><img src="http://ваш_домен/wp-content/themes/название_вашей_темы/images/home.png" width="14" />%htitle%</a>

Шаблон ссылки на главную (некликабельная): %htitle%

Вкладка «Текущая позиция»:

Шаблон: Страница %htitle%

Вкладка «Записи & страницы»:

Шаблон ссылки на запись: <a title="Перейти к %title%." href="%link%">%htitle%</a>

Шаблон ссылки на запись (некликабельная): %htitle%

Шаблон ссылки на страницу: <a title="Перейти к %title%." href="%link%">%htitle%</a>

Шаблон ссылки на страницу (некликабельная): %htitle%

Шаблон ссылки на вложение: <a title="Перейти к %title%." href="%link%">%htitle%</a>

Шаблон ссылки на вложение (некликабельная): %htitle%

Вкладка «Рубрики & метки»:

Шаблон ссылки на рубрику: <a title="Перейти к рубрике '%title%' « href=»%link%">%htitle%</a>

Шаблон ссылки на рубрику (некликабельная): %htitle%

Шаблон ссылки на метку: <a title="Перейти к архивам метки '%title%' « href=»%link%">%htitle%</a>

Шаблон ссылки на метку (некликабельная): %htitle%

Вкладка «Метка изображения»:

Метка изображения Шаблон: <a title="Go to the %title% Метка изображения archives." href="%link%">%htitle%</a>

Метка изображения Шаблон (некликабельная): %htitle%

Другое:

Шаблон ссылки на автора: Записи от: <a title="Перейти на первую страницу записей от '%title%'." href="%link%">%htitle%</a>

Шаблон ссылки на автора (некликабельная): Записи от: '%htitle%'

Шаблон ссылки на архив по дате: <a title="%title% « href=»%link%">%htitle%</a>

Шаблон ссылки на архив по дате (некликабельная): %htitle%

Шаблон ссылки на страницу с результатами поиска: Результаты поиска по запросу &#39;<a title="Перейти к первой странице с результатами поиска по запросу %title%." href="%link%">%htitle%</a>&#39;

Шаблон ссылки на страницу с результатами поиска (некликабельная): Результаты поиска для запроса: &#39;%htitle%&#39;

Страница 404 (не найдено): 404. Страница не найдена

Шаблон текста для 404 страницы: %htitle%

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

Заходим через notepad++ на сайт и идем в /public_html/wp-content/themes/папка_с_вашей_темой/single.php и перед выводом постов вставляем вот такой код:

<ul class="breadcrumbs">
<?php if (function_exists ('bcn_display_list')) { bcn_display_list (); }?>
</ul>

У меня в файле single.php это выглядит вот так (картинка кликабельна):

Т.е. все вставляется перед:

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

Сейчас осталось дело за оформлением. Идем в файл стилей: /public_html/wp-content/themes/папка_с_вашей_темой/style.css и добавляем вот такое красивое оформление:

/* Оформляем форму «хлебных крошек» */

ul.breadcrumbs {
font: 11px 'Lucida Grande',Verdana,Arial,Sans-Serif;
background-image:url (images/bc_bg.gif);
background-repeat:repeat-x;
box-shadow: 0 0 1px 1px #56595b,
0 0 2px 2px #c8cdd1,
0 0 4px 1px #7c9eb8,
0 0 0 5px #82aac2;
— moz-box-shadow: 0 0 1px 1px #56595b,
0 0 2px 2px #c8cdd1,
0 0 4px 1px #7c9eb8,
0 0 0 5px #82aac2;
— webkit-box-shadow: 0 0 1px 1px #56595b,
0 0 2px 2px #c8cdd1,
0 0 4px 1px #7c9eb8,
0 0 0 5px #82aac2;
border-radius: 10px;
— moz-border-radius: 10px;
— webkit-border-radius: 10px;
height:30px;
line-height:30px;
color:#888;
border:solid 1px #cacaca;
width:630px;
overflow:hidden;
margin:0 0 25px 0;
padding:0px;
}
ul.breadcrumbs li {
list-style-type:none;
padding-left:10px;
display:inline-block;
float:left;
}
ul.breadcrumbs a {
display:inline-block;
background-image:url (images/bc_separator.gif);
background-repeat:no-repeat;
background-position:right;
padding-right: 16px;
text-decoration: none;
color:#333333;
outline:none;
}
ul.breadcrumbs a:hover {
color:#35acc5;
}
ul.breadcrumbs .hm{
float:left;
margin:7px 5px 0 0;
position: rative;
}

В прочем, стили вы всегда можете изменить сами как вам понравится, это же мой вариант оформления. Да, еще в папку /public_html/wp-content/themes/папка_с_вашей_темой/images надо будет забросить картинки, которые можно взять вот из этого ахрива.

Ну вот, все готово. Надеюсь у вас все получилось! Подписывайтесь на обновления моего блога и будем на связи.

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

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

ВКонтакте