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

質問全般・改善要望
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

aki さんが書きました:※2013/2/27 0:46追記

Root
┣【トップページ】(ID:1)
┣【イベント】(ID:2)<-------------------- 一番古いイベントを自動表示
┃├ イベント2月20日(ID:14)
┃├ イベント2月16日(ID:13)
┃├ イベント2月08日(ID:12)
┃├ イベント2月03日(ID:11)
┃└ イベント1月23日(ID:10)
┣【製品案内】(ID:3)
┗【会社概要】(ID:4)

●隅付き括弧(【】のもの)は、フォルダ(ページ設定で「コンテナとして扱う」にチェックが入っている)

<< 確認 >>
最初の投稿に、イベントトップを開いたとき、「一番古いイベントを自動で表示」と書かれていますが、
イベントトップ(ID:2)にアクセスしたら、上記のような構成の場合、自動的に1月23日(ID:10)のページに
ジャンプするという意味でしょうか?
※例えば、イベントトップで「phiRedirect」や「FirstChildRedirect」といったスニペットを使用している?


親リソース(カテゴリトップという位置づけ)の「コンテナとして扱う」には、チェックが入っていたり入っていなかったりと、まちまちです。
忘れてしまいましたが作成時に意味を調べて、親リソースに必要と思ってチェックONしていたのだと思いますが、
時間が経って追加で親リソースを作成する際には忘れていたのではないかと思います。
今、改めては「コンテナとして扱う」をネット検索しましたが、どうにも意味不明な感じでよく意味がつかめませんでした。


> 自動的に1月23日(ID:10)のページに
> ジャンプするという意味でしょうか?

ジャンプするのではリダイレクトになってURLが変わってしまうので使うことができません。
カテゴリトップである
http://www.mysite.jp/event
は存在させたいです。
その上で、カテゴリトップを開いても、最古イベントを開いても、どちらも最古イベントの内容が表示されるようにしたいです。
確実にそれしか手が無いということでしたら採用するしかありませんが。

MODXサイトは二つ持っており、サイドバーの出力内容のデフォルトとしては、
親リソースもサイドバーリンクの一員(一番上)として存在している状態です。
サイドバーのリンク群は、
・イベントトップ
・イベント1
・イベント2
・イベント3
....
という感じです。

しかし、一部だけイレギュラーなサイドバーの出力内容があります。
それが、親リソースのcontentにはコンテンツがなく、Ditto記述によって最古のイベント1を表示させるようにしています。
以下です。

コード: 全て選択

<h1>[!Ditto? &tpl=`@CODE:[+longtitle+]` &display=`1` &orderBy=`pub_date ASC`!]</h1>
[!Ditto? &parents=`44` &display=`1` &tpl=`@CODE:[+content+]` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateFormat=`%Y年%-m月%-d日` &dateSource=`pub_date` &id=`eventtop` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`0`!]
aki さんが書きました: ※例えば、イベントトップで「phiRedirect」や「FirstChildRedirect」といったスニペットを使用している?
なるほど、Dittoの中にですよね。このようなものは記述していないです。


aki さんが書きました: もし、そうだとしますと、サイドバーでハイライトなど表示が変更されるべきなのは、

・イベントトップにアクセス >> イベント1月23日(が表示されるのだから、ここをハイライト)
・イベント2月20日にアクセス >> イベント2月20日
~以下、個別のイベントページは同様~
・イベント1月23日にアクセス >> イベント1月23日

ということですよね?
はい、その通りです。
ご提案いただいているのはジャンプなのでどうしようかと思っております。
まだ文章拝読中です。また投稿致します。

それにしましても、managerにログインできる形でデモサイトで実際にお見せいただく、という方式はとてもわかりやすいですね。
「ああ、ここの設定はこうしているわけか」ということがすぐさまわかります。
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

aki さんが書きました:※2013/2/27 0:46追記

イベントページのリンク先は「http://130226210657-1949.evo.demo.modx. ... t.html」ですが
イベントトップにアクセスされたら一番古いイベントを表示させるとのことなので、
自動的に「http://130226210657-1949.evo.demo.modx. ... l」へジャンプします
その際、サイドバーに見立てたリンク一覧でも、ちゃんと「2月8日」のリンクに色が付いているので
これでご希望の動作をほぼ満たしていると思うのですが……こういう理解で合っていますか?


サイドバーには二つのタイプを作っておりまして、
一つ目は上述であっています。
ただ、上述のサイドバータイプはイレギュラーで、あとのカテゴリのサイドバーは
親リソースにもコンテンツがちゃんとあり、サイドバーには
・親リソース
・親リソースの子ページ1
・親リソースの子ページ2
・親リソースの子ページ3
....

となっております。
解決したい対象が2タイプあるということなんです。



aki さんが書きました: ※このデモ自体は、先程の「tplCurrentDocument」を使って実現しています。
※背景色は、外部スタイルシートではなく「li要素」に「style属性」で直接付け加えました。
※エレメント>テンプレート>xRay と エレメント>チャンク>test の部分が私が触ったところです。

http://forum.modx.jp/viewtopic.php?f=7& ... t=10#p6103
こちらの投稿だと、そうなっていないようなので不思議なのですが、ページをジャンプさせているわけではないのでしょうか?


ページのジャンプというつもりはありません。
現在、イベントトップのページである
http://www.mysite.jp/event/をクリック、つまりイベン ... をクリックして開くと
ジャンプをせずにURLはそのままで、中身は最古のページであるイベント1がcontent欄に表示されます。
aki様のご案内にあったテンプレートを切り替える以下の方式で記述しておりますが、この動き自体は変わっておりません。

イベントトップのHTMLソースをご紹介いたします。以下です。

コード: 全て選択

<h1>[!Ditto? &tpl=`@CODE:[+longtitle+]` &display=`1` &orderBy=`pub_date ASC`!]</h1>
					
[!Ditto? &parents=`44` &display=`1` &tpl=`@CODE:[+content+]` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateFormat=`%Y年%-m月%-d日` &dateSource=`pub_date` &id=`eventtop` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`0`!]

aki さんが書きました: それとは別の問題として、以下で返信されている
http://forum.modx.jp/viewtopic.php?f=7& ... t=10#p6104
http://forum.modx.jp/viewtopic.php?f=7& ... t=10#p6106
カテゴリトップページ、つまり親リソース(親フォルダ)のページがサイドバーのリンク群に出力されていません
についてですが、多分Dittoでは出せないのでは…と思います。
Dittoは、「parents」で指定したフォルダ(コンテナ)以下のドキュメントの一覧を出力するスニペットで、
「hideFolders」は、親として指定したフォルダの中にさらに作ったフォルダをメニューとして出力するかどうかのパラメータだと思います。
hidefoldersとは親リソースの中の親リソースのことなんですね。
aki様はDittoではダメだというお見立てなのですね。わかりました。

aki さんが書きました: どう解決するかですが、リンク一覧をDittoのみで実現しようとすると難しいのかもしれません。
(サイト内の親子全てのリンクを出すならおそらくWayFinder?私はあまり使わないので詳しくないです)

イベントカテゴリ内のみ、サイドバーが表示されれば良いのなら、
例えば、「sidebar」というチャンクを作ります。(HTMLの書き方は一例です)

コード: 全て選択

<div class="sidebar">
<p><a href="[~2~]">イベント</a></p>
<ul class="eventlist">
[[Ditto? &parent=`2` &orderBy=`pub_date ASC` &tpl=`nav_usual` &tplCurrentDocument=`nav_current`]]
</ul>
</div>
サイドバーを呼び出す部分のHTML(多分テンプレートかな?)に以下のように追加します。

コード: 全て選択

<html>
<head>(略)</head>
<body>
~(略)~
{{sidebar}} <!-- サイドバーの表示位置にチャンク名を書く -->
</body>
</html>
こういった具合でチャンクと組み合わせ、Dittoを補助的に使うのではダメでしょうか?

このやり方だと、IDの数字決め打ちでリンクさせている部分があるので、変更がある場合は手動で書き換えなければいけませんが、
コンテンツ数が少ないサイトなら、十分対応できるかと思います。
おっしゃるとおりでして、これまではこのように親リソースだけを個別に追記する方式で最初はやっていました。
自動化をしないとCMSの意味が無いですし、また、あとに記載するWayfinderでは不十分だったので
この度Dittoでできないかと悪戦苦闘しておりました。

また、Wayfinderの方でやっていたのですが、他の方法があればとは思いますが、
私ではうまくできていませんでした。以下です。
いちいちカテゴリごとにサイドバーを作って、それぞれのWayfinderで親リソースを手動で指定し、
さらにもうひとつのWayfinderである程度の現在ページハイライトをおこなっています。
しかし、ある程度でありまして、親リソース(カテゴリトップ)はハイライト機能ができませんし、
また、子ページ最後のページもハイライトされません。不十分な状態で困っておりました。
そこで今回Dittoでできるならと思い、取組み中というわけです。
Wayfinderで達成可能ならば諸手を上げてDittoは捨てます。

コード: 全て選択

[!Wayfinder? &startId=`0` &includeDocs=`49`!]
[!Wayfinder? &startId=`[[UltimateParent]]` &sortOrder=`asc`!]
よろしくお願いいたします。
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by aki »

こんばんは。
うーん。実際にサイトの構造を見てみないと、どこで引っかかっていらっしゃるのか、わからないかもしれません。
「コンテナとして扱う」をネット検索しましたが、どうにも意味不明な感じでよく意味がつかめませんでした。
これは、特に難しく考える必要はなくて、コンテナ=Web制作で言うところの「ディレクトリ」みたいなもの(と私は理解しています)です。
MODXでは、「コンテナ(ディレクトリ)の中にサブリソース(ページ)がある」という表現になっています。


どこで引っかかっているのかを判別するのが難しいので、「私ならこう作る!」というものを
デモサイトで作らせていただきました。

http://130227230250-1949.evo.demo.modx.jp/
http://130227230250-1949.evo.demo.modx.jp/manager/ (管理画面、ID・パスともにmodx)

やりたいのは、こういうことです…かね?

エレメント管理内の「テンプレート」と「チャンク」に「aki-TEST」というカテゴリを作って、
私が追加したものを表示しています。
それ以外は、ご使用の環境に一番近い「1.0.5J-r8」のデフォルトのままです。
スニペットやプラグインの追加は特にしていません。

結局、Wayfinderで実現してみたのですが、いかがでしょうか?
Wayfinderであれば普通に用意されているパラメータと一部チャンクを作ってあげることで
階層構造のサイトメニューを表示し、現在地の表示も分けることが可能でした。

modxfanさんもWayfinderにもチャレンジされているようなので、
どこが違ってしまっているのかは、実際の構造を見てみないとわからないかもですね…。
hereTplへの指定が入ればうまくいくのでは、と思いますが、
大したサンプルではありませんが作成中のサイトと比べてみてください。

ちなみにスニペットの使用方法については、以下のサイト様に大変お世話になっています。
http://www.modx.liolion.net/resource/Wayfinder.html


本題からは外れますが、前回投稿内の「phiRedirect」「FirstChildRedirect」は、
それぞれ指定のドキュメントにリダイレクトを設定するためのスニペットの名前で、Ditto内に指定するパラメータ等ではありません。
今回、リダイレクトは使われていないようなので気にしないでください。
(※気になる場合は、これらスニペットの名前で検索してみてください ;)

デモサイトは、24時間で消えてしまうそうなので、何か必要な内容があればメモ帳などに適当にコピーを取ってください。
(※2/27の23時頃に作成しました)
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

aki さんが書きました:こんばんは。
うーん。実際にサイトの構造を見てみないと、どこで引っかかっていらっしゃるのか、わからないかもしれません。
「コンテナとして扱う」をネット検索しましたが、どうにも意味不明な感じでよく意味がつかめませんでした。
これは、特に難しく考える必要はなくて、コンテナ=Web制作で言うところの「ディレクトリ」みたいなもの(と私は理解しています)です。
MODXでは、「コンテナ(ディレクトリ)の中にサブリソース(ページ)がある」という表現になっています。
はい、私もディレクトリとかカテゴリだとか何となく思っておりました。
ディレクトリの役目をさせるページだけチェックONするようですが、うっかりチェックOFFにして
親リソースを作成しても、何も問題が表沙汰にならないので「意味あるのかな?」と思っておりました。

デフォルトでは、圧倒的に作成が多い非ディレクトリのただのページに重きを置かないといけないので、
リソース作成のデフォルト設定はチェックOFFになっていると思います。

MODXは、親リソース、つまりカテゴリ、ディレクトリにさせたいリソースを作成させる場合は「コンテナとして扱う」に
確実にチェックONしてくれないといけないのならば、リソースの中身をつくって保存する際に、
「親リソースですか?」と画面で聞いてくれて、YESをクリックすると、勝手にコンテナとして扱うにチェックONになるような
仕組みがないとうっかりは防げないかなと思われました。
脱線質問済みません。

aki さんが書きました: どこで引っかかっているのかを判別するのが難しいので、「私ならこう作る!」というものを
デモサイトで作らせていただきました。

http://130227230250-1949.evo.demo.modx.jp/
http://130227230250-1949.evo.demo.modx.jp/manager/ (管理画面、ID・パスともにmodx)

やりたいのは、こういうことです…かね?
やりたいことですが、完全に伝わっていないかもしれないのでご案内いたします。

(1) サイドバーでは、そのカテゴリとその子ページだけを表示すること。
   でないと、全カテゴリーとその子ページがサイドバーに出力されることになり、サイドバーが超長くなってしまう。

(2) やりたいサイドバーのタイプは二種類ある

サイドバーの出方としては同じです。以下です。
・親リソース(カテゴリ、ディレクトリ)
・子ページ1
・子ページ2
....

じゃあ、違いは?というと、親リソースを開いたときに違いがあります。
イベントカテゴリ・・・親リソース自体にはコンテンツが無く、代わりに一番createdが古い子ページが表示される(なるべくリダイレクト手法は回避希望)
・その他の全てのカテゴリ・・・親リソースにコンテンツが有り、普通にそのコンテンツが表示される


aki さんが書きました: エレメント管理内の「テンプレート」と「チャンク」に「aki-TEST」というカテゴリを作って、
私が追加したものを表示しています。
それ以外は、ご使用の環境に一番近い「1.0.5J-r8」のデフォルトのままです。
スニペットやプラグインの追加は特にしていません。
本当にありがとうございます。
最初は、イベントページについて投稿していたので、そのコンテンツがあるひとつのMODXのバージョンしか書いて
おりませんでした(最初の投稿時には1.0.5J-r7と記載)が、よく考えると、イベントページ以外にも本件に絡む問題を
抱えていたことを思い出したので、2つのサイドバーのタイプがあることをご案内しております。
二つ目のサイトは1.0.6J-r8 です。

aki さんが書きました: 結局、Wayfinderで実現してみたのですが、いかがでしょうか?
Wayfinderであれば普通に用意されているパラメータと一部チャンクを作ってあげることで
階層構造のサイトメニューを表示し、現在地の表示も分けることが可能でした。
イベントカテゴリが無い、アクセスが多い方のサイトの方である1.0.6J-r8のMODXサイトの方が
現状のままだと表示問題が解決していないちゅうぶらりんな状態なので、作業を優先しており、
まずはこちらのサイトで試してみました。
結果は、親リソースだけが表示されませんでした。
つまり、これまで同様に、親リソースに所属する子ページだけがサイドバーに表示されています。
子ページたちのハイライト表示はうまくいっています。親リソースだけが出ないです。
「今開いているページの親リソースと子リソースを出力せよ」という命令記述ができればいいだけなのですが・・・
aki様のサンプルでは、親リソースがちゃんと出ていますが、その他の親リソースも出てしまっていますね。
ホームも出ています。
当方がおこないたいのは、すべての親リソースが出るのではなく、ホームが出るのではなく、
その親リソースとそれに所属する子リソースだけを出力させたいということです。

これから仮眠をとりまして、日中におこなったソースの紹介を投稿いたします。

aki さんが書きました: 本題からは外れますが、前回投稿内の「phiRedirect」「FirstChildRedirect」は、
それぞれ指定のドキュメントにリダイレクトを設定するためのスニペットの名前で、Ditto内に指定するパラメータ等ではありません。
今回、リダイレクトは使われていないようなので気にしないでください。
(※気になる場合は、これらスニペットの名前で検索してみてください ;)
なるほど、承知しました!


aki さんが書きました: デモサイトは、24時間で消えてしまうそうなので、何か必要な内容があればメモ帳などに適当にコピーを取ってください。
(※2/27の23時頃に作成しました)
はい、最後に投稿いただいことを本日午前三時台に知ってこの期限を知ったので、それから大慌てで取り組んでおります。
今のところ消えてないと思っていたら、一日間違えた気がします。。昨日の23時と思っていたのですが、
今日の23時ですね。。。
期限があろうがとにかく助かっております。感謝申し上げます。
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

modxfan さんが書きました:
aki さんが書きました: 結局、Wayfinderで実現してみたのですが、いかがでしょうか?
Wayfinderであれば普通に用意されているパラメータと一部チャンクを作ってあげることで
階層構造のサイトメニューを表示し、現在地の表示も分けることが可能でした。
aki様、大変ありがとうございます。
イベントTOPを開いたら、イベント1(最古)が開きますが、Dittoで作成されているようですが、
このDittoでなぜ最古が指定されるのか?というと、この二番目のDittoが実際はorderBy=`ASC`で(未記入だとデフォルトのASCになる)、
displayが1番目だけを出力させるので、最古が出力される、ということですよね。

コード: 全て選択

[[Ditto? &parents=`2` display=`1` &tpl=`@CODE:<p style="color:#c00;">ここはイベントTOPですが、内容は[+pagetitle+]です。</p>`]]
[[Ditto? &parents=`2` display=`1` &tpl=`@CODE:[+content+]`]]
ですので、ここはばっちりのようです。


次が他のこれまでの方策と同じで、やはり達成できていないように見受けられます。
aki様が作成されたチャンクのcase03のWayfinderのソースでは、StartIDが1になっています。
つまりトップレベルから出力するようになっています。これですと当然ながらサイドバーに全てのページが表示されてしまいます。
しかし私が当初からおこないたいのはStartIDは1ではありませんので、ここはイベントカテゴリのIDに変更しました。
サイドバーに表示させたいリンク群は、現在開いているページが所属するカテゴリ以下のリンク群なので。

そしてこの状態で表示してみると、これまでの方策と同じく親リソースであるイベントトップページがサイドバーに出ませんでした。
試しに今、aki様のデモサイトの方でStartIDを2、つまりイベントカテゴリの親リソースの番号にしてみたところ、
私のサイトと同じ現象になりました。イベントカテゴリの親リソースだけでなく、他の親リソースも、「ホーム」も全て消えて、
出力されるのは私の現象と同じで、イベントカテゴリの子ページだけです。
WayfinderもDittoと変わらない機能しか持っていないようでしょうか。

イベントカテゴリの子リソースだけでなく、イベントカテゴリの親リソースも自動で出力したいのが当初からの希望なので、
どの方法もこれが達成されてくれず残念です・・・
「この親リソースのページ群を表示させよ」というだけのことがどうしてこんなにもすぐに出来ないのかがっかりな心境です・・・・・
この表示はとても頻繁に必要となる出力パターンなのに・・・
いちいちカテゴリごとに手動でIDを記載していくとか、個別にif文でプログラムしていくなどというのは
せっかくのCMSで本来おこなうべきものではないので、なんとかCMSの機能でおこないたいものですが、
これがMODXの限界なんでしょうかね・・・(MODXがんばれぇ)
親リソースとその一味を出力する変数がMODXに用意されていれば、それを記述するだけでいいんですが・・・
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by aki »

こんにちは。
こういう状態でしょうか?

http://130227230250-1949.evo.demo.modx.jp/

今はテンプレートなどを分けていませんので、すべてのページで「イベントTOP」と「イベントカテゴリに属するサブリソース」の
メニューが出てしまいますが、これをテンプレートを分けるなどして、実際はイベントカテゴリのページでのみ表示させる感じでしょうか。

とりあえず、ご確認ください。
全てWayfinderのパラメータとテンプレートで実現しています。
設定しているパラメータやテンプレートの内容は、前回の私の投稿でご紹介したサイト様をお読みください。
大変有意義なサイト様です。
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by aki »

modxfan さんが書きました:イベントカテゴリの子リソースだけでなく、イベントカテゴリの親リソースも自動で出力したい
とにかくこの状態になれば良いなら、Dittoを2回使えばできそうだったので、サンプルを追加しました。

Wayfinderにしろ、Dittoにしろ、「documents」「parents」「startId」といったパラメータが
今は普通にIDの数字で指定しているので、他のカテゴリでも同じものを出したいと思ったら
テンプレートを分けて、それらの数字を書き換えたスニペットコールを書くなどしなければなりませんが…。
一つのスニペットコールで全カテゴリで使い回せるものとなると、もっと工夫が必要です。
modxfan さんが書きました:はい、私もディレクトリとかカテゴリだとか何となく思っておりました。
ディレクトリの役目をさせるページだけチェックONするようですが、うっかりチェックOFFにして
親リソースを作成しても、何も問題が表沙汰にならないので「意味あるのかな?」と思っておりました。
別に問題とかはないですね。
MODXらしく自分がどのようなサイトを作りたいかに合わせて、自由に設定変更が可能です。
全くコンテナ(ディレクトリ)のないサイトを作ったからといって、それも問題ありません。

すべてが通常ページだとMODX管理画面の左ツリーが際限なく伸びていくので管理しにくかったり、
エイリアス(URL)が階層的になるので、エイリアスの命名がすっきりする程度のことです。
あとは、今回は条件に合わないということでしたが、コンテナ(親)に属するサブリソース(子)一覧を
表示するDittoが便利に使えたり、[*parent*]などのリソース変数を使って条件分岐をするなど
管理上の内部的な仕掛けの幅が広がるので、うまく構成すればそれだけ管理が楽になるという感じですかね。
modxfan さんが書きました:イベントTOPを開いたら、イベント1(最古)が開きますが、Dittoで作成されているようですが、(以下略)
これは、modxfanさんがこの方法でTOPと最古のページ内容を同じにしているようでしたので、それにならっただけです。
今回はMODX日本公式様が用意してくださっているデモサイトインストールを利用し、
元々の中身をつついてサンプルを作ったところ、たまたま各種指定を省略しても大丈夫な条件だったので
省略していますが、実際はサイトの実情に合わせて「orderBy」を付け足したりはしてください。
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

aki様、大変ありがとうございます。

追加のご案内に従ってWayfinder式でいじっていますと、もともと作成していた「class="active"をliタグに入れる」タイプですと
親リソースも子リソースも全てハイライトされてしまいました・・・
どうやらul、liタグの中にまたul、liタグが出力される式のようで、それが原因で最初の親リソースのハイライトが
その入れ子の子リソースすべてを包含するようになっていました。
よって、spanに入れる式に変更していったら出来たようです!!

それで思ったのは、作成しながら内容がわかってくると、Wayfinderを二回繰り返しているということかな?ならばもしかしてDittoでもできるとか?
と思っていたら、aki様の追加投稿に同じことが。

まだWayfinderの今回の方法を完全に理解できておりません。パーツがあっち飛びこっち飛びすぐに外部ファイル化していくので
全容を把握するのが当方では簡単ではなく。プログラマさんは簡単に理解できるのでしょうね。
これがいわゆるアタマが悪いということかなと思っております汗;

Let's enjoy MODxのサイトは存じております。
このサイトに書かれている説明文が理解できるようになりたいです
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by aki »

できましたか?
それならよかったです。
modxfan さんが書きました:どうやらul、liタグの中にまたul、liタグが出力される式のようで、それが原因で最初の親リソースのハイライトが
その入れ子の子リソースすべてを包含するようになっていました。
これはHTMLのルール上、入れ子リストを作るならそのようにマークアップするのが決まりですので、そうなりますね。

Wayfinderのデフォルトのテンプレートでは、入れ子になる場合 ul - li のみでマークアップし、
カレントドキュメントのli要素にclass属性としてactiveを付加するになっていました。
これだと希望の表示にはならないだろうと思いましたので、span要素でテキスト部を囲み、
スタイルが適用できるようなWayfinder用のテンプレートを作り、設定しました。
modxfan さんが書きました:Wayfinderを二回繰り返しているということかな?ならばもしかしてDittoでもできるとか?
Wayfinderは、繰り返しているわけではないですね。呼び出しているのは一度だけです。
確かに、startIdに「0以外」(今回ならイベントカテゴリの親である「2」)を指定すると、
そのままでは、イベントカテゴリ内の子ページ一覧しか表示されませんね。

しかし、Wayfinderには「displayStart」というパラメータがあります。
これを有効にすることで、親が表示できるようになります。
親の表示方法は「startItemTpl」に指定したテンプレートで設定できます。
(私も使ったことはありませんでしたが、Let's Enjoy MODx様に書かれていました)


私もわかるのはHTMLとCSSだけで、プログラムに関する知識はほぼ皆無です。
とは言え、MODXを触っているとどうしても少しはプログラム的な部分に目を通さなければならない場合が
出てくるので、PHPマニュアルで一つ一つ検索しながら、トライ&エラーを繰り返しています。
※今回はスニペットのパラメータ設定の話なので、プログラムは関係ないですが…
modxfan さんが書きました:パーツがあっち飛びこっち飛びすぐに外部ファイル化していくので
全容を把握するのが当方では簡単ではなく。
使い始めの頃は、私もよくそのような状態になり、どこに何の設定を書いたか分からなくなって
結局修正が面倒なサイトが出来上がったものです。
繰り返しているうちに自分にとって効率のよいパーツの作り方がだんだん分かると思います。頑張ってください。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

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

投稿記事 by yama »

話の内容をよく確認してないので外してるかもしれませんが・・Wayfinderにはカレントリソースのみにマークをつける&selfClassというパラメータもあって、私は(&hereClassではなく)こっちのほうをよく使います。
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by aki »

yama さんが書きました: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
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

まだ本業務に追われているのですが、フォーラムに新たに投稿があっているメールが届いたので見てみると、
なんかデモサイトに色々追加されてますね。
済みませんがまだ対応できないのでデモサイトを消さないでいただくことはできますか? 明日コピーしたりと保存したいので・・・
WayfinderやDitto色んなやり方が載っていて参考になりそうなんで。
本業の仕事に戻ります
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

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

投稿記事 by yama »

Dittoは理論的な組み立てがしやすくて万能感がありますが、Wayfinderはクセが強いですね。でも合理的で、それなりに理由を感じる実装も多い気がします。現在は開発が止まってますが、実装的には、先の先の先まで見通す作りになっていて、プログラマー視点から見るとかなり魅力的なスニペットだと思います。Dittoもそうですけど。MODXみたいな辺境のCMSで、よくこんな面白い拡張機能が存在するなあと思います・・
私自身は本体の把握だけで精一杯で、スニペットの使い方は正直よく分かってないです。&tplCurrentDocumentというパラメータは覚えてませんでしたが、これは使えますね。
自分はPHxモディファイアを書けばよいと思ってたりするので、こういうところはプログラマー目線だと思います・・
modxfan さんが書きました:済みませんがまだ対応できないのでデモサイトを消さないでいただくことはできますか? 明日コピーしたりと保存したいので・・・
WayfinderやDitto色んなやり方が載っていて参考になりそうなんで。
管理画面のバックアップマネージャーでバックアップをとっておくと、それをそのままインポートして再現できると思います。(もしかするとサーバ側でその種の処理は制限かけてるかもですが)
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

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

投稿記事 by 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
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

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

投稿記事 by yama »

2013-03-01_database_backup.zip
(41.24 KiB) ダウンロード数: 428 回
よくできたデモだと思うのでバックアップを添付しておきますねと
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

aki さんが書きました: ※ ※ ※ ※ ※

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

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

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

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

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

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

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

yama様もさりげなくZIP化していただき、ありがとうございます!
mune3001
メンバー
メンバー
記事: 63
登録日時: 2010年5月08日(土) 16:58

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

投稿記事 by mune3001 »

横から失礼します。

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

当方は通常ローカルでコーディングしその辺はjqeryで実装してしまいますね スニペット作ったりするより早いとおもいますよ
(どうしてもHTMLコードを出力する必要があるのでしたら申し訳ないです)
modxfan
メンバー
メンバー
記事: 241
登録日時: 2011年3月07日(月) 15:06

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

投稿記事 by modxfan »

mune3001 さんが書きました:横から失礼します。

これJqueryとか使った方が早いんではないでしょうか?
jqueyで class="current"
と出してcssで調整するのならローカルでチェックもできますし
googleで「jquery カレントページ」で検索すればサンプルはいっぱい出てきます。
なるほど、JavaScript方面ですか。
当方も考えなかったわけではないのですが、JavaScriptを切ったユーザのことを考えると
やはりプログラミングやCMSの機能でいくべし、と思っていました。
JQuelyはJavaScript切ったユーザ対応が可能なんでしょうか。
それともJavaScript切ったユーザは無視で良いという時代に来ているとか?

mune3001 さんが書きました: 当方は通常ローカルでコーディングしその辺はjqeryで実装してしまいますね スニペット作ったりするより早いとおもいますよ
(どうしてもHTMLコードを出力する必要があるのでしたら申し訳ないです)
スニペットよかそんなに早いのですか。検索してみてみましたがまだよく理解できておりませんが汗;。
http://coolwebwindow.com/jquery-lab/archives/66

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