S3.Blog

22 Октября 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

Готовые решения: WP-Cumulus - "Живое" облако тегов

Дата последнего изменения: 6 Сентября 2009
Метки статьи: Готовые решения, HTML
Для популярного WordPress существует интересный плагин по генерации 3D облака тегов - WP-Cumulus (русская версия плагина), который хоть и изначально предназначен для WordPress, но можно легко вставить в любой HTML, о чем я сейчас и расскажу.
 


 


Согласно документации, заботливо предоставленной автором плагина, установка WP-Cumulus заключается в двух этапах.

  • Этап первый - создание ссылок для 3D облака
    Перечень ссылок для 3D облака можно задать как в отдельном xml-файле, по умолчанию это tagcloud.xml
    <tags>
       <a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a>
       <a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a>
      ...
    </tags>
    tagcloud.xml обязательно должен быть в UTF8

    Так и внутри самого HTML, на котором будет располагаться WP-Cumulus:
    <script type="text/javascript">
    var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>');
    </script>
    
  • Этап второй - установка WP-Cumulus на HTML-страницу
    Существует два способа установки Flash-объекта, а WP-Cumulus это именно flash, в HTML-документ

    • Способ первый: классический:

      При этом способе возможно подключение тегов только с помощью xml-файла

      <OBJECT height="200" width="200">
      <PARAM NAME="movie" VALUE="./tagcloud.swf" />
      <param name="bgcolor" value="#999999" />
      <param name="FlashVars" value="tcolor=0x990000&tspeed=100">
      <embed src="./tagcloud.swf" flashvars="tcolor=0x990000&tspeed=100" type="application/x-shockwave-flash" bgcolor="#999999" width="200" height="200" />
      </embed>
      </OBJECT>
      Описание возможных flashvars смотрите ниже.
       
    • Способ второй: при помощи javascript-библиотеки swfobject.js

      • С использованием XML-файла:
        <script type="text/javascript" src="./swfobject.js"></script>
        <div id="wpcumulus"></div>
        
        <script type="text/javascript">
        var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699");
        
        // тут задаем всевозможные параметры вывода
        // например, цвет:
        wpcumulus.addVariable("tcolor", "0x218dd1"); // и скорость вращения wpcumulus.addVariable("tspeed", "100"); // а тут указываем полный путь к xml-файлу (по умолчанию это tagcloud.xml)
        wpcumulus.addVariable("xmlpath", "/my/path/to/tagcloud/my_tag.xml"); wpcumulus.write("wpcumulus"); </script>
      • С указанием ссылок-тегов внутри HTML
        <script type="text/javascript" src="./swfobject.js"></script>
        <div id="wpcumulus"></div>
        
        <script type="text/javascript">
        var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>');
        
        var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699");
        wpcumulus.addVariable("mode", "tags");
        
        // тут задаем всевозможные параметры вывода
        // например, цвет:
        wpcumulus.addVariable("tcolor", "0x218dd1"); // и скорость вращения wpcumulus.addVariable("tspeed", "100"); // а тут прописываем наши ссылки-теги wpcumulus.addVariable("tagcloud", tags_list); wpcumulus.write("wpcumulus"); </script>
      Описание возможных параметров смотрите ниже 
       
  • Описание допустимых flashvars/параметров

    Название Формат параметра Описание
    mode Строка: tags|cats|both Сообщает, какой тип ссылок используется: теги, категории или оба типа
    distr Строка: true|false Если стоит true, то теги равномерно распространяются по всей видимой области
    tcolor Цвет в 16тиричном коде,
    например 0xff0000 для красного.
    Цвет тегов по умолчанию. Используются стандартные hex-цвета, как и в обычном html, только в начале ставим 0x
    tcolor2 Цвет в 16тиричном коде Вторичный цвет тега. Если параметр установлен, то цвет тега будет состоять из градиента между основным цветом и этим, в зависимости от популярности ссылки
    hicolor Цвет в 16тиричном коде Цвет тега, который будет при наведении на него указателя мыши
    tspeed Цифра: проценты Определяет скорость вращения ссылок. По умолчанию равно 100.
    tagcloud XML-строка Облако тегов. XML-формат описан выше
    xmlpath Путь к XML-файлу URL, по умолчанию это ‘tagcloud.xml
     

Скачать готовые примеры использования WP-Cumulus можно здесь:
  • Оригинальнвя версия(без поддержки русских букв): wp-cumulus-example.zip
  • Русская версия (с поддержкой русских букв): wp-cumulus-rus.zip

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

Some characters are not showing up

Because of the way Flash handles text, only Latin characters are supported in the current version. This is due to a limitation where in order to be able to animate text fields smoothly the glyphs need to be embedded in the movie. The Flash movie's source code is available for download through Subversion. Doing so will allow you to create a version for your language. There's a text field in the root of the movie that you can use to embed more characters. If you change to another font, you'll need to edit the Tag class as well.

О том, как добавить в "облако" другие языки и шрифты, читайте здесь: How to add more characters to WP-Cumulus


Похожие материалы:




Kenshin (гость) • ответить
Подключил русскую версию классическим способом - через OBJECT - прекрасно работает, спасибо
Но у меня не получается реализовать вариант подключения облака с указанием ссылок-тегов внутри HTML, а хотелось бы именно так
при таком подключении всё равно выводится облако с тегами из tagcloud.xml и наверное вот почему:
>> xmlpath | Путь к XML-файлу | URL, по умолчанию это ‘tagcloud.xml’

ладно.. удаляю tagcloud.xml и теперь облако выводится совсем пустым (без тегов)
делал всё как описано, код копировал из примера - всё равно не работает
теги из tags_list напроч отказываются выводиться.. помогите разобраться
Александрответить
Но у меня не получается реализовать вариант подключения облака с указанием ссылок-тегов внутри HTML, а хотелось бы именно так

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

можете более подробно описать проблему?
Kenshin (гость) • ответить
хочу подключить вот так:
С указанием ссылок-тегов внутри HTML

но невыходит. при этом подключении он у меня тоже выводит облако тегов из XML-файла, а если его нет, то облако пустое
Александрответить
а вы такой пример используете? 1-в-1?
<script type="text/javascript" src="./swfobject.js"></script>
<div id="wpcumulus"></div>

<script type="text/javascript">
var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>');

var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699";
// тут задаем всевозможные параметры вывода
// например, цвет:
wpcumulus.addVariable("tcolor", "0x218dd1";

// и скорость вращения
wpcumulus.addVariable("tspeed", "100";

// а тут прописываем наши ссылки-теги
wpcumulus.addVariable("tagcloud", tags_list);

wpcumulus.write("wpcumulus";
</script>
Александрответить
можете показать ваш код подключения облака?
Kenshin (гость) • ответить
Да, использую именно этот пример 1-в-1. Ни одного байта в нём не менял.
Можете сами в этом убедиться - создал тестовую страничку здесь
Файлы tagcloud.swf и swfobject.js лежат в той же директории, что и сама страничка.
Всё как положено. Но облако всё равно по какой-то причине пустое
Есть идеи?
Александрответить
ааа... пардон!
после строки var wpcumulus = new SWFObject.....
добавьте вот такую строку:
wpcumulus.addVariable("mode", "tags" ) ;
Kenshin (гость) • ответить
Во! Спасибо большое! Так всё работает
Гость (гость) • ответить
Огромное спасибо за подробно и доступно изложенный материал!
Kisur (гость) • ответить
Спасибо. Всё работает (особенно понравился режим transparent)

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.