HUBLOG

TagCloudのページを作成しました。今回からタグの検索方法としてAjaxを用いてページ移行することなく検索結果が表示されるようにしてみました。

どういうことなのか、実際にTagsにアクセスして適当に検索してもらうと一目瞭然です。デフォルトのMTではタグをクリックすると検索結果ページに飛んでしまいますが、こっちのはその場にずらっと表示されているかと思います。

導入方法

今回、参考にさせていただいたのは次のサイトです。

基本的にはこのサイトを参考にすれば実装はできます。JavaScriptも全く手を加えずにアップロードするだけです。ただし、一部異なってくる点としてMovable Type 備忘録さんは小川さん(Ogawa::Memoranda)が公開されているtagwireプラグインを利用していますので、僕のようにMTデフォルトのタグと検索にmt-search.cgiを使う場合はそれに合わせてコードを変更する必要があります。一応、試行錯誤してなんとか形になったので僕の方法を書いておきたいと思います。

はじめに

リンク先のMovable Type 備忘録さんを参考に、jsファイルのアップロードと読み込みまでを行っておいてください。

TagCloudの表示箇所を変更

僕の場合は次のとおり記述しました。

<div class="tagcloud-body">
   <ul id="tags" class="tagCloud">
   <mt:Tags>
   <li class="level<$mt:TagRank max="6"$>">
    <a href="javascript:void(0)" onclick="ajax_content_onload_get('http://musicmaniacs.net/mt/mt-search.cgi',
    'tag=<$mt:TagName$>&amp;Template=result&amp;blog_id=<$MTBlogID$>&amp;delimiter=,',
    'ajax_tagsearch','tagsearch_progress')"><$mt:TagName$></a></li>
   </mt:Tags>
   </ul>
</div>

それぞれ環境によりclassなどは異なると思いますが、肝心なのはaタグの内容です。cgiまでのパスはご自分の環境に合うように修正してください。

result.tmplの作成

上述したコード内にあるTemplate=resultという部分に関係してくるのですが、要するにタグの検索結果として<div id="ajax_tagsearch"></div>内に表示する内容をresult.tmplとして作成しておくということです。

mtのアプリケーションディレクトリにあるsearch_templatesディレクトリ内にresult.tmplという名前で次のとおりファイルを作成します。

<ul>
<MTSearchResults>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTSearchResults>
</ul>

次に、mt-config.cgiに一行追記します。

AltTemplate result result.tmpl

これは何のこと？と疑問に思った方はMTのリファレンスを読んでみてください。別に疑問に思わない人はおまじないだと思ってとりあえず書いておきましょう。

最後に

Movable Type 備忘録さんにあるカスタマイズの3番「タグ検索結果」にあるコードをそのまま追加して終了です。これでタグをクリックするとページ移行することなく表示されているかと思います。あとは適宜スタイルシートで見た目を修正しておしまいです。

以上、自分向けのメモの意味も込めてざっくりと説明しました。もしこのカスタマイズに興味があって、この説明では判りづらい点などがありましたらコメントにてご質問ください。