サイドバーで自動出力させているリンクテキストで現在ページだけ色替えをしたい 【解決済み】

[aki]

Wayfinderにはカレントリソースのみにマークをつける&selfClassというパラメータもあって

ご助言ありがとうございます。おっしゃるとおりです。
今回、私もサンプルの実現にあたっては「&hereClass」の値を空に指定し、
「&selfClass」で、activeという値が挿入されるようにスニペットコールを書きました。

この2つがよく似た動作で一見わかりにくいのですが、
・&hereClass … 親子関係を把握し、カレントが子の場合、遡って親子両方の指定箇所にクラス名を挿入する
・&selfClass … 親子関係は無視して、ただカレントにのみクラス名を挿入する
のようですね。
デザインによっては、hereClassの方が都合がいい場合も考えられるので、好き好きといった感じです。

本トピックでの質問は、親子関係になってはいますが、メニュー自体は親子関係なくそれぞれで扱いたい
ということのようでしたので、selfClassを使いました。

こちらのフォーラムでMODXに最も詳しいと言っても過言ではないだろうyamaさんには
無用な説明かとは思いますが…

※※※

本題からそれますが、Wayfinderで厄介なのが、デフォルトのテンプレートだと、

コード: 全て選択

<div class="sidebar">
<ul>
  <li><a href="#">トップページ</a></li>
  <li class="self"><a href="#">イベントTOP</a>   ＜---ここを開いた場合
    <ul>
      <li><a href="#">イベント001</a></li>
      <li><a href="#">イベント002</a></li>
    </ul>
  </li>
  <li><a href="#">その他</a></li>
</ul>
</div>

こういう入れ子状態かつ、li要素にクラスが付くようになっているので、CSS側で

コード: 全て選択

div.sidebar li.self {background-color:#ccc;}
/* または */
div.sidebar li.self a {background-color:#ccc;}

とか指定すると、イベントTOPの子リソースにまでスタイルが適用されてしまうため、
スタイルの継承をさせたくない場合は、テンプレートに工夫が必要なことでしょうか…。

コード: 全て選択

div.sidebar li.self li {background:none;}

などと追加して子リソースに付くスタイルを打ち消すという手も考えられますが、いまいちかな～と個人的には思ってます
でも、Wayfinder自体は非常に至れり尽せりな設計ですね。何でもできすぎてわかりにくくなってるかもしれません。

[modxfan]

まだ本業務に追われているのですが、フォーラムに新たに投稿があっているメールが届いたので見てみると、
なんかデモサイトに色々追加されてますね。
済みませんがまだ対応できないのでデモサイトを消さないでいただくことはできますか？　明日コピーしたりと保存したいので・・・
WayfinderやDitto色んなやり方が載っていて参考になりそうなんで。
本業の仕事に戻ります

[yama]

Dittoは理論的な組み立てがしやすくて万能感がありますが、Wayfinderはクセが強いですね。でも合理的で、それなりに理由を感じる実装も多い気がします。現在は開発が止まってますが、実装的には、先の先の先まで見通す作りになっていて、プログラマー視点から見るとかなり魅力的なスニペットだと思います。Dittoもそうですけど。MODXみたいな辺境のCMSで、よくこんな面白い拡張機能が存在するなあと思います・・
私自身は本体の把握だけで精一杯で、スニペットの使い方は正直よく分かってないです。&tplCurrentDocumentというパラメータは覚えてませんでしたが、これは使えますね。
自分はPHxモディファイアを書けばよいと思ってたりするので、こういうところはプログラマー目線だと思います・・

済みませんがまだ対応できないのでデモサイトを消さないでいただくことはできますか？　明日コピーしたりと保存したいので・・・
WayfinderやDitto色んなやり方が載っていて参考になりそうなんで。

管理画面のバックアップマネージャーでバックアップをとっておくと、それをそのままインポートして再現できると思います。（もしかするとサーバ側でその種の処理は制限かけてるかもですが）

[aki]

デモサイトの消滅については私にはどうこうできる権限がありませんので、
申し訳ないですが消えたらそれまでです。

ただ、最後に追加していたサンプルは本トピックで質問されていた動作とは違った
動きをするものですので気にしないでください。
お昼に追加していた「Wayfinderを使う方法」と「Dittoを2つ呼び出す方法」が
ご質問に対する回答事例です。

http://forum.modx.jp/viewtopic.php?f=7& ... t=20#p6133
こちらの投稿を見ましたところ、一応お昼のサンプルで解消はしたんですよね。

※　※　※　※　※

しかしながら、これだけだと、後から同じような悩みでこのトピックを開いた方がいたら
「デモサイトのサンプル見れないじゃないか！」ってなることに気が付きましたので、
Wayfinderの記述例を書いておきますね。

【 やりたいこと 】
・カテゴリ（親）とカテゴリ内にあるページ（子）のメニューを表示させたい。
・その際、現在開いているページに対応するメニューは、表示を変えたい。
（メニューを見れば、今どのページを開いているか分かるようにしたい）

【 質問者さんがやってみたこと 】
・Dittoを使った表示
・Wayfinderを使った表示

【 生じた問題 】
・Dittoの「parents」や、Wayfinderの「startId」に、カテゴリのIDを指定すると、
カテゴリ内にあるページ（子）は一覧表示できるが、カテゴリ自体（親）が表示に含まれない。

【 原因 】
・DittoもWayfinderも（デフォルトでは）そういう仕様だからです。

【 解決例 】
・Wayfinderを使った方がスマートだと思うので、Wayfinderを使います。
・displayStartパラメータを有効にすると、startIdで指定したカテゴリ自体（親）を表示に含めることができます。

コード: 全て選択

/* 基本の書き方 */
[[Wayfinder?
&startId=`カテゴリのID` &displayStart=`true`
]]

・displayStartで挿入されるカテゴリ（親）は、そのままだとh2でマークアップされて出力されます。
変更したい場合は、startItemTplを設定します。

コード: 全て選択

/* カテゴリ（親）の表示を変える場合 */
/* 出力HTML用テンプレートは、チャンクで作りチャンク名で指定が一般的な方法です */
[[Wayfinder?
&startId=`カテゴリのID` &displayStart=`true`
&startItemTpl=`カテゴリ（親）の出力HTML用テンプレート`
]]

・現在開いているページに対応するメニューの表示を変えるのは、いくつかの方法が考えられます。
Wayfinderに、hereClass または selfClass を設定すると、動的にカレントドキュメントかどうかを判断し、
HTMLの中にclass名を付け足してくれるようになります。

※設定しなくても、hereClassが有効になっているので、場合によっては省略可能です。
※hereClassとselfClassの動作の違いは、以下の投稿を読んでください。
http://forum.modx.jp/viewtopic.php?f=7& ... t=30#p6138

コード: 全て選択

/* カレントドキュメントにclassを付加する */
[[Wayfinder?
&startId=`カテゴリのID` &displayStart=`true`
&startItemTpl=`カテゴリ（親）の出力HTML用テンプレート`
&selfClass=`current` &hereClass=``
]]

以上を順にやっていただければ、だいたいWayfinderがどう動いているのかは分かると思います。
あとは、outerTpl や rowTpl、innerTpl、innerRowTplなどの設定で、表示の体裁を整えてください。
MODXの扱いと言うより、HTMLとCSSの扱いですので、詳しくはそちらを調べてください。

[yama]

2013-03-01_database_backup.zip

(41.24 KiB) ダウンロード数: 923 回

よくできたデモだと思うのでバックアップを添付しておきますねと

[modxfan]

※　※　※　※　※

しかしながら、これだけだと、後から同じような悩みでこのトピックを開いた方がいたら
「デモサイトのサンプル見れないじゃないか！」ってなることに気が付きましたので、
Wayfinderの記述例を書いておきますね。

【 やりたいこと 】
以下続く　.....

今回の解決内容は、サイト作成にて非常に頻繁に使われるものだと思うので、本当に重要なTipsだと思います。
これはMODXのサイト作成マニュアルがもしあったら（あったらいいですねぇ）、必ず入るべき素晴らしいTipsです。

しかも、aki様は本内容の重要性をお感じになられて内容をおまとめにもなられた。
とても意義のある行動であり、ただただ感服するばかりですm(_ _)m

今回思ったのが、MODXの普及促進のためにもWebサイトでよく使う機能を網羅した
作成マニュアルのようなものがあったらいいと思ったのと、
デモサイトで実際に見せられるわかりやすさと正確さという手法はとても良いということです。
他のCMSでここをやっているところなどないのではないでしょうか。素晴らしいです。

よくある機能の作り方がひとまとめに網羅されたマニュアル、ドキュメントのようなものがもしあったら、
MODXの普及は飛躍しそうですね！

aki様、akiスペシャルのWayfinderでうまくいっています！
ありがとうございます。これは本当にすごいTipsだ！

yama様もさりげなくZIP化していただき、ありがとうございます！

[mune3001]

横から失礼します。

これJqueryとか使った方が早いんではないでしょうか？
jqueyで class="current"
と出してcssで調整するのならローカルでチェックもできますし
googleで「jquery カレントページ」で検索すればサンプルはいっぱい出てきます。

当方は通常ローカルでコーディングしその辺はjqeryで実装してしまいますね　スニペット作ったりするより早いとおもいますよ
（どうしてもHTMLコードを出力する必要があるのでしたら申し訳ないです）

[modxfan]

横から失礼します。

これJqueryとか使った方が早いんではないでしょうか？
jqueyで class="current"
と出してcssで調整するのならローカルでチェックもできますし
googleで「jquery カレントページ」で検索すればサンプルはいっぱい出てきます。

なるほど、JavaScript方面ですか。
当方も考えなかったわけではないのですが、JavaScriptを切ったユーザのことを考えると
やはりプログラミングやCMSの機能でいくべし、と思っていました。
JQuelyはJavaScript切ったユーザ対応が可能なんでしょうか。
それともJavaScript切ったユーザは無視で良いという時代に来ているとか？

当方は通常ローカルでコーディングしその辺はjqeryで実装してしまいますね　スニペット作ったりするより早いとおもいますよ
（どうしてもHTMLコードを出力する必要があるのでしたら申し訳ないです）

スニペットよかそんなに早いのですか。検索してみてみましたがまだよく理解できておりませんが汗；。
http://coolwebwindow.com/jquery-lab/archives/66

少ない手間・手順で到達させるという思考はものすごく大事ですのでとても興味が湧きました。
こみいったことを簡単に、複雑なものをシンプルにとらえる、作業する考えは最優先すべきですね。
JQuelyって、確か、外部ファイルとして呼び出せば、あとはHTMLの方では最低限の記述で使えるものと
理解していましたが、JQueryカレントも同じなのかな・・・また見てみます。
貴重なアドバイス感謝いたします