長いこと、いじろうと思っててほったらかしになってたタグクラウドをいじることにしました。
一応2011年5月31日の記事で、自分が描いてたタグクラウドが表示されていたので、それはそれでよかったんです。
記事を書くたびにタグはきっちり付けていこうと思っていたので、その数はどんどん増えていくだろうと思っていました。実際増えていってます。
そこで、トップページには少数のタグだけ表示しておき、全部のタグは別のページに表示したいと前から思ってたわけです。で、ほったらかしになってたんですな。
↓ これが現在の状態。「もっと見る」のリンクは貼られていません。
あら？削除されてる
それで、以前からちょくちょく参考にさせていただいてたブログがありまして、別ページにタグクラウドを表示するってことをされてました。bzbellさんのMovable Type 備忘録というブログだったんですが、削除されていて表示できませんでした。
実は6/4に書いた「関連記事を付けてみた」で使用したプラグインが、このタグクラウドを別ページに表示させる方法でも使われていたのです。一石二鳥！っと思ってたのに。
でまぁ、色々検索してみたんやけど・・・実際にページに施したって人は見つかったけど、とうとう詳しくはわかりませんでした。
もう1つの問題はトップページのそのタグクラウド、8段階の40単語表示なんやけども、現在名前順に並んでいます。数ある中から抜粋して40個出してるのに、名前順て！と思うことです。リファレンスにも 書いてますが、他のソート方法はあるけど、あまり良さそうじゃないな～って感じ。
結論
- 別ページ表示の全タグは、最初何か凝ろうと思ってたけど、それはやめて、名前順にして普通に表示。
- トップページのタグクラウドは、なにか違った条件でソートするようにする。
・・・となりました。
別ページに全タグ表示
この方法が正しいかということは置いといて、うまく表示できたのでその方法を。
1）インデックステンプレートでアーカイブインデックスにチェックを入れ、「テンプレートの複製」をする。コピーが出来上がる。
2）コピーを開いて、下記のように書き換える。
- タイトル： タグ一覧
- 出力ファイル名： tagcloud.php
- 種類： アーカイブインデックス
内容は、赤字部分をゴッソリ削除し、ウィジェット「タグクラウド」の青字部分を入れ替えて保存。
<div id="content">
<div class="blog">
<mt:IfArchiveTypeEnabled archive_type="Category">
…
</mt:IfArchiveTypeEnabled>
</div>
</div>
↓
<div id="content">
<div class="blog">
<ul id="tags">
<mt:tags limit="0" sort_by="name">
<li class="module-list-item taglevel<mt:tagRank max="8" />">
<a href="<mt:tagSearchLink />"><mt:tagName /></a>
</li>
</mt:tags>
</ul>
</div>
</div>
トップページのタグクラウド変更
最新記事に使われたタグを表示することにしました。
[参考サイト]
最新10件の記事で使われているタグのうち5つのタグをタグクラウドで表示
ウィジェットのタグクラウドで、赤字部分を青字部分に書き換え。変更は、20単語表示にしていることと、すでに記述されているスタイルシートでスタイルが反映されるようにしました。
<dd class="side">
<ul id="tags">
<mt:tags limit="40" sort_by="name">
<li class="module-list-item taglevel<mt:tagRank max="8" />">
<a href="<mt:tagSearchLink />"><mt:tagName /></a>
</li>
</mt:tags>
</ul>
</dd>
↓
<dd class="side">
<MTSetVar name="i" value="20">
<MTEntries lastn="30">
<MTEntryTags>
<$MTTagName setvar="tagname"$>
<MTUnless name="seen{$tagname}">
<MTIf name="i" gt="0">
<MTSetVar name="i" op="--">
<MTSetVar name="seen" key="$tagname" value="1">
<MTSetVarBlock name="push(tag_htmls)">
<li class="module-list-item taglevel<$mt:TagRank max="8"$>"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li>
</MTSetVarBlock>
</MTIf>
</MTUnless>
</MTEntryTags>
</MTEntries>
<ul id="tags">
<MTLoop name="tag_htmls">
<MTVar name="__value__">
</MTLoop>
</ul>
</dd>
↓ 仕上がった感じ。
仕上げ
ちょっと文字が詰まってしまってるので、スタイルシートを変更して間隔を開けて、下のような背景を用意して、隙間を埋めました。赤字が変更部分。
ul#tags {
margin-top: 5px;
padding: 0.5em 0px;
line-height: 1.3;
background-image: url(<$mt:BlogURL$>image/tagback.gif);
}
↓ 使用背景。ゴチャゴチャ感が出ますね。
↓ 仕上がった感じ
