Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

TagCloud(タグクラウド)をもっと便利に…

MovableType(ムーバブルタイプ) 3.3から追加されたエントリ・タグを使って、サイドバーなどにTagCloud(タグクラウド)を表示している人も多いかと思います。

そんなTagCloud(タグクラウド)でのエントリ検索をもっと使いやすいようにカスタマイズしてみました。

どんなふうにカスタマイズしたのかというと、TagCloud(タグクラウド)から目的のタグをクリックしたら別ウィンドウに目的のタグに関連するエントリ一覧を表示させてみたんです。
そしたら、格段に使いやすくなったと自分では思っています。

わたしが他の人のブログを訪問したとき、TagCloud(タグクラウド)があれば使ってみたりしますが、どれもタグをクリックすると画面が変わってしまって他のエントリを見るのに、いちいち戻らなければならないので、ちょっと不便を感じたのがきっかけです。

MovableType(ムーバブルタイプ)でTagCloud(タグクラウド)を表示するといったら、以下の2通りがポピュラーなカスタマイズだと思います。

では、カスタマイズについて説明します。

以下のJSをコピペして、popup.jsというファイル名で保存してください。

function OpenTagSearch(c){
navi1=window.open(c,"TagSearch","resizable=no,menubar=no,directories=no,status=no,location=no,width=600,height=740");
}

青い字の部分を各自のお好みで修正します。保存したら、サーバにアップロードしてください。アップロード先はどこでも構いませんので、各自の環境に合わせてアップロードします。

次に、TagCloud(タグクラウド)を表示しているテンプレートをポップアップ表示するよう修正します。以前、コメント投稿フォームをポップアップ画面にするやトラックバック一覧をポップアップ画面にするで紹介したカスタマイズの要領で行います。

まず、以下のコードを<head>～</head>の間に追加します。

次に、TagCloud(タグクラウド)の各タグのリンクを以下のように変更します。

<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate
format="%Y-%m-%d"$>"><a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&delimiter=,&search_key=Tagwire&search=<$MTTag
encode_url="1"$>" onclick="OpenTagSearch(this.href); return false;"><$MTTag$></a></li>

青い字の部分を追加します。一通り追加したら、いつものように保存して再構築してください。

最後に、テンプレート・モジュールのXSearch Tagwireを修正します。以下のコードは指定されたタグに関連するエントリ一覧を表示するところのコードにあたります。

<a href="<$MTEntryLink$>" onclick="javascript:window.opener.location.href='<$MTEntryLink$>';
return false;"><$MTEntryTitle$></a>

やっぱり、青い字の部分を追加します。追加したら保存してください。

表示確認します。 TagCloud(タグクラウド)から適当なタグをクリックして、

を、確認してください。
以上で、tagwireプラグインを使ったTagCloud(タグクラウド)のカスタマイズは完了です。

カスタマイズ内容は、tagwireプラグインの場合と同様です。まず、tagwireプラグインと同様、JSサーバにアップロードしてください。そして、<head>～</head>の間に定義を追加します。

次に、TagCloud(タグクラウド)を表示しているテンプレートをポップアップ表示するよう修正します。わたしが別なブログのサイドバーに表示させているTagCloud(タグクラウド)のコードを例にして説明します。

<dl class="tagcloud">
<dt class="tagcloud-header">タグクラウド</dt>
<MTTags>
<dd class="tagcloud-tags"><a class="tags-rank<$MTTagRank$>"
href="<$MTTagSearchLink$>" onclick="OpenTagSearch(this.href); return false;"><$MTTagName$></a></dd>
</MTTags>
<dt class="tagcloud-footer"></dt>
</dl>

タグのリンクを表示する部分に青い字のコードを追加しています。

次に、検索結果・テンプレートを変更します。 MovableType(ムーバブルタイプ)管理画面からブログのテンプレート一覧を表示します。そして、画面上にある「システム」をクリックすると、コメント・プレビューなどのテンプレート一覧が表示されます。その中から「検索結果」をクリックしてください。

タグ検索結果を表示している箇所を探します。「検索結果表示」をキーワードに探してみてください。その辺りにタグ検索に該当するエントリのリンクを表示するコードがあります。そのコードを以下のように変更します。

変更前
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
変更後
<MTIfTagSearch>
<h3><a href="<$MTEntryPermalink$>" onclick="javascript:window.opener.location.href='<$MTEntryPermalink$>';
return false;"><$MTEntryTitle$></a></h3>
<MTElse>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
</MTElse>
</MTIfTagSearch>