Авг
24
18

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

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

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

Список всех меток на сайте

Когда вы располагаете данный блок где-то в сайдбаре, то вполне логично выводить там лишь часть самых популярных тегов (20, 30, 40 и т.п.) дабы лишний раз не отвлекать. Тем не менее, никто не мешает вам добавить специальную страницу, где бы отображался полностью весь их список.

Эта фишка пригодится, если у вас хорошо продумана структура проекта и метки для записей действительно помогают пользователям лучше ориентироваться, увеличивают число кликов и т.п. В крайнем случае можно вместо создания отдельной веб-странички добавить функцию под текстами «О нас», или туда, где реализована обработка ошибки 404 и т.п.

Алгоритм работы:

1. Для начала определитесь где будете выводить облако тегов: отдельная запись или какая-то из уже существующих. В первом случае ее потребуется создать.

2. Далее нужно добавить отдельный шаблон страницы в WordPress — об этом уже рассказывал. Если вкратце: копируете по FTP файл макета page.php и модифицируете его следующим образом:

Новый шаблон страницы

Здесь, во-первых, в самом верху есть блок с названием нового макета:

<?php
/*
 * Template Name: All Tags Page
 * Template Post Type: page
 */
?>

А во-вторых, после отображение контента (the_content) вызываем функцию wp_tag_cloud.

Сохраняйте этот файл под именем page-alltags.php или как-то так и загрузите его обратно на FTP. Чтобы добавить вывод облака меток после 404 ошибки или на странице «О проекте», редактируете соответствующие файлы макетов.

3. Для «активации» шаблона в WP админке устанавливаете его для той или иной странички. В итоге у вас получится что-то вроде:

Страница с облаком тегов

Дополнительно в текстовом редакторе можете добавить какой-то текст описание.

4. Четвертый шаг необязательный, но улучающий сайт. Под виджетом облака в сайдабре создаете новый элемент HTML, куда вставляете код ссылки, ведущей на страницу с полным списком меток. Кстати, не забудьте на ней скрыть данный виджет — делается это через плагин Widget Logic с условием !is_page(…) — если не понятно как именно, читайте обзор модуля.

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Возможности;
теги Теги: , , , , , , , .

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

  • Денис   01.10.2013

    Как приладить иконку к тегу? иконка выводится шрифтом.

  • Tod   02.10.2013

    Денис, к сожалению, код не отобразился. Если нужна иконка для каждого тега, то это делается через CSS (хотя, возможно, я вопрос неправильно понял).

  • Денис   02.10.2013

    Вот пример того про что я спрашивал
    http://wpkuzen.com/html/redband/blog.html
    Это бутстрап и иконки задаются шрифтом.
    Пример

    CSS не хочется задевать. Нашел фильтры для тегов но они не дают нужного эфекта- ибо иконка получается после тега, а нужно перед тегом.

  • Tod   03.10.2013

    Денис, если честно, с таким не сталкивался. Но даже в том примере разве не через CSS задается? пусть даже и с помощью шрифта, а не картинки.

  • Денис   03.10.2013

    В том примере иконка задается через цсс шрифта, но чтоб ее задать нужно прописать ее таким образом а вот куда ее прописать в облаке тегов ума не приложу.

  • Карина   12.11.2013

    Как изменить цвет тегов? И еще как сделать, чтобы можно было нажать на ссылку под тегами «Посмотреть все теги» и они бы полностью раскрывались?

  • Tod   12.11.2013

    Карина, поменять цвет ссылок можно добавив стиль CSS. С «раскрыванием» сложнее. Вообще я бы на вашем месте поискал плагин/виджет для облака тегов, где было бы и раскрывание и возможность указывать цвета.

  • Jekyn   05.12.2013

    Подскажите каким способом т.е. код вывода random тэга название, просто не кликабельного, что бы вставить можно было в хеадере сайта как текстовое слово.

  • Tod   06.12.2013

    Jekyn, посмотрите параметры функции the_tags — возможно там есть вывод без ссылок.

  • Ольга   03.12.2014

    Здравствуйте! Возможно вы знаете, как реализовать подобное: мне нужно, чтобы в отдельных рубриках выводилось облако меток со своими параметрами, т.е. к примеру, в рубрике № 1 облако меток включала в себя теги № 100 и 101, а в рубрике № 2 включало в себя теги № 200 и 201. Такое возможно реализовать?

  • Tod   04.12.2014

    Ольга, тут 2 пути. Если выводить облако тегов через PHP функцию wp_tag_cloud, то добавляете условия is_category / in_category для той или иной категории. Если через виджет, то тут нужно использовать модуль с условиями для виджетов по типу Widget Logic.

  • Imapo   28.06.2015

    Большое спасибо! Ваша статья очень помогла мне!

  • Дмитрий   15.01.2016

    Здравствуйте! И все-таки как сделать, чтобы облако тегов раскрывалось как список при клике, а выводилось по умолчанию свернутым? Плагины не рассматриваю, только кодом, борюсь за скорость загрузки и оптимизацию.
    Пытался использовать разные варианты, но познаний пока не хватает(

  • Tod   15.01.2016

    Дмитрий, решение без плагинов не находил, а нужно ли? Я, если честно, года 2 делал все без плагинов, а зря — очень удобно и быстро все настраивается. Модули, которые разрабатываются несколько лет, вполне адекватны. Как вариант поискать какой-то самый простой плагин / виджет и подсмотреть код там. Ну, или можно погуглить, думаю, в англоязычных блогах есть решение.

  • Gregoryll   17.03.2016

    Автор, ты просто крут! Только твоя рекомендация помогла! Тебе большой респект! Удачи во всех твоих делах!

  • Tod   18.03.2016

    Gregoryll, спасибо) У меня еще много интересных рекомендаций есть в загашнике)

  • Владимир   17.07.2019

    Подскажите, а на этом сайте стоит делать облако тегов?
    Вот сколько читал, рекомендуют какие-то настройки делать в робот.тхт, чтобы не было задвоения или может все таки каноническая страница от этого спасает? a-rosta.kz/veb-dizajn/

  • Tod   19.07.2019

    Владимир, само по себе облако тегов не производит дублированный контент, это сами теги делают. Как вариант в SEO Yoast можно выключить индексацию меток/тегов и тогда они останутся только как дополнительная навигация для посетителей, поисковые системы будут игронировать их.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости