Как сделать интерактивное облако на сайте

Миниатюра

Я расскажу вам о установке, настройке и изменении интерактивного облака на сайте. Данное облако содержит огромное количество настроек. Позволяет выводить Облако Тегов статей, Тегов меню, Облака авторов комментариев, Облака Недавних статей, Облака Архивов статей. В каждом облаке настраивается вывод веса тегов по цветам, размеру. Интерактивные события, скорости вращения и др. настройки. Можно написать собственные функции обработки!

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

Вы можете посмотреть мой обзор настроек, чтобы понять что где и зачем.

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

В будущем я полностью переведу данный плагин с английского языка на русский. Это особенно актуально для настроек виджета. Настроек тьма-тьмущая и без хорошего знания английского языка разобраться в них тяжело.

Свяжусь с автором плагина (если возможно) и обсудим с ним возможность встраивания моего перевода для Рунета.

Пока планирую продавать свой перевод плагина за символическую плату. Думаю 100 руб небольшая цена за мои усилия.

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

Я перепробовал множество разных плагинов по интерактивным облакам, и Я СЧИТАЮ ЧТО ДАННЫЙ ПЛАГИН ЛУЧШИЙ В ДАННОМ СЕГМЕНТЕ!

Итак, начнем!
0. Интерактивное облако

Интерактивное облако на моем сайте выводится в боковом слайдере.

Данное облако интерактивно, реагирует на положение курсора, выводит подсказки, содержит множество вкладок, выводящих различные виды облака

0.1.-Вкладки-Интерактивного-облака

Вкладки Интерактивного облака. Облако Тегов статей, Тегов меню, Облака авторов комментариев, Облака Недавних статей, Облака Архивов статей.

1. Интерактивное облако

1. Интерактивное облако. Реагирует на положение курсора, вращаясь в соответствующую сторону, можно зафиксировать вращение по осям х, у (в настройках)

1.0. Подбор цветов и Получение Html представление цвета

1.0. Подбор цветов и Получение Html представление цвета. Для этого вам крайне полезен данный сайт — для примера (есть много аналогичных)

1.1. Установка плагина 3D WP Tag Cloud

1.1. Установка плагина 3D WP Tag Cloud. Установка и активация плагин происходит как обычно, без проблем.

1.2. Установка и настройка виджета 3D WP Tag Cloud

1.2. Установка и настройка виджета 3D WP Tag Cloud. После установки плагина, необходимо в виджетах установить виджет интерактивного облака (3d wp tag cloud M widget) в необходимый сайдбар сайта

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

1.3. Необходимо включить «режим специальных возможностей». Это требование плагина. Иначе не получится зайти в настройки виджета!

1.4. Включим режим специальных возможностей

1.4. Включим режим специальных возможностей

1.5. Теперь можно изменить настройки виджета

1.5. Теперь можно изменить настройки виджета

2. Настройки плагина

2. Настройки плагина (Виджета). Настроек ОГРОМНОЕ количество. Они разделены по вкладкам. Вкладки по сути есть вкладки на Интерактивном облаке, которое можно сразу увидеть на сайте, не изменяя настроек!

2.1. Первая вкладка настроек плагина

2.1. Первая вкладка настроек плагина

Что мы можем настроить:

  • Наименование облака (у меня «интерактивное облако»)

  • Размер прямоугольника с наименование облака

Общие настройки:

  • Тип облака — Динамический или статичный (Если у кого то проблемы с настройкой Java в браузере, то можно облако сделать статичным). При статичном отображении анимация отключена — повышает производительность

  • Какие вкладки облака отображать, в какой вкладки начинать показ. Вкладки следующие:

- Облако Тегов статей

— Тегов меню

— Облака авторов комментариев

— Облака Недавних статей

— Облака Архивов статей

— Облако страниц сайта

  • Шрифт, используемый при выводе текста в облаке

  • Цвет текста

  • Цвет рамок вокруг текста

  • Тень вокруг текста

  • Цвет активного фона вокруг текста

  • Высота облака в пикселах

  • Направление вращения облака (слева направо, и наоборот)

  • Подсказки, выводимые если курсор неподвижен

  • Радиус колеса облака (в котором вращается облако текста)

  • Цвет заднего фона вокруг колеса облака

Настройки виджета:

  • C++ Функция, выводящая центральный элемент внутри колеса облака, настройки направления вращения, степени прозрачности

  • Http адрес векторного изображения (.png), выводимого, если используется кубическая функция С++, можно настроить адрес http выводимого изображения

  • Если используется функция вывода текста, то можно настроить (Портрет/ландшафт, масштаб, размер рамки, размер шрифта, вес шрифта)

  • Можно настроить сроки текста, выводимого в центре колеса облака, а также цвет текста, фона, цвет рамки, шрифт

  • можно указать собственную функцию (написав или скачав ее с интернета) вывода с интерактивными возможностями (например реакция на положение курсора)

2.2.-Настройка-центрально-элемента-облака

2.2. Настройка центрально элемента облака (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.3.-Настройка-центрального-элемента-облака

2.3. Настройка центрального элемента облака (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.4.-Настройка-облака-тегов-статей

2.4. Настройка облака тегов статей (Слева видим настройки, Справа видим результат, отображаемый на сайте).

Что мы можем настроить:

  • Форма облака (круг, сфера, цилиндр и т.п.)

  • Число меток (тегов) статей

  • Вес статей (чем больше статей, в которых встречается тег, тем больше у тега вес). Настройки отображения веса:

— Галка (использовать вес или нет)

— Как отображать различные веса у разных тегов (с помощью разного ЦВЕТА ТЕКСТА, с помощью разного РАЗМЕРА ТЕКСТА, оба способа одновременно)

— фактор веса (чем больше фактор, тем больше разница в размерах на облаке)

  • Настройки выделения текста курсором.

— Галка (включить, выключить)

— минимальная прозрачность (если курсор наведен на текст, он пульсирует цветом (прозрачность изменяется от минимальной до максимальной))

— максимальная прозрачность пульсации

— зафиксировать вращение (если включено, то облако постоянно вращается)

  • Подсказка (на русском или английском языке), выводимая при неподвижном курсоре

  • Размеры (Если тип облака — Цилиндр, то можно изменить радиусы, высоту, ширину и т.п.)

  • Цвет текста, рамки, тени, внешнего фона

  • Цвета текста при изменении веса (так называемый Градиент текста)

  • Можно посмотреть примеры градиентов

  • Настройка Шрифтов — тень, размер, блюр тени (спец. эффект)

  • Web-шрифт или Гугл-шрифт

  • Настройка скорости вращения по различным осям (если включено постоянное вращение)

2.5.-Настройка-облака-недавних-статей

2.5. Настройка облака недавних статей (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.6.-Настройка-облака-категорий-статей

2.6. Настройка облака категорий статей (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.7.-Настройка-вывода-авторов-комментариев

2.7. Настройка вывода авторов комментариев (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.8.-Настройка-вывода-облака-архивов-статей

2.8. Настройка вывода облака архивов статей (Слева видим настройки, Справа видим результат, отображаемый на сайте).

2.9.-Настройка-тегов-меню

2.9. Настройка тегов меню (Слева видим настройки, Справа видим результат, отображаемый на сайте).

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

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

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

Ждите полного перевода от меня. Сделаю скоро!

Всем счастливо, пока!

Теги: , ,

>