Выводим облако меток в WordPress через виджет и функцию wp_tag_cloud (+полезные хаки)

Выводим облако меток в WordPress через виджет и функцию wp_tag_cloud (+полезные хаки)
Click here to view original web page at wordpressinside.ru
Вывод облака меток

Облако тегов — отличный функциональный элемент сайта, позволяющий создать дополнительную навигацию и перелинковку. Посетители смогут искать публикации не только через подборки последних/лучших постов, список категорий, но и просматривать статьи по определенной метке. Блок с тегами обычно располагается в боковой панели (сайдбаре) или в футере блога на каждой его странице.

Способов реализации есть несколько: специальные модули, функция 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 код:

Разный цвет ссылок в облаке тегов

Если для отображения блока меток вы используете функцию 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 следующий:

Итого. Выводить облако меток в WordPress можете любым из этих способов. С виджетом получается максимально просто и наглядно. После его создания в functions.php задаете нужные параметры внешнего вида. Если же собираетесь реализовывать все в файле шаблонов, то просто используйте wp_tag_cloud. Надеюсь хак с разными цветами ссылок также пригодится. Первый я внедрял на своем сайте, и все ок, но увы гарантировать тот же результат и для проекта вашего не могу.

P.S. Постовой. Порталы городов по типу map.vn.ua помогают узнать информацию если вам нужна служба такси Винница или например интересны последние новости-события жизни города.