memo.xight.org

日々のメモ

WP-Cumulus - タグを3Dで表示する WordPress プラグイン

Summary

タグを3Dで表示し、グリグリと動かすことができる。
WordPressでなくとも利用できる。

WP-Cumulus

Usage

swfobject.js と tagcloud.swf を配置する。
swfobject.js を <head> 内で読み込む。

<div id="flashcontent">
  This will be shown to users with no Flash or Javascript.
</div>


XMLファイルを読み込まない場合

<script type="text/javascript">
var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#336699");
so.addParam("wmode", "transparent");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tcolor", "0xff0000");
so.addVariable("hicolor", "0x000000");
so.addVariable("tagcloud", "<tags><a href='http://www.roytanck.com/tag1' style='9'>Tag name</a><a href='http://www.roytanck.com/tag2' style='12'>Tag two</a></tags>");
so.write("flashcontent");
</script>


XMLファイルを読み込む場合

<script type="text/javascript">
var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#336699");
so.addParam("wmode", "transparent");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tcolor", "0xff0000");
so.addVariable("hicolor", "0x000000");
so.addVariable("xmlpath", "tagcloud.xml");
so.write("flashcontent");
</script>


XMLファイルのサンプル

<tags>
<a href="http://example.com/tag/1" class="tag-link-1" title="X topics" rel="tag" style="font-size: 20pt;" color="0xff9900">one</a>
<a href="http://example.com/tag/2" class="tag-link-2" title="Y topics" rel="tag" style="font-size: 20pt;" color="0x00ff99">two</a>
<a href="http://example.com/tag/3" class="tag-link-2" title="Z topics" rel="tag" style="font-size: 20pt;" color="0xff0099">three</a>
</tags>


Reference

ROYTANCK.COM - 2008-05-19 - How to repurpose my tag cloud Flash movie
http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/

wordpress.org - WP-Cumulus
http://wordpress.org/extend/plugins/wp-cumulus/