Навигация WordPress Хлебные крошки – плагин Prime Strategy Bread Crumb

Итак, давайте рассмотрим как же работает вышеозначенный Wordpress плагин Хлебные крошки.
Начинаем как всегда с установки. Я предпочитаю более простой путь и устанавливаю плагин из хранилища WordPress. Для этого нужно перейти в административной панели по адресу Плагины | Добавить новый и указать в строке поиска название Prime Strategy Bread Crumb. После того как плагин будет найден, достаточно нажать кнопку Установить, и система автоматически его установит.
Здесь же есть возможность загрузить файлы плагина, если по каким-то причинам вы не хотите брать его непосредственно из каталога. И наконец, вы можете скопировать папку с плагином prime-strategy-bread-crumb в папку WordPress /wp-content/plugins/ при помощи файлового менеджера хостинга или по FTP.
Какой бы способ вы не выбрали, плагин необходимо активировать. Сделать это можно на странице установленных плагинов.
Плагин Strategy Bread Crumb очень прост. Настолько прост, что не имеет даже страницы настроек в админке, но вместе с тем гибок, поскольку функция его вызова может принимать ряд параметров. Для использования со всеми параметрами по умолчанию достаточно поместить в шаблон WordPress код, указанный ниже
1 |
<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb(); } ?> |
С дефолтными параметрами будет выводиться html такого вида
1 2 3 4 5 6 |
<ul class="bread_crumb"> <li class="level-1 top"><a href="http://www.example.com/">Home</a></li> <li class="level-2 sub"><a href="http://www.example.com/?post_type=seminar">Seminar</a></li> <li class="level-3 sub"><a href="http://www.example.com/?area=tokyo">Tokyo</a></li> <li class="level-4 sub tail current">WordBench Tokyo</li> </ul> |
Обычно нужно, чтобы хлебные крошки выводились на странице категорий, странице отдельного поста, поэтому я вношу изменения в файлы category.php и single.php своей темы. Выглядит это примерно так, внутри элемента с классом content, перед циклом вывода постов.
Обратите внимание, что в примере, внутри функции bread_crumb() перечислено несколько параметров, их можно указывать отделяя друг от друга с помощью знака &.
1 |
type=string&home_label=Главная&joint_string= |
Альтернативная форма записи переменных – в виде массива
1 2 3 4 5 6 7 |
<?php $args = array( 'home_label' => 'Главная', 'joint_string' => '', 'type' => 'string'); if (function_exists('bread_crumb')) bread_crumb($args); ?> |
Преимуществом именно Strategy Bread Crumb являются богатые возможности вывода хлебных крошек на страницах разных типов будь то архивы, страница поиска, страница вложения, страница автора и т.п. Если вам нужно, чтобы они отображались во всех подобных случаях, лучше поместить тег bread_crumb(); в файл header.php шаблона и указать условие для главной страницы, поскольку на главной странице выводить breadcrumbs не имеет никакого смысла.
1 2 3 4 5 6 7 8 |
<?php if (!is_home()){ $args = array( 'home_label' => 'Главная', 'joint_string' => '', 'type' => 'string'); if (function_exists('bread_crumb')) bread_crumb($args);} ?> |
Помещаем этот код в конце файла header.php, в примере (шаблон Twenty Twelve) после открывающего тега элемента wrapper
Параметры, которые принимает тег Bread Crumb
- type
- По умолчанию list (список ul). Если вы укажете тип string – вывод строки вместо списка, т.е. хлебные крошки в виде строчных элементов –
a и strong
.
12<a href="http://www.example.com/">Home</a> > <a href="http://www.example.com/?post_type=seminar">Seminar</a> ><a href="http://www.example.com/?area=tokyo">Tokyo</a> > <strong class="current">WordBench Tokyo</strong> - home_label
- Как в навигационной цепочке отображается главная страница. По умолчанию: home.
- search_label
- Текст, отображаемый в результатах поиска. По умолчанию: Search Results of “%s” (%s : строка поиска)
- 404_label
- Текст, отображаемый на странице 404. По умолчанию: 404 Not Found
- category_label
- Текст,отображаемый на страницах категории. По умолчанию: %s ( %s – название категории)
- tag_label
- Текст на странице тегов. По умолчанию: %s (%s – название тега)
- taxonomy_label
- Текст, отображаемый на страницах таксономий. Default: %s (%s – название таксономии)
- author_label
- Текст на авторской странице. По умолчанию: %s (%s – имя автора)
- attachment_label
- Текст, отображаемый для страниц вложений. По умолчанию: %s (%s – название вложения)
- year_label
- Текст, отображаемый на страницах годовых архивов. По умолчанию: %s (%s -год)
- month_label
- Текст, отображаемый на страницах месячных архивов. По умолчанию: %s (%s – месяц)
- day_label
- Текст, отображаемый на страницах архивов за день. По умолчанию: %s (%s – день)
- post_type_label
- Текст на страницах для произвольных типов записей. По умолчанию: %s (%s – произвольный тип записи, его название)
- joint_string
- Если вы указали параметр type как string (строка) , то этот параметр будет задавать разделители между текстом. Если указать пустое значение – разделителя не будет. По умолчанию знак: > ( > )
- navi_element
- Название элемента-обертки. Можно выбрать теги <div> или <nav>, в которые будут заключены хлебные крошки. По умолчанию: отсутствует.
- elm_class
- Имя класса элемента-обертки. Если он отсутствует и выбран тип (type) список (list), будет отображаться класс элемента ul. По умолчанию: bread_crumb
- elm_id
- Имя id элемента-обертки. По умолчанию : нет.
- li_class
- Название класса, добавляемого к li, если тип (type) вывода хлебных крошек список (list). По умолчанию: нет класса.
- class_prefix
- Префикс, который можно добавить в каждый из классов. По умолчанию: префикса нет.
- current_class
- Название класса, добавляемого к текущей странице в breadcrumbs. По умолчанию: current
- echo
- Выводить результат или нет. По умолчанию: true (вывод). Если вы определите 0 или false – сохранение в переменной PHP(breadcrumbs не будут выводиться на страницу).
С настройкой вывода данных в Strategy Bread Crumb более менее разобрались. Осталось решить вопрос с оформлением полученных хлебных крошек. Разработчики предлагают нам такие простые, базовые стили для улучшения внешнего вида этой навигации. Их удобно использовать в качестве основы для своих стилей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.bread_crumb { margin:0; border-bottom:1px solid #eee; padding:0.8em 0 0.5em; clear: both; height: 20px; background: #f8f8f8; } .bread_crumb li { font-size:12px; color:rgb(180,180,180); float:left; /*margin-right:1em;*/ list-style: none outside none; } .bread_crumb li:after { content : '>'; padding-left:10px; margin-right:10px; } .bread_crumb li:last-child:after { content : ''; } .bread_crumb li a { color:rgb(120,120,120); } .bread_crumb li.current { } |
После добавления этого кода в таблицу стилей style.css темы, крошки будут выглядеть примерно так.
На сегодня все, спасибо за внимание!