Wayfinderの使い方 - Lesson #10

2010年03月14日 13:46

The Almost Complete Guide to Creating Menus in MODx using Wayfinderの拾い読みをメモ。
(自分なりの補足や解釈も加えてあるので注意)

Chapter10 Lesson #9


Lesson #10の概要
ドキュメント変数(文書に設定されているフィールドの値)をメニューに出力する方法について。

関連するプレースホルダ、パラメータ
[+wf.docid+]
[+wf.description+]
[+wf.introtext+]
[*document_field_name*]
[+template_variable_name+]

[+wf.docid+]プレースホルダ
Wayfinderのメニュー内にMODxのドキュメントID(文書を管理するための番号)を出力したい場合に[+wf.docid+]プレースホルダを使用する。

他のほとんどのプレースホルダ同様、このプレースホルダも行レベルのテンプレート内で有効となる。
Wayfinderは、すべてのメニューアイテム(レベルに関係なく)に対してテンプレート内で[+wf.docid+]プレースホルダのある位置に、ドキュメントIDを出力する。
記述例として&rowTplテンプレートの内容を下記に示す。

[+wf.docid+]プレースホルダを追加した&rowTplの例

<li [+wf.id+] [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+][+wf.docid+]</a>
</li>



これによりナビゲーションメニューのリンク名の右側にドキュメントIDが表示される。


[+wf.description+]プレースホルダ
ドキュメントの説明文(description)を出力する場合に[+wf.description+]プレースホルダを使う。これも行レベルのテンプレートで使用する。

このプレースホルダがどのように働くかを知るために、ここではミニメニューを作成する。このミニメニューはサイトのテンプレートではなく、ドキュメント"Menus"内で使用する。

※→サイト全体のナビゲーション用メニューではなく、食事のメニュー表示用として"Menus"ページ内だけで使用する


メインメニュー(ナビゲーション用)とは使い方が異なるので、新たに&rowTpl用のテンプレートチャンクを作成する。新規にチャンクを作成するか既存のチャンクをコピーし、リネームして使用する。ここでは"menu2Rows"という名前のテンプレートを作成する。

食事メニュー用テンプレート"menu2Rows"のソースコード例

<li [+wf.id+] [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.description+]</a>
</li>



[+wf.linktext+]プレースホルダがあった位置に、代わりとして[+wf.description+]プレースホルダを記述することで、各ドキュメントの説明文(=descriptionの内容)がメニューアイテムとして出力される。

なお、これが正しく出力されるためには、(テンプレートの記述だけでなく)メニューアイテムとなるそれぞれのドキュメントに説明文(description)が記入されていなければならない。

さらに、食事メニューを表示する"Menu"ページの中に、このテンプレートを使ったメニューを表示させるためのスニペットコールを記述する。

食事メニューを表示するためのスニペットコール例

[[Wayfinder? &startId=`4` &outerTpl=`menuContainer` &rowTpl=`menu2Rows` &level=`1` ]]


"Menus"ページ以下の内容を出力するので&startIdは4、&rowTplで指定するテンプレート名は先ほど作成した"menu2Rows"となる。

さらに、Menusの下位ドキュメント(=各食事メニュー)をナビゲーションメニュー上に表示させたくないので、&levelには1を指定している。このせっていによりサブメニューは表示されなくなるので、メインメニューの方のテンプレートでは、&hideSubMenusパラメータそのものをスニペットコールから削除する。

食事メニューの記述に合わせて修正した、サイトナビゲーション用スニペットコール

[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuContainer` &level=`1` ]]



最後にこの食事メニュー用としてCSSを設定する。

#main_content ul{ list-style-type: none; margin: 0px; padding: 0; width: 675px; float: left;}
#main_content ul li a{ color: #BEFF1F; text-decoration: none; font-size: 2em; float: left; margin: 0px 7px; padding: 5px; width: 200px; outline: yellow dashed thin; background: black; text-align: cenger;}
#main_content ul li a:hover{ color: white; background: #DE7C05; outline: white dashed thin;}



[+wf.introtext+]プレースホルダ
このプレースホルダはドキュメントの要約(Summery/Introtext)フィールドの内容をメニューへ出力する。これも行レベルアイテムのみに使用する。
使い方は[+wf.description+]とほとんど同じなので省略する。


その他のドキュメントフィールド
上に紹介したドキュメント変数(ドキュメントフィールド)以外の値を出力する場合は[*document_filed_name*]という書式を使ってテンプレートを記述すればよい。

たとえばメイン(ナビゲーション)メニューの&rowTplにドキュメントのlongtitleを表示させたい場合は次のように指定する。

<li [+wf.id+] [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+] [*longtitle*]</a>
</li>


これによりリンクテキストに続いて、ドキュメントのlongtitleフィールドの内容が出力される。

MODxのドキュメントフィールドに着いては下記のリンクを参照
http://svn.modxcms.com/docs/display/MODx096/Document+Variables

※このドキュメント自体がやや古いので0.96用のページを参照している


テンプレート変数をWayfinderから使う
テンプレート変数を扱うための指定はまったく簡単で、次のような記述となる。

[+template_variable_name+]



※*ではなく+を使用する
テンプレート変数を使う場合、各ドキュメントに入力されたそれぞれのテンプレート変数の値がメニューアイテム内に出力される。
サンプルで作成したミニメニュー(食事メニュー)を修正してみよう。

まず(食事の写真をメニューとして掲載するために)画像タイプのテンプレート変数を作成しておく。ここではテンプレート変数名を"menutv"とする。
食事メニューは"Monday - Thursday"、"Friday"、"Saturday - Sunday"の3つに分かれているので、3つの画像がそれぞれのメニュー項目として表示されるようにする。

ここまでの例ではメニューのテキストとして[+wf.description+]を使って出力しているが、この部分をテンプレート変数に置き換えて、画像を出力させる。200×200pxの画像を3つ用意しておき、サーバー上のMODxディレクトリ内にある"assets"サブディレクトリへアップロードしておく。

つぎに3つのドキュメントのそれぞれのテンプレート変数"menutv"フィールドに、それぞれに対応した画像を設定する。

以上の準備が終わったら、続いてミニメニュー(食事メニュー)を表示させるためのテンプレートを編集する。ここでは"menu2Rows"テンプレートを次のように修正する。

ミニメニュー出力用テンプレートの例

<li [+wf.id+] [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]> <img src="[+menutv+]</a>
</li>


※<img>要素を閉じていないが、脱字と思われる

上のテンプレートでは、テンプレート変数を参照するための場所と方法に注意して欲しい。テンプレート変数の値(この場合は各画像のパス)としてそれぞれのドキュメントの内容が割り当てられる。もちろん、画像をクリックしてリンク先を参照できるように<a>要素で括っておくべきだ。


このようにテンプレート変数とWayfinderの機能を組み合わせることでいろいろな使い方が可能となる。利用方法を制限するのはたぶんイマジネーション(の乏しさ)だけだろう。



Lesson #10のまとめ
1)[+docid+]プレースホルダはMOOxのメニュー内にドキュメントIDを挿入する。

2)[+wf.description+]プレースホルダを使って、各ドキュメントの説明をメニュー内に出力することができる。

3)同様に[+wf.introtext+]はドキュメントの要約を出力する。

4)ドキュメント変数を出力するには行レベルのテンプレート内に、[*document_field_name*]という書き方でドキュメント変数名を記述すればよい。

5)同様にテンプレート変数の場合は、[+template_variable_name+]という書き方を使う。



以上がLesson #10(p86~92)の大まかな内容。Lesson #11ではHTMLの<HEAD>セクション内に記述したCSSやJavascriptを扱う方法について紹介する。
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://flyingjunk.blog25.fc2.com/tb.php/211-2551438e
    この記事へのトラックバック


    最近の記事

    オンラインアルバム