前回の「MT4奮闘記-その3」でMovable Type4の新機能であるウェブページとフォルダを一覧表示するウィジットを紹介したが、その後フォルダ名の一覧でリンクを設定する方法と現在位置を表示する方法が分かったので修正してみた。
テスト用のブログフォルダ構成
テスト用に表示させているブログのフォルダ構成は次のとおり。(前回書き忘れていました^^;)
[]で括られているのがフォルダで、()で括られているのがウェブページ。フォルダうち、ギャラリー、リンク、覚書きとなっているものがトップレベルフォルダとMTで呼ばれているもの。
今回は動作のテストのために適当に作ったのでウェブページの名称のつけ方が変・・
なお、ギャラリーやリンクなどは全く別の扱いにしたいので「覚書き」に含まれているウェブページ上ではリストに表示しないようにしている。
[ルート]
+ [ギャラリー]
+ [リンク]
+ [覚書き]
+ (ウェブページのテスト)
+ [パソコン関連]
| + [MT3304j]
| + (XP化)
| + (使い勝手)
|
+ [ＭＴ関連]
+ (使い方)
+ (MT関連トップ)
+ [カスタマイズTIPS]
| + (カスタマイズ)
| + (MT操作)
|
+ [タグについて]
+ (タグとは)
フォルダの一覧表示(リンク、クラス追加版)
フォルダの一覧に次の機能を追加した。
1) リンク追加
フォルダ名をクリックすると該当するフォルダに含まれるウェブページへジャンプするようにリンクを追加する。
なお、リンクされのはそのフォルダで最初に登録したウェブページを想定している。
2) クラス追加
現在表示しているウェブページを含むフォルダ名にクラスを追加してCSSにより表示方法を変更できるようにする。
これにより現在表示しているウェブページのフォルダ位置が明確になる。
表示結果は図1のようになる。
また、ソースリストをリスト1に示すが、少しややこしくなっているので少し説明を。
まず、1)のリンク追加だが、ウェブページのリンク用アドレスはMTPagePermalinkというタグで簡単に取得できる。しかし、このタグだけ入れただけでは、どのフォルダ名でも現在表示しているウェブページのアドレスが生成されてしまい、クリックしても同じページが表示されてしまう。
最初はどうのように直したらよいのか見当も付かなかったが、MTPagesというタグに気が付いた。このタグはウェブページの一覧表を示するウィジットでも使用していたが、働きとして現在のフォルダに含まれるウェブページの情報を取得できる。そこでこのタグでMTPagePermalinkタグを囲むようにすると見事各ページのアドレスが生成されるようになった。(リストのオレンジ色の部分)
ここで注意することはMTPagesタグを働かせる件数を1にしておかないと、そのフォルダに含まれるページの数だけ繰り返すのでフォルダ名がたくさん表示されてしまう。これを制限するためにlastn=”1″を指定している。また、ソートの種類を指定しておかないと最後に作成または更新されたウェブページへリンクされてしまう。このためsort_by=”created_on”(作成日で並び替え)、sort_order=”ascend”(昇順に並び替え)を指定している。
次に2)のクラス追加の方であるがこちらはどうやってもスマートな方法が見つからず、結局ウェブページが保存されているフォルダ名を事前に変数に保存しておき、それとフォルダ名が展開されたときに名前を比較して判定する方法とした。
判定の方法は現在のフォルダ名と指定したフォルダ名が合致するかを行なうMTIfFolderタグで簡単に実現できそうだ。しかし、比較の対象となる名前は直接ソースに記入するとフォルダ名毎に判定文を入れることになる。これでは将来フォルダが増えたときに修正する必要が出てきてしまい管理上好ましくないし、ソースも汚くなる。
そこでMTIfFolderで判定するフォルダ名を変数に代入したウェブページ名で利用する方法を検討した。フォルダ名の取得はMTFolderLabelタグを単独で使用することにより実現できる。が、MTSetVarではMTタグで取得した結果を変数に代入できないことが判明・・・。
しばらく放置していたが小粋空間さんというテンプレート関係を扱うブログでMT4のテンプレート構造の解説記事を読んでいたところ、MTSetVarBlockなるタグを用いれば別のMTタグで得た結果を変数に代入させることができる旨の記述があった。MTSetVarBlockタグの存在はなんとなく知っていたが、シックスアパートの公式なタグリファレンスには明確な使い方や目的が書かれていなかったので単に複数行に渡る値を代入できるものと思っていた。(ありがとうございます、小粋空間さん)
小粋空間ブログ記事「Movable Type 4 のテンプレート構造」より引用。
MTSetVar は変数タグですが、MTSetVarBlock はコンテナタグです。両者の違いは、MTSetVarBlock を用いることで他のMTタグで生成した文字列を変数として設定することができます。取得は MTGetVar を用います。
MTSetVarBlock の詳細については考案者の Ogawa::Memoranda さんの記事を参照ください。
話がそれるが小粋空間さんでは書籍の執筆もされているようで「Movable Type WEBデザインの新しいルール」というMT4対応の解説本が10月16日に発売されるとのこと。MT4に対応した解説本はこれが始めてだ。管理人も早速購入してみようと思う。
さて、タグで取得した値を変数に代入する方法が分かれば後は判定させるだけだ。
リスト1の赤文字がウェブページのフォルダ名を変数に代入させる部分、青文字が変数内のフォルダ名と現在のフォルダ名を判定してクラスを設定する部分になる。このリストではウェブページが保存されているフォルダ名だけに「current-folder」というクラスを設定しているのでCSSでa.current-folder等のセレクタで体裁を変えれば現在位置を明示することができる。今回はフォルダ一覧の動作確認が目的であるため簡単にa要素のバックグラウンドカラーのみを水色に変更している。
【図1】表示されたフォルダの一覧(リンク、クラス追加版)、水色のバックグラウンドが現在のフォルダ
【リスト1】フォルダの一覧表示(リンク、クラス追加版)
<div class=”widget-folders widget”>
<h3 class=”widget-header”>覚書きフォルダ一覧 クラス追加版</h3>
<div class=”widget-content”>
<MTSetVarBlock name=”infolder”><$MTFolderLabel$></MTSetVarBlock>
<MTTopLevelFolder>
<MTSubFolders>
<MTFolderHeader><ul class=”widget-list”></MTFolderHeader>
<li class=”widget-list-item”>
<MTPages lastn=”1″ sort_by=”created_on” sort_order=”ascend”>
<a href=”<$MTPagePermalink$>” <MTIfFolder name=”$infolder”>class=”current-folder” </MTIfFolder>><$MTFolderLabel$></a> (<$MTFolderCount$>)
</MTPages>
</li>
<$MTSubFolderRecurse$><!– サブフォルダを含む場合必要 –>
<MTFolderFooter></ul></MTFolderFooter>
</MTSubFolders>
</MTTopLevelFolder>
</div>
</div>
※この記事は旧ブログ-レンズの向こう(@ブログ人)にて公開していたものです。