Облако тегов — отличный функциональный элемент сайта, позволяющий создать дополнительную навигацию и перелинковку. Посетители смогут искать публикации не только через подборки последних/лучших постов, список категорий, но и просматривать статьи по определенной метке. Блок с тегами обычно располагается в боковой панели (сайдбаре) или в футере блога на каждой его странице.
Способов реализации есть несколько: специальные модули, функция wp_tag_cloud и встроенный виджет. Когда-то я уже рассказывал о плагине Simple Tags, а сегодня рассмотрим использование базовых возможностей.
В принципе, несколько лет назад на момент написания прошлой статьи Simple Tags был отличным вариантом со множеством дополнительных опций, но сейчас он не так актуален. Для вывода похожих постов я ставлю Yet Another Related Posts Plugin и некоторые другие модули, а блок TagCloud делаю стандартными методами.
Виджет облака теговПроще всего задача выполняется, конечно, с помощью базового виджета. Здесь разберется даже начинающий юзер. Заходите в раздел «Внешний вид» — «Виджеты» и находите там элемент «Облако меток».
Из настроек: заголовок, отображение количества элементов и выбор таксономии. Последнее позволят выводить не только теги (метки), но и категории с другими пользовательскими типами данных. Сохраняем и проверяем результат.
По умолчанию стандартное облако меток в WordPress может выглядеть не так, как вам надо — размеры шрифтов, цвет ссылок хотелось бы редактировать. В настройках, как видите, такой опции нет, но не спешите искать специальные плагины — чтобы привести внешний вид виджета под дизайн вашего шаблона воспользуемся небольшим хаком. Прописываете его файле functions.php:
add_filter('widget_tag_cloud_args','set_tag_cloud_args');
function set_tag_cloud_args( $args ) {
$args['number'] = 30;
$args['largest'] = 18;
$args['smallest'] = 11;
$args['unit'] = 'px';
return $args;
}
|
В фильтре для widget_tag_cloud_args определяете нужные значения переменных облака тегов. Ниже рассмотрю какие они бывают.
Параметры функции wp_tag_cloudВыводить облако меток WordPress можно через файлы шаблонов с помощью соответствующей функции. Код добавляете, например, в сайдбар (sidebar.php):
<?php wp_tag_cloud('largest=15&smallest=11&unit=px&number=30'); ?>
|
Чтобы понять какой результат получится в ходе выполнения данной строки, привожу список всех параметров wp_tag_cloud (величина по умолчанию — указана в скобках):
- smallest (8) — минимальный размер шрифта для наименее используемых тегов;
- largest (22) — максимальная величина шрифта у популярных меток;
- unit (pt) — определение единицы измерения размера шрифта: pt, px, em, % (я обычно ставлю в пикселях px);
- number (45) — количество тегов при отображении;
- format (flat) — формат вывода ссылок: flat — разделенные пробелом, list — список UL, array — как PHP массив;
- separator (пробел, «\n») — символ между тегами;
- orderby (name) — сортировка: name — по названию, count — по популярности;
- order (ASC) — порядок сортировки: возрастающая — ASC, по спадающей — DESC, случайным образом — RAND;
- exclude — исключенные метки из блока TagCloud;
- include — теги для включения в облако (показываются только они);
- topic_count_text_callback — функция выводит текст с количеством элементов у меток;
- link (view) — линки ведут на страницу просмотра (view) либо на редактирование (edit);
- taxonomy (post_tag) — задает какие таксономии там будут: post_tag, category, link_category или другие.
- show_count (false) — показывать ли количество объектов;
- echo (true) — выводить результат на сайте или нет.
Сохраняем и проверяем, что в итоге вышло. Как правило, я также делаю выравнивание содержимого посредине. Добавляйте в файл стилей style.css код:
.tagcloud {
text-align: center;
margin: 7px 0px 7px 0px;
}
|
Разный цвет ссылок в облаке тегов
Если для отображения блока меток вы используете функцию wp_tag_cloud либо встроенный WP виджет, то все линки будут иметь одинаковый цвет. Модуль Simple Tags обладал классной фишкой с выбором оттенков самых популярных и непопулярных WordPress меток в облаке. Таким образом, градация элементов визуализировалась не только за счет размера шрифта, но и цвета (более светлого/темного). Без дополнительных хаков тут не обойтись.
В сети есть несколько вариантов решения задачи, но не все они оказались рабочими. В итоге у меня получилось скомпоновать следующий хак для functions.php:
add_filter( 'wp_tag_cloud', 'mystyle_tag_cloud' );
function mystyle_tag_cloud( $tags )
{
$first_replace = preg_replace(
'/style="font-size: (\d+)(\.\d+)px;"/',
'id="tag-cloud-size-$1"',
$tags
);
$second_replace = preg_replace(
'/style="font-size: (\d+)px;"/',
'id="tag-cloud-size-$1"',
$first_replace
);
return $second_replace ;
}
|
В ходе срабатывания фильтра все вхождения в готовом сгенерированном HTML коде облака, где производится задание размера ссылки (style=»font-size: …») заменяются на определенный id=»tag-cloud-size-ХХХХХ». Причем он «выцепляет» только целую часть значений, поэтому в CSS стилях прописываете что-то вроде:
#sidebars li .st-tag-cloud a#tag-cloud-size-11 {
color: #4dbde7;
font-size: 11px;
}
#sidebars li .st-tag-cloud a#tag-cloud-size-12 {
color: #3da9d7;
font-size: 12px;
}
#sidebars li .st-tag-cloud a#tag-cloud-size-13 {
color: #2e96c7;
font-size: 13px;
}
#sidebars li .st-tag-cloud a#tag-cloud-size-14 {
color: #1e83b8;
font-size: 14px;
}
#sidebars li .st-tag-cloud a#tag-cloud-size-15 {
color: #1a7caf;
font-size: 15px;
}
#sidebars li .st-tag-cloud a#tag-cloud-size-16 {
color: #005d99;
font-size: 16px;
}
|
Важно(!) заметить, что функция wp_tag_cloud определяет динамические размеры шрифта, то есть часть ссылок будет иметь не целые показатели font-size. Поэтому, к сожалению, сделать «плавные переходы» между оттенками цветов линков как в Simple Tags не получится. Теоретически, можно к 6-ти целым значениям из примера выше дополнительно добавить более детализированные: 11.5px, 12.5px, 13.5px и т.п., но для этого пришлось бы усложнить метод преобразования стилей в классы (одним preg_replace там не обойтись).
Второй вариант, который был найден в сети и отмечен в stackexchange как рабочий, находится тут. Код вставки в functions.php следующий:
add_filter ( 'wp_tag_cloud', 'tag_cloud_font_size_class' );
function tag_cloud_font_size_class( $taglinks ) {
$tags = explode('</a>', $taglinks);
$regex1 = "#(.*style='font-size:)(.*)((pt|px|em|pc|%);'.*)#e";
$regex2 = "#(style='font-size:)(.*)((pt|px|em|pc|%);')#e";
$regex3 = "#(.*class=')(.*)(' title.*)#e";
foreach( $tags as $tag ) {
$size = preg_replace($regex1, "(''.round($2).'')", $tag ); //get the rounded font size
$tag = preg_replace($regex2, "('')", $tag ); //remove the inline font-size style
$tag = preg_replace($regex3, "('$1tag-size-'.($size).' $2$3')", $tag ); //add .tag-size-{nr} class
$tagn[] = $tag;
}
$taglinks = implode('</a>', $tagn);
return $taglinks;
}
|
Итого. Выводить облако меток в WordPress можете любым из этих способов. С виджетом получается максимально просто и наглядно. После его создания в functions.php задаете нужные параметры внешнего вида. Если же собираетесь реализовывать все в файле шаблонов, то просто используйте wp_tag_cloud. Надеюсь хак с разными цветами ссылок также пригодится. Первый я внедрял на своем сайте, и все ок, но увы гарантировать тот же результат и для проекта вашего не могу.
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Изменение ссылок
(1)
casham
,
01.02.2012
-
Плагин Special Text Boxes
(2)
Ирина
,
27.12.2011
-
Как закрыть ссылки от индексации быстро и красиво. Плагины WP-NoRef и WP No External Links.
(2)
-
Вышел WordPress 3.3 русская версия
(1)
casham
,
16.12.2011
-
Что нового в WordPress 3.3
(1)
casham
,
16.12.2011
20260111165306megr***@m*****.ru , 18.12.2011