Movable Type 備忘録

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

Sep032006
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, MovableType, TagCloud

Next Page: テンプレート編集画面をカスタマイズする
Prev Page: 長くなった文字列をトリミングで見栄えよくする

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

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

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

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

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

tagwireプラグインを使ったTagCloudの場合
MovableType標準のエントリ・タグを使ったTagCloudの場合

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

tagwireプラグインを使ったTagCloudの場合

以下の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>の間に追加します。

<script type="text/javascript" src="<$MTBlogURL$>popup.js"></script>

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

<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate
format="%Y-%m-%d"$>"><a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&amp;delimiter=,&amp;search_key=Tagwire&amp;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(タグクラウド)のカスタマイズは完了です。

MovableType標準のエントリ・タグを使った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>

検索結果のテンプレートは、他でも使用されるため上記のように<MTIfTagSearch>～</MTIfTagSearch>で囲ってあげることで、タグ検索時のみ変更する必要があります。

また、上記コードはMovableType(ムーバブルタイプ)デフォルトの検索結果のコードです。人によってはカスタマイズしてる人もいるかと思いますが、その時は読み替えて変更してください。

一通り変更したら保存します。最後に表示確認です。 tagwireプラグインのカスタマイズで説明した通りのことができることを確認します。

以上で、MovableType標準のエントリ・タグを使ったTagCloud(タグクラウド)のカスタマイズは完了です。

2通りのTagCloud(タグクラウド)のカスタマイズを説明しましたが、使いやすくなったでしょうか。人によってはポップアップするの嫌だ…という人もいるかもしれませんね。

ちなみにtagwireプラグインを使ったTagCloud(タグクラウド)の作り方は、こちらのTagCloudのページを作ってみるで紹介しています。

では、SEE YOU♪