Movable Typeでタグクラウドを設置する

Movable Typeでタグクラウドを設置する

タグクラウドの設置メモです。
MovableTypeのウィジェットをベースにしてます。

ウィジェット用HTMLとCSS

<!-- html -->
<mt:Tags sort_by="rank">
<mt:If name="__first__">
<div class="widget_tagcloud widget">
<h4>タグクラウド</h4>
<ul>
</mt:If>
<li class="rank-<$mt:TagRank max="10"$>"><a href="<$mt:TagSearchLink encode_js="1"$>"><$mt:TagName$></a></li><mt:If name="__last__">
</ul>
<!-- .widget_tagcloud/.widget --></div>
</mt:If>
</mt:Tags>

/* css */
.widget_tagcloud ul { list-style: none; }
.widget_tagcloud ul li { display:inline; }
.widget_tagcloud ul li.rank-1 { font-size:125%; }
.widget_tagcloud ul li.rank-2 { font-size:120%; }
.widget_tagcloud ul li.rank-3 { font-size:115%; }
.widget_tagcloud ul li.rank-4 { font-size:110%; }
.widget_tagcloud ul li.rank-5 { font-size:105%; }
.widget_tagcloud ul li.rank-6 { font-size:100%; }
.widget_tagcloud ul li.rank-7 { font-size:95%; }
.widget_tagcloud ul li.rank-8 { font-size:90%; }
.widget_tagcloud ul li.rank-9 { font-size:85%; }
.widget_tagcloud ul li.rank-10 { font-size:80%; }

URLを最適化

このままだとURLが長いのでURLの最適化を行います。

最適化前

http://miauler.net/mt/mt-search.cgi?IncludeBlogs=2&tag=タグクラウド&limit=20

最適化後

http://miauler.net/blog/tag/タグクラウド/

ウィジェットを変更

<!-- html -->
<mt:Tags sort_by="rank">
<mt:If name="__first__">
<div class="widget_tagcloud widget">
<h4>タグクラウド</h4>
<ul>
</mt:If>
<li class="rank-<$mt:TagRank max="10"$>"><a href="<$MTBlogURL$>tag/<$MTTagName encode_url="1"$>/" rel="tag"><$mt:TagName$></a></li>
<mt:If name="__last__">
</ul>
<!-- .widget_tagcloud/.widget --></div>
</mt:If>
</mt:Tags>

.htaccessに以下を追加

RewriteEngine on
# タグクラウドURL最適化
RewriteRule ^blog/tag/(.*)/+ mt/mt-search.cgi?IncludeBlogs=2&tag=$1&limit=20

.htaccessはウェブサイト側のテンプレートで作成、タグクラウドはブログのウィジェットという構成なので、ちょっと迷走しましたが何とかうまくいきました。

参考サイト

下のボタンを押すと拍手送信＆メッセージフォームが開きます。→WEB拍手お返事

関連記事