짜잔~ Cumulus for TiStory 공개 (버그수정)

블로그의 구성요소 중 태그목록은 좋은 기능이긴 하지만, 미관상 그닥 예쁘지 않아 정작 쓰는 사람이 많지는 않다.
태그목록의 기능은 그대로 유지하면서도 보기에도 멋있는 기능을 구현한 플러그인으로 WP-Cumulus가 있다.

WP-Cumulus

이 플러그인은 Roy Tanck라는 분이 공개한 워드 프레스용 명품 플러그인이다.
하지만, 우리나라에서 그리고, 티스토리 환경에서 사용하기엔 한계가 있었다.

1. 워드 프레스 용으로 개발되어 티스토리 환경에서는 많은 변형이 필요함
2. 글꼴이 swf 파일에 포함되어있는데, 영문 글꼴만 포함되어 있음

이 두 가지 한계를 극복한 티스토리용 Cumulus를 공개한다.

짜잔~ Ti-Cumulus

설치과정은 아래와 같다.


1. 파일의 설치

아래 링크를 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 올린다.

TiCumulus.zip

2. 스킨 수정

스킨을 직접 편집해서 아래와 같은 내용을 찾는다.

<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>

스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다. (& 출력 버그 수정: 2009. 5. 22)

<div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
  </s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
  var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
  t.addVariable("tcolor", "0x222222");
  t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");
  t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
  t.write("TiCumulus");
</script>

조금 길지만 소스 보기를 한 뒤에 복사하면 된다.
9행의 "100%", "200"은 각각 가로, 세로의 크기이다. 그리고, "#ffffff"는 배경의 색상이다.
(정식 플러그인이 아니라 비주얼한 설정은 불가능함. ㅠ.ㅠ)

그리고, 10행의 "0x222222"는 태그의 기본색상이다.

덧1. 인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.

덧2. mepay님. 코드가 약간 수정되었습니다. 해당되는 부분을 찾아 똑같이 수정하시기 바랍니다.

덧3. rezlog에 텍스트큐브용 Cumulus가 공개되었지만, 설치형에서의 용량의 압박때문에 anti-aliasing이 안 되도록 만들어졌다. Ti-Cumulus는 가입형 티스토리의 장점을 십분 활용해서 anti-aliasing기 적용된 미려한 모습을 보여준다.

덧4. 태그 중에 &(amp)가 들어가면 태그가 표시되지 않는 버그가 있었다.
태그 중에 &가 있으면 공백으로 대치하도록 수정했다. (2009. 5. 22)