MT4.1 新着順のタグクラウド

おぉぉ!これはフォローしとかねばならんですばい。

先日「MT4分からんことだらけ」という記事で新着順のタグクラウドについて言及しましたが、何でもプラグインを使わずに新着順タグクラウドを作る方法があるらしい?

先日も紹介させてもらいました「Movable Type備忘録」と、Movable Type公式ブログからの記事。どちらも「ハッシュ変数を使って」とあるけど、全く方法が違うのが面白いですね。はてどちらがいいものか?プログラムを解読せねばならんなぁ…と、悩んでおりました。

あらかじめ申しておきます、当方プログラミングについてはズブの素人です。全く経験なしですよ。まずハッシュ変数とは何ぞや?というところから、サパーリ分からん…両方の解説文を熟読してみても、何となく分かったような分からないような?…うををを、頭が痛いぞ。。

とりあえずテスト用のテンプレートを作って動かしながら弄ってみたら、何とかなるか?なったか?ということで、上記2記事のタグクラウドを自分用にカスタマイズしたものを貼っておきます。詳しい仕様はこちら↓

  • 全ての記事で使われているタグの中から、30件を新着記事順に表示。
  • スタイルシートはMovable Typeデフォルトのテーマ(minimalist-なんちゃら)に準処。
  • サイドバーに表示するウィジェットとして作成。これもMovable Typeデフォルトに準処。

まずは「Movable Type備忘録」の記事を参考にした物から。

<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
<MTTags>
    <MTSetVarBlock name="tags"><$MTTagName$></MTSetVarBlock>
    <MTSetVarBlock name="sorthash" key="$tags"><$MTTagLastUpdated format="%Y%m%d%H%M%S"$></MTSetVarBlock>
    <MTSetVarBlock name="tag_count" key="$tags"><$MTTagCount$></MTSetVarBlock>
    <MTSetVarBlock name="tag_rank" key="$tags"><$MTTagRank max="10"$></MTSetVarBlock>
    <MTSetVarBlock name="tag_date" key="$tags"><$MTTagLastUpdated format="%Y-%m-%d"$></MTSetVarBlock>
    <MTSetVarBlock name="tag_link" key="$tags"><$MTTagSearchLink$></MTSetVarBlock>
</MTTags>
<ul class="widget-list">
<MTLoop name="sorthash" sort_by="value numeric reverse">
    <MTIf name="__counter__" le="30">
        <li class="rank-<MTGetVar name="tag_rank" key="$__key__"> widget-list-item" 
            title="<MTGetVar name="__key__">:<MTGetVar name="tag_count" key="$__key__">:<MTGetVar name="tag_date" key="$__key__">">
            <a href="<MTGetVar name="tag_link" key="$__key__">"><MTGetVar name="__key__"></a></li>
    </MTIf>
</MTLoop>
</ul>
   </div>
</div>

<MTTagLastUpdated>タグがあるので、TagSupplementalsプラグインは必要のようですね。このテンプレート・タグと元記事の丁寧な解説のおかげで、何とか構造を把握することが出来ましたですm(_ _)m

サイドバー・ウィジェットの仕様に合わせてスタイルを変更、ヘッダーを追加。それから元記事のソースにはタグ検索のリンクが機能しないという不具合がありました。<MTTags>タグの外側で<$MTTagSearchLink$>が使われているのが原因のようなので、新しいハッシュ変数tag_link{tags}を設定しています。

当ブログ・2008年2月8日現在における表示結果は以下↓

続いてMovable Type公式ブログの物から。

<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
<MTSetVar name="i" value="30">
<MTEntries lastn="0">
<MTEntryTags>
    <$MTTagName setvar="tagname"$>
        <MTUnless name="seen" key="$tagname">
        <MTIf name="i" gt="0">
            <MTSetVar name="i" op="--">
            <MTSetVar name="seen" key="$tagname" value="1">
            <MTSetVarBlock name="push(tag_htmls)"><li class="rank-<$mt:TagRank max="10"$> widget-list-item"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li></MTSetVarBlock>
        </MTIf>
        </MTUnless>
    </MTEntryTags>
    </MTEntries>
       <ul class="widget-list">
        <MTLoop name="tag_htmls">
            <MTVar name="__value__">
        </MTLoop>
       </ul>
   </div>
</div>

最新10記事ではなく全記事を対象にするためには、5行目MTEntriesのモディファイアlastn"0"にするといいみたいです。本当は正しくない記述らしいけどね…。

上記ソースの表示結果↓

「備忘録」の物と公式ブログの物で表示順序が微妙に異なるのは、前者は<MTTagLastUpdated>で新しく追加されたタグが上位に来るようになっているのに対し、後者は記事の日付のみでソートしているからだと思います。厳密な「新着順」という意味では前者の方が正しいんだけど、個人的にはどっちでもいいや。

ところで公式ブログのソースで、どーうも私の頭では理解出来ない部分があるんですよ。タグのリストを出力するところで、<MTLoop>が使われているのはなぜか?変数tag_htmlspushで追記しているから、tag_htmlsには表示するタグリストが全て格納されているのではないか?それともtag_htmlsはハッシュ変数なのか?ということです。そこで試しに18〜20行目

        <MTLoop name="tag_htmls">
            <MTVar name="__value__">
        </MTLoop>

            <MTVar name="tag_htmls">

に置き換えてみたら

ありゃ?表示されるタグの数が増えてるぞ!?…こればっかりは分からんです。プログラム素人には、全くもって理解不能…MTのテンプレートって、奥が深いなぁ。

トラックバック(0)

この記事のトラックバックURL: http://mai-u.x0.com/mt/mt-tb.cgi/731

コメント(5)

まいう〜さん、こんにちは。

このところのリニューアル関係の記事や「勝手にブログ評論」の記事を含め最近の記事はずっと拝見しておりました。

いや大変でしたね。まいう〜さんのご苦労に比べると私のリニューアルなどは楽々系に思えます。FC2ブログはhtml内で使える変数や制御系のエリア変数・ループ変数が充実しているのと参考にできるテンプレートやプラグインがたくさんあるのとで、ほとんど何も知らない私でも試行錯誤しながらなんとなく体裁が取り繕えます(タグクラウドもエリア変数とループ変数で簡単に出力できます)。

でもまあ、こういうので苦労するのもまた楽しいというのには同感です。自分の書いた記事はできるだけ沢山の人に読んでもらいたいというのも本音ですし、過去の記事が埋もれてしまわないように工夫するのもそのためですから、決して苦労なんかではない。

カメラやW-ZERO3[es]のことはまったく分かりませんが、門外漢の私でもまいう〜さんの記事は面白く読んでいます。

どもです!毎度ありがとうです!

当方、レンタルブログというのを使ったことがないのでよく分からんですが、、
FC2も専用HTMLタグやら?で細かくカスタマイズ出来るんですね。
エリア変数とループ変数?てのは、多分この記事で紹介した物と似たような処理をやってるのかなぁ、

しかしブログのカスタマイズってのは、最初は面倒臭い、やる気ねぇ〜、という気分なんだけども、一度始めるとトコトンはまってしまうのが面白い、、長い間ブログをやっていると、過去の記事をいかに整理してうまく見せるか?というのも重要になってきますね。当方も、まだまだ工夫せねばならんです、はい。

HTMLとCSSは何とか理解できるが、MTタグはサッパリと言うレベルです。
幾つかのサイトとブログを一括管理できるように、試行錯誤でMT-5を設置しました。

で、タグクラウドで同じタグが統合されず、並んで出ると言う問題が発生し、色々検索の結果、こちらのサイトを参考に「Movable Type公式ブログ」のテンプレートに差し替えたところ、兎も角タグは統合されて表示されるようになりました。
有難うございます。

しかしランクに応じての、タグのサイズ変化が有りません。全て同じサイズです。
これはタグを表示するCSSの問題かと思うのですが、いかんせんMTタグとCSSの関係が分からず、直しようがない状態です。
若しご助言を頂けると本当に助かるのですが、お手すきの時にでもお願いできますでしょうか。

関連するであろう、と思われるCSSの部分を下記しておきます。
タグクラウドのテンプレートは、こちらに紹介の有った、Movable Type公式ブログのものです。


.widget-tag-cloud .widget-content ul {
margin-right: 0;
margin-left: 0;
}

.widget-tag-cloud .widget-content li {
display: inline;
margin: 0 5px 0 0;
padding: 0;
line-height: 1.2;
background: none;
}

.widget-tag-cloud .rank-1 { font-size: 1.75em; }
.widget-tag-cloud .rank-2 { font-size: 1.75em; }
.widget-tag-cloud .rank-3 { font-size: 1.625em; }
.widget-tag-cloud .rank-4 { font-size: 1.5em; }
.widget-tag-cloud .rank-5 { font-size: 1.375em; }
.widget-tag-cloud .rank-6 { font-size: 1.25em; }
.widget-tag-cloud .rank-7 { font-size: 1.125em; }
.widget-tag-cloud .rank-8 { font-size: 1em; }
.widget-tag-cloud .rank-9 { font-size: 0.95em; }
.widget-tag-cloud .rank-10 { font-size: 0.9em; }
.widget-tag-cloud .rank-11 { font-size: 0.9em; }

「以下、rank-20 迄同じ」
以上です。宜しくお願いします。

どもです!はじめまして雄さん、、

当方も、CSSやMTタグは試行錯誤の連続?レベルです。

CSSは以下のようになっています。

.widget-tag-cloud .widget-list {
margin-right: 0;
margin-left: 0;
}

.widget-tag-cloud .widget-list-item {
display: inline;
margin: 0 5px 0 0;
padding: 0;
line-height: 1.2;
background: none;
}

<ul>, <li> 要素に直接スタイルを適用するか、"widget-list", "widget-list-item" のclass属性に適用するかの違いかと思われますが、問題が解決するかどうか?やってみないと分からないですね。

MT4.1とMT5では、CSSの他の部分も大きく変わっているかもしれないので、もっと新しい情報を探してみた方がいいかもしれません。

どうぞよろしくお願いします m(_ _)m

まいう〜さん
有難うございます。

うーん、色々やって見たんですが、やはり全く変化なし。悪くもならない。
どうも全然スタイルシートが作用していないようで。

もう少し試行錯誤、してみます。
御手数を掛けました。

前の記事

次の記事

アーカイブ

このブログを購読

Powered by Movable Type 4.27-ja