Welcome !! Now 2008.07.20 22:23 (JST)

Wayfinder - 2.0

[ スニペット ]

wayfinderは、ドキュメントのタイトル等をリストアップします。メニューとして利用したり、サイトマップとして利用したり、パンくずリストとして利用しても良いでしょう。

オリジナルテンプレートを作成して多彩な表現が可能です。

2.0 からコンフィギュレーションファイルに対応し、簡潔なスニペットコールで表現できるようになりました。



参照ページ:Wayfinder / MuddyDogPaws

テスト環境

  • サーバ:さくらインターネット  
    • PHP 4.4.4
    • MYSQL 4.0.27
  • MODx:0.9.5 / 0.9.6
  • Wayfinder - 2.0

基本的な書式

[!Wayfinder? &startId=`0`!]
 または
[[Wayfinder? &startId=`0`]]

公開ドキュメントでかつ、メニューに表示にチェックが入っているものすべてを表示します。

パラメータ(一般)

V 1.0 と比較して増えているパラメータには「added」をつけています

startId

出力したいドキュメント群の親ドキュメントをIDで指定します。以下を指定できます。

  • 0
  • document id
  • [*parent*]
  • [*id*]
  • [[UltimateParent]]なども可

サイト内のすべてのドキュメントを出力したい場合は、「0」を指定します。デフォルト「カレントドキュメント」

level

出力階層の深さを指定します。デフォルト「すべて(0)」

includeDocsadded

startId」で指定したフォルダ下の、どのドキュメントを出力するかをIDで指定します。カンマで区切って複数指定可能です。

このパラメータで出力できるのは「StartId」で指定したドキュメントの直下のドキュメントまでです。

インスタンス:

以下のような場合:

ドキュメントA(15)
 └ ドキュメントA(16)
 └ ドキュメントB(17)
   └ ドキュメントC(18)
 └ ドキュメントD(19)

startId=`15` includeDocs=`16,17`」とした場合、「ドキュメントA」「ドキュメントB」が出力されますが、「startId=`15` includeDocs=`18`」とした場合、結果は得られません。

excludeDocsadded

startId」で指定したフォルダ下の、どのドキュメントを出力しないかをIDで指定します。カンマで区切って複数指定可能です。

インスタンス:

以下のような場合:

ドキュメントA(15)
 └ ドキュメントA(16)
 └ ドキュメントB(17)
   └ ドキュメントC(18)
   └ ドキュメントD(19)

「startId=`15` excludeDocs=`18`」とした場合、「ドキュメントA」「ドキュメントB」「ドキュメントD」が出力されます

ignoreHidden

「メニューに表示」にチェックしていないドキュメントも表示するかどうかを指定します。デフォルト「しない(0)」。

ドキュメント には「true」「false」での指定となっていますが、以下の場合:

  • ignoreHidden=`false`
  • ignoreHidden=`true`
  • ignoreHidden=`1`

すべて「ignoreHidden=`true`」と同結果になります。なお、「ignoreHidden=`0`」は有効(デフォルトと同じ結果)です。

ph

スニペットコールで得た出力結果を指定したプレイスホルダに送るかどうかを指定します。デフォルト「しない(false)」。指定する場合は、プレイスホルダ名としたい名称を指定します。

インスタンス:

「ph=`breadcrumbnav`」とし、ドキュメントの任意の場所に[+breadcrumbnav+]と記述します。

※「ph=`breadcrumbnav`」とした場合、[+breadcrumbnav+]を記述しないと結果は出力されません

debug

debug モードにするかどうかを指定します。デフォルト「しない(false)」。「true」を指定すると現在のWayfinderの設定値や出力結果がそれぞれどのように処理されているかなどを出力します。

hideSubMenus

カレントドキュメント以外は、「startId」で指定したドキュメントの直下のドキュメントのみを表示するかどうか(カレントドキュメントのみサブドキュメントをメニューとして出力するかどうか)を指定します。デフォルト「しない(0)」。

ドキュメント には「true」「false」での指定となっていますが、以下の場合:

  • hideSubMenus=`false`
  • hideSubMenus=`true`
  • hideSubMenus=`1`

すべて「hideSubMenus=`true`」と同結果になります。なお、「hideSubMenus=`0`」は有効(デフォルトと同じ結果)です。

インスタンス

以下のような場合:

ROOT(0)
 └ ドキュメントA(16)
 └ ドキュメントB(17) ← カレントドキュメント
   └ ドキュメントC(18)
   └ ドキュメントD(19)
 └ ドキュメントE(20)
   └ ドキュメントF(21)
   └ ドキュメントG(22)
   └ ドキュメントH(23)
スニペットコール
[!Wayfinder? &startId=0 &hideSubMenus=`1`!]
出力結果
* ドキュメントA
* ドキュメントB
  * ドキュメントC
  * ドキュメントD
* ドキュメントE

removeNewLines

出力ソースの改行コードを取り去るかどうかを指定します。デフォルト「しない」。テンプレートで改行したままのソースで出力されます。

ドキュメント には「true」「false」での指定となっていますが、以下の場合:

  • removeNewLines=`false`
  • removeNewLines=`true`
  • removeNewLines=`1`
  • removeNewLines=`0`

すべて「hideSubMenus=`true`」と同結果になります。従って、「改行コードを取り去らない」のであればパラメータそのものを書かないようにします。

リンクテキストを指定します。以下を指定できます。ここで指定した値は、 [+wf.linktext+]に送られます。

  • id
  • menutitle
  • pagetitle
  • introtext
  • menuindex
  • published
  • hidemenu
  • parent
  • isfolder
  • description
  • alias
  • longtitle
  • type
  • template

デフォルト「menutitle」。

<a title="">の値を指定します。ここで指定した値は、[+wf.title+]に送られます。指定できる値は以下です。

  • id
  • menutitle
  • pagetitle
  • introtext
  • menuindex
  • published
  • hidemenu
  • parent
  • isfolder
  • description
  • alias
  • longtitle
  • type
  • template

デフォルト「pagetitle」。

rowIdPrefix

各アイテム(row)にユニークID([+wf.id+])を出力するかどうかを指定します。デフォルト「しない(0)」。ここで指定した値は[+wf.id+]に送られます。出力結果は「ここで指定した値+ドキュメントID」になります。

インスタンス:

&rowIdPrefix=`list`」を指定した場合結果は以下のようになります。

<ul>
 <li id="list21"></li>
 <li id="list25"></li>
 …
</ul>
※「21、25」はドキュメントID

※「rowIdPrefix=`false`」を指定すると各アイテムに「falsedocid」と出力されます。

useWeblinkUrl

出力結果に「Weblink」がある場合、Wayfinder は、MODxの標準のリンクの代わりに、指定されたリンクを出力するでしょう。このパラメータを「false」にすると、他のドキュメントのリンクのように標準的なWeblinkの表示するでしょう。と、ドキュメント にあるんですけど(たぶん)、挙動がよくわかりません。。

showSubDocCount

それぞれのドキュメントが直接持っているドキュメントの数を出力するかどうかを指定します(孫は数えません)。このパラメータで「true」を指定すると[+wf.subitemcount+]にドキュメント数が送られます。デフォルト「しない(fasle)」。

ドキュメント にはなっていますが、「false」でも「true」でも「0」でも「1」でも、テンプレートに[+wf.subitemcount+]を書けば、ドキュメント数を出力します。

インスタンス:

以下のような場合:

ドキュメント構成
ROOT(0)
 └ ドキュメントA(16)
 └ ドキュメントB(17)
   └ ドキュメントC(18)
   └ ドキュメントD(19)
     └ ドキュメントI(24)
 └ ドキュメントE(20)
   └ ドキュメントF(21)
   └ ドキュメントG(22)
   └ ドキュメントH(23)
rowTpl
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>([+wf.subitemcount+])[+wf.wrapper+]</li>
スニペットコールサンプル1
アウトプットサンプル1:
・ドキュメントA(0)
・ドキュメントB(2)
  ・ドキュメントC(0)
  ・ドキュメントD(1)
     └ ドキュメントI(0)
・ドキュメントE(3)
  ・ドキュメントF(0)
  ・ドキュメントG(0)
  ・ドキュメントH(0)
スニペットコールサンプル2:
[[Wayfinder? &startId=`0` &showSubDocCount=`true` &level=`1` &rowTpl=`my.RowTpl`]]
アウトプットサンプル2:
・ドキュメントA(0)
・ドキュメントB(0)
・ドキュメントE(0)
スニペットコールサンプル3:
[[Wayfinder? &startId=`0` &showSubDocCount=`true` &hideSubMenus=`true` &rowTpl=`my.RowTpl`]]
アウトプットサンプル3:
・ドキュメントA(0)
・ドキュメントB(2)
・ドキュメントE(3)

sortOrder

昇順か降順かを指定します。デフォルト「昇順(ASC)」

sortBy

並べ替えの基準になるフィールドを指定します。以下を指定できます。

  • id
  • menutitle
  • pagetitle
  • introtext
  • menuindex
  • published
  • hidemenu
  • parent
  • isfolder
  • description
  • alias
  • longtitle
  • type
  • template
  • random

デフォルト「menuindex」。

また、non-cacheでスニペットコールを書き、「random」を指定するとページを表示するたびに並び順が変わります

2008.2.19 追記

今日気が付いたんだけど。たとえば、以下のように、

[[Wayfinder? &startId=`0` &sortBy=`pub_date`]]

と、公開日をソートキーにしたとき、ドキュメントに公開日が指定してないと、メニューインデックス(デフォルト)の順に並ぶらしい。

limitadded

maxの出力数を指定します。

インスタンス:

「sortBy=`id`」「limit=`10`」とすれば、「docid」順で上位10件を出力します

※「startId=`0`」と併用すると上手く動作しません(「startId」で「0」以外を指定れすばOK)。

displayStartadded

リストのヘッダを挿入するかどうかを指定します。デフォルト「しない(false)」。「true」を指定すると「startItemTpl」を有効になり、ヘッダが挿入されます。

テンプレートの中の[+wf.linktext+]には、「startId」で指定したドキュメントの「menutitle」が代入されますが、もし「startId」で指定したドキュメントのメニュー属性が「非表示」だった場合、Wayfinder で指定しているすべてのアウトプットがされなくなります。その場合「ignoreHidden=`true`」を指定して対処すると良いでしょう。

「startItemTpl」は、テンプレートを指定しなければ、デフォルトのテンプレートが使用されます(「startItemTpl」参照)。

cssTpl

<head>~</head>に挿入したいCSSをチャンク名で指定します。チャンクには以下のように書くことができます。

  • assets/templates/wayfindersample.css
  • <link rel="stylesheet" href="assets/templates/wayfindersample.css" type="text/css" media="screen,tv" />
  • <style type="text/css">
      body,code {
      font-size:96%;
      ..........
    }

jsTpl

<head>~</head>に挿入したいJavaScriptをチャンク名で指定します。チャンクには以下のように書くことができます。

  • assets/templates/wayfindersample.js
  • <script type="text/javascript" src="assets/templates/wayfindersample.js"></script>
  • <script type="text/javascript">
      <!--
        ..........
      -->
    </script>

パラメータ(テンプレート)

テンプレートはチャンク名で指定します。

特に明示しなければ、デフォルトのテンプレートが使われます。

テンプレートで利用できるプレイスホルダは後述します。

outerTpl

ループの一番外側に来るテンプレートを指定します。デフォルトは以下です。

<ul[+wf.classes+]>
  [+wf.wrapper+]
</ul>

インスタンス:

アウトプット1
<ul>
  <li><a href="01.html" title="t1" >A</a></li>
  <li><a href="02.html" title="t2" >B</a></li>
  <li class="last"><a href="03.html" title="t3" >C</a></li>
</ul>
デフォルトでアイテムのラストに「class="last"」が挿入されます。それを避けたい場合は、スニペットコールで「lastClass=``」とします。
アウトプット2(Aがカレントドキュメントの場合)
<ul>
  <li class="active"><a>A</a></li>  <-- カレント -->
  <li><a>B</a></li>
  <li class="last"><a>C</a></li>
</ul>
デフォルトでカレントアイテムに「class="active"」が挿入されます。
アウトプット3(Eがカレントドキュメントの場合)
<ul>
  <li><a>A</a></li>
  <li class="active"><a>B</a>
    <ul>
      <li class="active"><a>D</a>
        <ul>
          <li class="active"><a>E</a></li> <-- カレント -->
        </ul>
      </li>
    </ul>
  </li>
  <li class="last"><a href="03.html" title="t3" >C</a></li>
</ul>
カレントドキュメントが子ドキュメントの場合その直系の親すべてに「class="active"」が挿入されます。

rowTpl

outerTpl」の直下で繰り返されるアイテム(行)用のテンプレートを指定します。「outerTpl」の[+wf.wrapper+]に代入されます。デフォルトは以下です。

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

アウトプットソースは、「outerTpl」を参照してください。

innerTpl

アイテム(行=子)の中の、各アイテムの外側に来るテンプレートを指定します(どう書いてもわかりづらい…笑)。「rowTpl」の中の[+wf.wrapper+]に代入されるテンプレートです。この指定がなければ、該当箇所には「outerTpl」で指定された値が利用されます。

innerRowTpl

innerTpl」の中で繰り返される各アイテム用のテンプレートを指定します。「innerTpl」の中の[+wf.wrapper+]に代入されるテンプレートです。この指定がなければ、該当箇所には「rowTpl」で指定された値が利用されます。

テンプレート同士の関係:

以下のようなイメージになるでしょう。

<outerTpl>
 <rowTpl>
  <innerTpl>
   <innerRowTpl></innerRowTpl>
   <innerRowTpl></innerRowTpl>
     …
  </innerTpl>
 </rowTpl>
 <rowTpl>
  …
 </rowTpl>
   …
</outerTpl>

parentRowHereTpl

カレントドキュメントが親ドキュメントの場合のテンプレートを指定します。ここで指定したテンプレートは、カレントドキュメントが子ドキュメントの場合は、適用されません。

インスタンス:

以下のようなドキュメント構成の場合

ドキュメント構成
ROOT(0)
 └ ドキュメントA(16) <-- NO -->
 └ ドキュメントB(17)
   └ ドキュメントC(18) <-- NO -->
   └ ドキュメントD(19)
     └ ドキュメントI(24) <-- NO -->
 └ ドキュメントE(20)
   └ ドキュメントF(21) <-- NO -->
   └ ドキュメントG(22) <-- NO -->
   └ ドキュメントH(23) <-- NO -->

すべてのドキュメントで以下のようにスニペットコールをしたとしても

[!Wayfinder? &startId=`0` &parentRowHereTpl=`my.parentRowHereTpl`!]

上記で「NO」とコメントしたドキュメントでは、「my.parentRowHereTpl」が適用されません(「rowTpl」が適用されるでしょう)。

parentRowTpl

アイテム(行)が親ドキュメントの場合のテンプレートを指定します。

hereTpl

カレントドキュメント用のテンプレートを指定します。親の場合でも子の場合でも適用されますが、親の場合は、「parentRowHereTpl」が指定してあれば、そちらが優先されます。

innerHereTpl

innerTpl」の中のカレントドキュメント用のテンプレートを指定します(大外のアイテムには適用されません)。親の場合でも子の場合でも適用されますが、親の場合は、「parentRowHereTpl」が指定してあれば、そちらが優先されます。

activeParentRowTpl

カレントドキュメントの親ドキュメントに適用するテンプレートを指定します。ここで指定したテンプレートは、カレントドキュメントの直系の親すべてに適用されます。

categoryFoldersTpl

親ドキュメントのうち、ドキュメントのテンプレートが「blank」か、または<head>~</head>に<link rel="category">が定義してある場合のテンプレートを指定します。

startItemTpladded

displayStart=`true`」を指定したとき、出力ブロックのヘッダとして出力されるテンプレートを指定します。デフォルトは以下です。

<h2[+wf.id+][+wf.classes+]>[+wf.linktext+]</h2>
[+wf.wrapper+]

[+wf.linktext+]には、「startId」で指定したドキュメントの「menutitle」が入ります。

テンプレートの優先順位

  1. startItemTpl
  2. parentRowHereTpl
  3. innerHereTpl
  4. hereTpl
  5. activeParentRowTpl
  6. categoryFoldersTpl
  7. parentRowTpl
  8. innerRowTpl
  9. rowTpl

パラメータ(CSSclass)

firstClass

各アイテム(行)の中で最初のアイテムに挿入されるクラス名を指定します。デフォルト「なし」。これを指定するとアイテムが単発(1行)の場合にもクラス名が挿入されます。

インスタンス:

アウトプット
<ul>
  <li class="first"></li> <!-- 単発でも挿入される -->
  <li>
    <ul>
      <li class="first"></li>
      <li ></li>
      <li class="last"></li>
    </ul>
  </li>
</ul>

lastClass

各アイテム(行)の中で最後のアイテムに挿入されるクラス名を指定します。デフォルト「last」。アイテムが単発(1行)の場合は挿入されません。

outerTpl」のインスタンス:アウトプット1を参照してください。

hereClass

カレントドキュメントに挿入するクラス名を指定します。デフォルト「active」。

outerTpl」のインスタンス:アウトプット2、アウトプット3を参照してください。

selfClass

カレントドキュメントに挿入するクラス名を指定します。デフォルト「なし」。

これはカレントドキュメントのみに挿入されます。

parentClass

アイテムが親ドキュメントの場合に挿入されるクラス名を指定します。デフォルト「なし」。

rowClass

各アイテム(行)に挿入されるクラス名を指定します。デフォルト「なし」

levelClass

階層を表すクラス名を各アイテムに挿入します。

インスタンス:

「levelClass=`level_`」とした場合:

アウトプット
<ul>
  <li class="level_1">
    <ul>
      <li class="level_2">
        <ul>
          <li class="level_3"></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

outerClass

一番外側に来る要素に挿入されるクラス名を指定します。デフォルト「なし」

インスタンス:

アウトプット
<ul class="outerClass"> <!-- 入るのはここだけ -->
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

innerClass

各アイテム(行)の中に含まれる親要素に挿入されるクラス名を指定します。デフォルト「なし」

インスタンス:

アウトプット
<ul>
  <li>
    <ul class="innerClass"> <!-- 入るのはここ -->
      <li>
        <ul class="innerClass"> <!-- 入るのはここ -->
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

webLinkClass

アイテムがウェブリンクの場合に挿入するクラス名を指定します。デフォルト「なし」

利用可能なプレイスホルダ

outerTpl

  • [+wf.classes+] … クラス名を「class="クラス名"」の形式で挿入します
  • [+wf.classnames+] … クラス名のみを挿入します。テンプレートの方に「class="[+wf.classnames+]"」と書きます。
  • [+wf.wrapper+] … 現在のテンプレートが内包すべきテンプレートを挿入します

rowTpl

  • [+wf.classes+] … クラス名を「class="クラス名"」の形式で挿入します
  • [+wf.classnames+] … クラス名のみを挿入します。テンプレートの方に「class="[+wf.classnames+]"」と書きます
  • [+wf.link+] … リンクURLを挿入します。テンプレートの方に「< a href="[+wf.link+]" ... >」と書きます。
  • [+wf.title+] … リンクのタイトル属性を挿入します。テンプレートの方に「< a title="[+wf.title+]" ...>」と書きます。「titleOfLinks」を指定していればその値が挿入されます
  • [+wf.linktext+] … リンクテキストを挿入します。「textOfLinks」を指定していればその値が挿入されます
  • [+wf.wrapper+] … 現在のテンプレートが内包すべきテンプレートを挿入します
  • [+wf.id+] … 「rowIdPrefix 」により生成されたユニークIDを挿入します。
  • [+wf.attributes+] … ドキュメントで設定しているリンク属性を挿入します
  • [+wf.docid+] … カレントドキュメントのIDを挿入します。
  • [+wf.subitemcount+] … 直接の子ドキュメントの数を挿入します。「showSubDocCount」と併用する仕様のはずですが、「showSubDocCount」を指定しなくても数は挿入されるようです
  • [+wf.description+] … ドキュメントで設定している「説明(description)」が挿入されます
  • [+wf.introtext+] … ドキュメントで設定している「要約(introtext)」が挿入されます

parentRowHereTpl

「rowTpl」に同じ

parentRowTpl

「rowTpl」に同じ

hereTpl

「rowTpl」に同じ

innerTpl

「outerTpl」に同じ

innerRowTpl

「rowTpl」に同じ

innerHereTpl

「rowTpl」に同じ

activeParentRowTpl

「rowTpl」に同じ

categoryFoldersTpl

「rowTpl」に同じ

startItemTpl

「rowTpl」に同じ

コンフィギュレーションファイルを使う

Wayfinder でも、Ditto2.0 や MaxiGallery で採用されている config パラメータを使った簡潔なスニペットコールの記述が可能です。

  1. configuration ファイルを作る
    • <?php
      
      // common parameter //
        $displayStart = 'true';
        $ignoreHidden = 'true';
        $rowIdPrefix = 'rowprefix_';
        $cssTpl = 'wayfindercss';
      
      ?>
    • こんな感じに「$パラメータ = '値';」を並べます
    • 値を囲むクォーテーションはパラメータ指定の「``」ではなく、「''」または「""」なので注意。
  2. ファイルを作ったら「configs」以下に「sample.config.php」という名前で保存します。
  3. サーバー上の該当位置にアップロードします
  4. Wayfinder コールで configuration file を指定します
    • [!Wayfinder? &startId=`0` &config=`sample`!]

出力サンプル

Wayfinder による簡単なアウトプットサンプルはこちらです。テンプレートとパラメータで指定したCSSクラスが、実際どのような順番で適用されるのかを実験しました。

△ページトップ