Как создать облако тегов: бесплатные плагины и сервисы

Облако тегов, оно же облако слов, – это специальный блок на сайте, который содержит названия разделов или какие-то ключевые слова. Облако слов на сайте может использоваться в качестве навигационного или дизайнерского элемента.

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

Рассмотрим бесплатные сервисы и WordPress-плагины, которые помогут вам создать облако тегов на своем сайте.

Так выглядит облако тегов в блоге TexTerra – оно выполняет навигационную функцию

Немного теории

Функции, которые может выполнять облако тегов

  1. Навигация. Облако тегов удобно для навигации новых посетителей вашего сайта: всего за несколько секунд оно позволяет сформировать весьма точное представление о контенте и темах, которые раскрываются на вашем ресурсе.
  2. Перелинковка. Посетитель с высокой долей вероятности перейдет по интересующему его слову и окажется на новой странице сайта.
  3. Акцент на главном. Облако тегов позволяет сделать акцент на главных темах сайта и напомнить о других статьях по интересующей посетителя тематике.

Как выглядит облако тегов

Выглядеть облако с ключевыми словами может абсолютно по-разному. Его форма, размеры, шрифты – все это кастомизируется. Самые первые облака тегов были довольно примитивными – в них использовались стандартные, скучные шрифты. Отличался только размер кегля:

Чуть позже появились красивые трехмерные облака, которые создавались при помощи флеша (сейчас эта технология уже неактуальна) или при помощи того же HTML. Сегодня создать красивое и функциональное облако можно буквально в пару кликов. Как это сделать – узнаем далее.

Стандартное облако меток на WordPress-сайте

Как создать облако тегов

Сделать это можно как вручную, так и при помощи автоматических инструментов. К последним относятся готовые плагины для CMS и онлайн-сервисы.

Какой именно инструмент использовать для создания облака тегов, зависит от вашего сайта. Если он полностью самописный, возможно, придется прописывать HTML или воспользоваться инструкцией, которую предлагает выбранный вами сервис. Если же сайт работает на одной из популярных CMS, то можно обойтись плагином.

Установка «неродного» вашей CMS облака часто происходит путем интеграции HTML-кода в шаблон сайта.

Облако тегов на WordPress

Облако тегов изначально появилось в CMS WordPress. И по сей день там его можно настроить без всяких плагинов, достаточно активировать облако в виджетах:

Как создать облако тегов: бесплатные плагины и сервисы

Такое облако будет выводить теги, которые были присвоены минимум одной записи на сайте. Добавить это облако меток можно как в подвал, так и в сайдбар.

##READMORE_BLOCK_3121##

Конечно, это стандартный, а значит – безликий с точки зрения дизайна блок. Так что он может просто не подойти к дизайну вашего сайта:

Как создать облако тегов: бесплатные плагины и сервисы

Кастомизировать дизайн стандартного облака меток WordPress можно при помощи редактирования системного файла functions.php. Останавливаться подробнее не буду, так как придется кодить и это не совсем простой для обычных пользователей способ. Поэтому для кастомизации стандартного облака меток WordPress я рекомендую использовать сторонние плагины.

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

Бесплатные WordPress-плагины для создания интерактивного облака тегов

Плагинов для облака тегов много, но некоторые устарели. Я предлагаю познакомиться только с актуальными расширениями, которые точно работают на последней версии WordPress.

Cool Tag Cloud

Один из самых популярных плагинов – это Cool Tag Cloud от разработчика WPKube.

Облака тегов, созданные с помощью Cool Tag Cloud
Облака тегов, созданные с помощью Cool Tag Cloud
Облака тегов, созданные с помощью Cool Tag Cloud

Облака тегов, созданные с помощью Cool Tag Cloud

С точки зрения функционала плагин вполне неплох, но ничего особо выдающегося здесь нет. Учтите, что дизайн облака Cool Tag Cloud также весьма специфичен и может не вписываться в оформление вашего сайта. Тем не менее, свою главную функцию – создание облака с интерактивными ссылками – плагин выполняет отлично.

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

Как создать облако тегов: бесплатные плагины и сервисы

HTML5 Cumulus

Это плагин с многолетней историей. Ранее назывался WP-Cumulus. Созданное с его помощью облако тегов будет правильно выводиться не только в десктопных, но и в мобильных браузерах. Например, так:

Примеры облаков, созданных в HTML5 Cumulus
Примеры облаков, созданных в HTML5 Cumulus

Примеры облаков, созданных в HTML5 Cumulus

Плагин работает через виджет сайдбара. На выходе мы получаем трехмерное облако тегов с возможностью доскональной настройки:

Название, исключение/добавление тегов, размеры, форма облака

Настраиваются цвета фона и тегов (основной и выделенный)

Чтобы воспользоваться плагином, просто установите его через админку WordPress. Затем откройте раздел «Внешний вид», кликните пункт «Виджеты» и добавьте Cumulus в сайдбар.

Tag Groups

Мощный плагин, позволяющий организовывать теги WordPress в группы (либо в алфавитном порядке) и отображать их в облаке.

К сожалению, плагин не поддерживает кириллицу.

Так выглядит облако Tag Groups на странице (обратите внимание на сортировку по алфавиту):

Использовать облако тегов Tag Groups можно в постах, на страницах и прямо в виджетах
Использовать облако тегов Tag Groups можно в постах, на страницах и прямо в виджетах
Использовать облако тегов Tag Groups можно в постах, на страницах и прямо в виджетах

Использовать облако тегов Tag Groups можно в постах, на страницах и прямо в виджетах

Всего доступно пять видов облаков (вкладки, «аккордеон», список, алфавитный порядок).

Как создать облако тегов: бесплатные плагины и сервисы

Для тегов в облаке можно настроить:

  1. Группировку по языку или теме.
  2. Алфавитный указатель тегов.
  3. Отображение тегов только выбранных групп.
  4. Ссылки, текст, размер шрифта или разделитель элементов облака тегов.

Creative Tag Cloud

Интересный плагин, который позволит выделить ваш WordPress-сайт при помощи красочного облака тегов. Необычное отображение тегов в облаке – волнообразное или спиральное:

Плагин Creative Tag Cloud позволяет создавать облака необычной формы. Чем чаще используются теги, тем они крупнее (расположены в начале спирали или волны)
Плагин Creative Tag Cloud позволяет создавать облака необычной формы. Чем чаще используются теги, тем они крупнее (расположены в начале спирали или волны)

Плагин Creative Tag Cloud позволяет создавать облака необычной формы. Чем чаще используются теги, тем они крупнее (расположены в начале спирали или волны)

Созданные облака можно вставлять в посты или использовать на страницах. Просто вставлять их через виджет или проставлять на странице/в посте шорткодом.

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

3D Tag Cloud

3D Tag Cloud позволяет создать вращающиеся (трехмерные) теги на любой странице вашего сайта.

Как создать облако тегов: бесплатные плагины и сервисы

В новой версии (в панели администратора) добавлены новые параметры:

Настраиваются название виджета, количество тегов, длина и ширина, цвета

Шрифт, максимальный и минимальный размер

Плагин позволяет кастомизировать:

  1. Название облака тегов.
  2. Количество отображаемых тегов.
  3. Высоту и ширину виджета.
  4. Цвет фона.
  5. Цвет текста.
  6. Шрифт.
  7. Максимальный размер шрифта.
  8. Минимальный размер шрифта.

Чтобы получить симпатичное облако, так же, как и с предыдущим плагином, придется основательно поэкспериментировать с настройками.

Categorized Tag Cloud

Categorized Tag Cloud, или «Облако категоризированных тегов» – это плагин для WordPress, позволяющий создать облако с ручным добавлением тегов. Размещение – только в сайдбаре.

Как создать облако тегов: бесплатные плагины и сервисы

Слова внутри облака фильтруются по категориям + можно удалить все ненужные теги и добиться максимальной релеватности контенту своего сайта.

Настроить можно следующие параметры:

  • фильтры категорий;
  • количество отображаемых тегов;
  • цвета тегов (фиксированные или случайные);
  • цвет при наведении на тег;
  • наименьший и наибольший размер шрифта.

##READMORE_BLOCK_48133##

Бесплатные сервисы для создания дизайнерского облака тегов

Эти сервисы позволяют создать «автономное» облако тегов. На выходе вы получите так называемые SVG-фигуры (SVG – это формат векторной графики).

По умолчанию слова в таком облаке будут некликабельными. Но есть как минимум три способа сделать их интерактивными:

  • первый способ – использовать SVG-элемент <a>. Его нужно добавить в разметку – просто оберните интересующий вас элемент в <a>, и получите кликабельное слово в облаке;
  • использовать карты изображений;
  • использовать свойство Clip-path.

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

Word Cloud Generator

Чтобы начать редактировать свое первое облако, необязательно даже регистрироваться, указывать e-mail или что-то еще. Достаточно открыть сайт и указать список всех ключевых слов, при необходимости – настроить отображение облака:

Как создать облако тегов: бесплатные плагины и сервисы

На выходе получим примерно такое облако:

Как создать облако тегов: бесплатные плагины и сервисы

Сервис полностью поддерживает кириллицу и позволяет настраивать угол (ориентацию) слов по отношению друг к другу. Также доступна настройка шрифта, общего количество слов, можно указать одно слово на линию.

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

Tagxedo

Незамысловатый, но функциональный сервис. Продуманный интерфейс с минимальным функционалом. На старте предлагает создать обычное облако слов или облако из ваших блогов, твитов, меток:

Как создать облако тегов: бесплатные плагины и сервисы

Доступно более десятка оригинальных тем. Кроме этого, можно настроить десяток других параметров: ориентацию слов, форму, шрифт.

Пример галереи, созданной благодаря Tagxedo

Единственный, но значимый недостаток – сервис не работает в Google Chrome, так как в нем отсутствует поддержка технологии Silverlight.

Wordart

Еще один простой и удобный онлайн-конструктор облака слов, позволяющий создавать их в самых неожиданных формах и сочетаниях:

Облака тегов, созданные с помощью Wordart
Облака тегов, созданные с помощью Wordart
Облака тегов, созданные с помощью Wordart
Облака тегов, созданные с помощью Wordart

Облака тегов, созданные с помощью Wordart

Чтобы создать собственное облако слов, выбираем пункт Create now и сразу попадаем в интерфейс конструктора:

Облака тегов, созданные с помощью Wordart

Как видим, интерфейс здесь – один из самых сложных, даже по сравнению с ранее рассмотренными нами сервисами. Давайте разберемся с разделами и настройками подробнее.

Самый интересный – Shapes: здесь мы можем выбрать форму конечного облака (а еще добавить свое изображение и сделать из него облако). Здесь очень разнообразная коллекция форм облаков. Например, вот формы по рождественской тематике:

Облака тегов, созданные с помощью Wordart

Кстати, Wordart, на моей памяти, – единственный сервис, позволяющий создать полноценное анимированное облако меток.

В Layout можно кастомизировать ориентацию (угол) слов:

Облака тегов, созданные с помощью Wordart

В Words вносим новые слова, их можно указать не только вручную, но и импортировать из уже существующего документа:

Облака тегов, созданные с помощью Wordart

По-настоящему здорово, что для всех элементов можно назначить различный размер (индивидуальный), а также изменить цветовое сочетание.

Завершив формирование облака при помощи настроек, можно выбирать пункт Visualize.

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

Word it out

Самый «спартанский» сервис. Здесь нет сотен шаблонов, огромного количества настроек и других плюшек. Зато сервис легкий и ничем не перегружен. Он позволит создать самое простое облако тегов, небольшого размера, но с весьма симпатичным шрифтом. Достаточно ввести все слова в поле Original Text:

Облака тегов, созданные с помощью Wordart

Настройки есть, но их немного. Можно указать минимальное количество букв в слове, фильтрованные слова и символы пунктуации, которые не будут использоваться в облаке:

Облака тегов, созданные с помощью Wordart

Можно поменять: цвет фона, цвет слов. Есть поддержка кириллицы.

Доступны следующие шрифты:

Облака тегов, созданные с помощью Wordart

Так выглядят остальные настройки:

Облака тегов, созданные с помощью Wordart

После ввода всех ключевых слов выбираем пункт Generate и наблюдаем результат:

Облака тегов, созданные с помощью Wordart

Послесловие

Облако меток как элемент сайта многие считают весьма устаревшим. Обычно говорят, что его функционал полностью заменил поиск по сайту. Но по-моему, это абсолютно не так. Почему? Допустим, вы видите перед собой поисковую строку на каком-либо тематическом ресурсе. Мотивирует ли она вас ввести какую-либо фразу и что-то поискать? Я очень сильно в этом сомневаюсь. Другое дело – облако тегов. Оно притягивает наш взгляд, заставляет изучать содержимое и на каком-то неведомом уровне «заставляет» кликнуть по интересующему слову. Немаловажно, что для поиска ничего не нужно вводить – все и так как на ладони.

Таким образом, облако тегов не является заменой поисковой строки на сайте. Это совсем другой инструмент, с другим функционалом, который при грамотном использовании улучшит поведенческие факторы вашей аудитории. Как минимум, увидев красивое облако меток, посетитель задержится на странице, чтобы изучить его подробнее. А это уже прямое влияние на метрику «Время на сайте».

##READMORE_BLOCK_54696##