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

[modxfan]

-----
ご利用のサーバ：CPI ZZプラン
MODXのバージョン：| 1.0.5J-r7
PHPのバージョン：5.2.8、5.3.6
MySQLのバージョン：5.0.90(port 3307)
ブラウザ： 色々。IE8、9、Firefox12
-----



トップページ

イベント---------- イベントトップ（一番古いイベントを自動で表示）
イベント2月20日
イベント2月16日
イベント2月8日
イベント2月3日
イベント1月23日

製品案内

会社概要

などというサイト構成になっています。

上記の「イベント」ページ内は、左サイドバーがあり、そこには各イベントページを開くリンクテキストと
なっています。

このサイドバーのリンクテキストを自動で出力させるべく、以下のDittoのソースを記載していて、
出力自体はできているのですが、現在ページhover状態にできません。
例えば、現在開いているページが上記の「イベント2月16日」ページだとすると、
サイドバーの「イベント2月16日」というリンクテキスト部分だけが、背景色が違ったり、
アンカーリンクが消えていてテキストカラーも違う色になっている、ということです。
現在開いているページがどのページか？を視覚的に見せるようにしたいのです。

Wayfinder記述を追記してもみましたが、空欄になり何も表示されませんでした。
うまくいく記述方法はあるでしょうか。

(1) Dittoのみのソース

コード: 全て選択

<ul>
[!Ditto? &parents=`44` &display=`30` &tpl=`Archive-Sbar_Training` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateSource=`pub_date` &id=`sbar_traininglist` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`3` &startId=`[[UltimateParent]]`!]
</ul>

(2) Wayfinderを追記してみたソース

コード: 全て選択

<ul>
[!Ditto? &parents=`44` &display=`30` &tpl=`Archive-Sbar_Training` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateSource=`pub_date` &id=`sbar_traininglist` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`3` &startId=`[[UltimateParent]]`!]
</ul>
		
[!Wayfinder? &startId=`0` &includeDocs=`49`!]
[!Wayfinder? &startId=`[[UltimateParent]]` &sortOrder=`asc` &tpl=`Archive-Sbar_Training`!]

※Wayfinderの &startId=`44`にしたり、&includeDocs=`44`にしたりといじってもみたのですが
　空っぽで何も表示されませんし、ソースも空っぽでした。

何卒宜しくお願い致します。

[yama]

http://130220210332-1949.evo.demo.modx.jp/manager/
サンプル作ってみました

http://130220210332-1949.evo.demo.modx. ... x.php?id=2
上記が一覧として、

http://130220210332-1949.evo.demo.modx. ... .php?id=16
http://130220210332-1949.evo.demo.modx. ... x.php?id=5
http://130220210332-1949.evo.demo.modx. ... x.php?id=7

表示してるページに応じてactiveという文字列を出力します。これをclass="active"とするか、activeという文字列自体をstyle="color:red;"などとするとよさそうに思います。

コード: 全て選択

<?php
if($output==$modx->documentObject['id']) return 'active';
?>

上記のような簡単なモディファイアをスニペットとして作って、phx:isActiveというスニペット名で保存します。名前はなんでもいいのですが、先頭４文字は「phx:」です。

コード: 全て選択

[[Ditto?
&parents=2
&tpl='@CODE:[+pagetitle+][+id:isActive+]<br />'
]]

スニペットコール側では上記のように書きます

[modxfan]

ありがとうございます。やってみたところ、シンタックスエラーとか出ました。
phx:isActiveというスニペットを作り、Dittoソースのparentを当方の該当カテゴリに変更し、以下にように記載しました。

コード: 全て選択

<ul>
[[Ditto?
&parents=44　&tpl='@CODE:[+pagetitle+][+id:isActive+]<br />']]
</ul>

サイドバーに表示されたテキストは以下です。

イベント１
Parse error: syntax error, unexpected '&' in /usr/home/zz1234567/html/assets/snippets/ditto/classes/phx.parser.class.inc.php(333) : eval()'d code on line 2

イベント２
Parse error: syntax error, unexpected '&' in /usr/home/zz1234567/html/assets/snippets/ditto/classes/phx.parser.class.inc.php(333) : eval()'d code on line 2

イベント３
Parse error: syntax error, unexpected '&' in /usr/home/zz1234567/html/assets/snippets/ditto/classes/phx.parser.class.inc.php(333) : eval()'d code on line 2

以下、このようにページの数だけ続きます...

何かやり損じがあるでしょうか。
まだCSSでactiveというclassは作成していませんが、だからと言ってエラーになるわけはないと思いますし・・・
phx.parser.class.inc.phpというファイルが古いのでしょうか。
２行目には
/*####
とあり、
333行目には
$sql = "SELECT snippet FROM " . $modx->getFullTableName("site_snippets")
と記載されています。
宜しくお願い申し上げます。

[yama]

MODXのバージョンが少し古いのでスニペットコールの書き方を変更する必要があるかも？夜遅くなるかもしれませんが、あとで確認してみますね

[modxfan]

バージョン差によるものかも、ということですね。
前回、１つ目のサイトで最新バージョンにしてすごく往生したので、この二つ目のサイトの
アップデートはものごっつう慎重にしたく考えております。
スニペットコール、お待ちしております。ありがとうございます。

[modxfan]

当方は勘違いしておりませんよね。
成功したというサンプルの該当箇所は、ヘッダー横並びのグローバルナビゲーションの中の
「新着情報」タブがハイライトされてある、ということですよね？

コード: 全て選択

 <ul><li><a href="http://130220210332-1949.evo.demo.modx.jp/" title="Home" >Home</a></li>
<li class="active"><a href="/index.php?id=2" title="新着情報" >新着情報</a></li>
<li><a href="/index.php?id=8" title="MODXの主な特長" >MODXの特長</a></li>
<li><a href="/index.php?id=12" title="サポート" >サポート</a></li>
<li class="last"><a href="/index.php?id=3" title="お問い合わせ" >お問い合わせ</a></li>
</ul>

上記のソースのうち、新着情報のタブのところだけに<li class="active">となっています。
当方はサイドバーで相談しましたが、箇所が違うだけで意味は同じであると理解しております。
もし何か勘違いがあるようであれば併せてお知らせください。
よろしくお願いいたします。

[yama]

http://130220210332-1949.evo.demo.modx. ... x.php?id=2
分かりやすいように色をつけてみました。
テンプレートはチャンクに書きました。こうすると古いバージョンのMODXでも使えると思います

[modxfan]

ああ、「新着情報」のナビゲーションの箇所ではなかったのですか。
「コピー - 新サービスのお知らせactive」の箇所だったのですか。
しかしソースを拝見しましたが、
<a href="http://130220210332-1949.evo.demo.modx. ... id=16">コピー - 新サービスのお知らせ</a><strong style="color:red">active</strong>
となっていますので、これですとリンクテキストエリアをハイライトできないので、このstrongタグを追加する方法は今回は見送ります。
<li class="active">の形で作成したいです。


それで、phx:isActiveにあるソースをチャンクに入れるということでしたので、そうしましたが全然ダメだったので、
よくわからないなりに以下のようにしてみましたが、

コード: 全て選択

if($output==&modx->documentObject['id']) {
	<li class="active">[+menutitle+]</li>
}else {
	<li><a href="[~[+id+]~]">[+menutitle+]</a></li>
}

これもダメでした。
ブラウザでは以下のように表示されます。
------------------------------------------------------------
if($output==&modx->documentObject['id']) {
イベント１
}else {
イベント１
}if($output==&modx->documentObject['id']) {
イベント２
}else {
イベント２
..... 以下イベントページの数だけ続く
------------------------------------------------------------

このときのソースは以下です。

コード: 全て選択

<ul>
if($output==&modx->documentObject['id']) {
	<li class="active">イベント１</li>
}else {
	<li><a href="event/01.html">イベント１</a></li>
}if($output==&modx->documentObject['id']) {
	<li class="active">イベント２</li>
}else {
	<li><a href="event/02.html">イベント２</a></li>
}
..... 以下イベントページの数だけ続く

つまり、if文はそのまま見えてしまっているし、かつ、if文が機能しておらず、
そのまま分岐がされておらずどちらの条件の出力もされてしまっているし、
これが全てのイベントページのリンクについてこうなっているという状態です。
チャンクの中を
<?php
if文
?>
と囲ってもみましたがダメでした。以下です。

コード: 全て選択

documentObject['id']) {
イベント１
}else {
イベント１
} ?>documentObject['id']) {
イベント２
}else {
イベント２
} ?>
..... 以下イベントページの数だけ続く

現在開いているイベントページが例えば「イベント２」だとすると、
サイドバーの「イベント２」と表示されている部分だけアンカーリンクがなくなり、
li が、
<li class="active">
となるようにするにはどうしたらいいでしょうか。

やり方は簡便で美しい最小限のソースや手法でおこないたいもので、
上記の方法にこだわっておりません。違う記載方法でも構いません。
宜しくお願い致します。

[modxfan]

MODXの旧バージョンでも使えるようにするにはphxからチャンクに変更するということで、
チャンクに入れた場合の結果がどうダメだったのかを記載しておりませんでした。

ブラウザでページを表示するとサイドバーのテキストリンク群は一切表示されず、
その代わりに以下の文言が出ていました。

&tpl
指定したDittoテンプレート(チャンク)にプレースホルダが含まれていません。上記のテンプレートの内容を確認してください。

&tpl
指定したDittoテンプレート(チャンク)にプレースホルダが含まれていません。上記のテンプレートの内容を確認してください。

&tpl.....以下ページの数だけ続く

こうなっていたので、仕方なく先に投稿したようにif文でいじってみた、という流れです。

宜しくお願い致します。

[yama]

Dittoの使い方は他の人が詳しいかも？また何か方法思いついたら連絡しますね

[modxfan]

Dittoの使い方は他の人が詳しいかも？また何か方法思いついたら連絡しますね

有難う御座います。
そうですか、このご回答ということは、やり方は間違っていなかったということだと理解いたしました。
そして、yama様でもできないとなると理由は解りませんが相当な難問なんだと理解致しました。
あきらめようかと思います。

[yama]

いえ、もう少しスマートな方法がないかなと思ったので。Dittoのオプションでありそうな気がしますので、今度調べてみます

[modxfan]

いえ、もう少しスマートな方法がないかなと思ったので。Dittoのオプションでありそうな気がしますので、今度調べてみます

なるほど、そういうことでしたか。Dittoのオプションですか。私もネットで探してみます。
有難う御座います。

[modxfan]

Dittoのオプションでおこなう方法は、当方のネット検索テクニックでは見つけられず、
なのでもう一度、ご案内いただいた内容を読みながら色々とやってみているのですが、もしかしてもう少しでいけそうな状態になっている？？のでしょうか。
という状態に遭遇してしまいました。あとは現在地のハイライト機能がなってくれればいいのですが、そこだけならず、
サイトバーのリンク群は全ページ分正常に表示されました。
どこかいじるとうまくいったりしないでしょうか？
以下、ソースです。

●phx:isActive
もしかして、教えていただいたままの「active」はそのまま使うわけではなく、いじるのか？と思い、
「' class="active"'」というふうに、差し込みしたいソースを全て入れてみました。

コード: 全て選択

<?php
if($output==$modx->documentObject['id']) return ' class="active"';
?>

●HTMLソース
&tplの中身を色々いじってみました。そうかこういうふうにアレンジすればいいのか、という感じはつかめたのですが、
「href="[+url+]"」と書いている状態ではうまくいかず・・・

コード: 全て選択

[!Ditto? &parents=`44` &display=`30` &tpl=`@CODE:<li[+id:isActive+]><a href="[+url+]" title="[+pagetitle+]" [+type:別窓+]>[+menutitle+]</a></li>` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateSource=`pub_date` &id=`sbar_traininglist` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`3`!]

このようにしたところ、サイドバーのリンク群は全て正常に表示されたところまでは良かったのですが、
本件を取り組む前と全く同じ状態にしかなりませんでした。現在開いているページが「イベント２」としたら、
「イベント２」のページがハイライトされず、現在のページではないページと同じ普通のマウスオーバーしていない状態に
なっているだけです。

●ブラウザの「ソースの表示」で記載されているHTMLソース

コード: 全て選択

<ul>
<li><a href="http://mysite.jp/event/01.html" title="イベント１" >イベント１</a></li>
<li><a href="http://mysite.jp/event/02.html" title="イベント２" >イベント２</a></li>
<li><a href="http://mysite.jp/event/03.html" title="イベント３" >イベント３</a></li>
</ul>

なぜかわからないですが、例えばイベント２のページを開いているとしたら、
イベント２のテキストリンクのところだけが、
<li class="active"><a href="http://mysite.jp/event/02.html" title="イベント２" >イベント２</a></li>
というように、「 class="active"」と挿入されて欲しいのですが、されてくれません・・・

<?php
if($output==$modx->documentObject['id']) return ' class="active"';
?>
というphxのソースの意味は、
「もし今開いているページと同じページIDだったら、『 class="active"』という文字列を、指定した挿入場所に挿入しなさいよ」
という意味なのかと思っていたのですが・・・
ウーン・・・もう少しまで来ているような気がするのですが。。

[modxfan]

なぜかわかりませんが一部出来ましたが、以下の二つが課題です。


(1) カテゴリートップページを開いたときだけ、このハイライト機能が機能してくれない。機能させるには？

サイドバーのテキストリンク群の各それぞれのページを開いたときは、ばっちりハイライトされています。
イベント３を開くと、イベント３のテキストリンクだけ<li class="active">と出力されてくれています。
しかし、このイベントのカテゴリのトップページを開いたときは、ASCなので一番古い記事を開くようにしていますが、
この場合のみ、<li class="active">になってくれず、<li>になってしまいます。
「一番古い記事の場合」に<li class="active">にせよ、
というのでは本件の場合しか当てはまらなくなるのでそうではなく、
「このカテゴリのトップページの場合」、<li class="active">にせよ、という命令記述が出したいところだったので、
[!Ditto? &startId=`44` &parents=`44`
とかやってみたのですが変わらずで・・・


(2) この記述はバージョンアップに耐えうる記述になっているでしょうか？

先日、バージョンが古いからこの書き方ではダメかな、とおっしゃっておられたので
気になるのですが、以下の記載方法は当方のバージョンである1.0.5J-r7 ではできるものの、
この頃のバージョンでは出来ないのでしょうか？
もしそうならば、バージョンアップしようがしまいが機能する書き方か、
もしくはバージョンに相当差が出ない間は使えるような書き方に変更しなければなりません。

バージョンアップするとこれまで機能していたものが機能しなくなる、ということが一番恐ろしく思います。
バージョンアップしたら今回のサイドバーが表示されなるとか、そういうことが会社サイト運営としては一番恐ろしいので・・・



それでは以下ソースです。

●スニペット・・・phx:isActive

コード: 全て選択

<?php
if($output==$modx->documentObject['id']) return ' class="active"';
?>

●HTMLソース

コード: 全て選択

<ul>
[!Ditto? &parents=`44` &display=`30` &tpl=`@CODE:<li[+id:isActive+]><a href="[+url+]" title="[+pagetitle+]" [+type:別窓+]>[+menutitle+]</a></li>` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateSource=`pub_date` &id=`sbar_event` &orderBy=`pub_date ASC` &hideFolders=`1` &depth=`3`!]
</ul>

何卒宜しくお願い申し上げます。

[modxfan]

&hideFolders=`1`
というのがいけないのか？と思い、
&hideFolders=`0`
にしてもみましたが現象変わらずでした・・・。
カテゴリトップページを開いても、サイドバーの一番上に掲載している「イベント１」はハイライトされません。


そして、もうひとつのMODXサイトでもやってみました。
こちらの方は、記事の古い順にとかではなく、また、カテゴリトップページも作成しております。
この場合、サイドバーに出力したいのは、フォルダ（親リソース）とそれに所属した各ページです。
親リソースが一番上で、その下に続けてクリエイト順に並ばせたいです。
こちらのサイトでも、&hideFolders=`0`にしてみましたが、現象変わらずで、
親リソースが出力されません。
出力されないのでハイライトをしようにもできません・・・。

[aki]

最初の投稿を読ませていただきましたが、
要するに「今現在開いているページ（カレントドキュメント）」では、「（そのページへの）リンクテキストの装飾を変更したい」
ということでしょうか？

Dittoのスニペットコールの中で「tplCurrentDocument」を使用するのはどうでしょう。
こんな感じです。

コード: 全て選択

<ul>
[[Ditto? &parents=`**` &orderBy=`**` &tpl=`nav_usual` &tplCurrentDocument=`nav_current`]]
</ul>

普通のリンクにするチャンク（nav_usual）は、以下のように。

コード: 全て選択

<li><a href="[~[+id+]~]">[+longtitle+]</a></li>

カレントドキュメントのときのチャンク（nav_current）は、こんな感じで。

コード: 全て選択

<li class="current"><a href="[~[+id+]~]">[+longtitle+]</a></li>

Dittoは「2.1.4r1」、MODXは「1.0.8J」の使用でカレントのときは、class名の付いたテンプレートの方が出力されています。
的外れな回答だったら申し訳ありません。

[modxfan]

aki様、感謝致します。
tplCurrentDocumentというものがあるのですか。
なるほど、テンプレートを切り替えるってわけですね。ちょっとやってみます。また追記いたしますので。

追記。
やってみました。
が、phxを使う方法と同じようです。
カテゴリトップページ、つまり親リソース（親フォルダ）のページがサイドバーのリンク群に出力されていませんし、
このページURL入力して開いても、ハイライトされておりませんでした。とても残念です。
当方の記述の誤った点を是非ご指摘ください。
以下、おこなったソースです。

●HTMLソース

コード: 全て選択

<ul>
[!Ditto? &hideFolders=`0` &parents=`49` &display=`30` &tpl=`Nv-Sbar_Usual` &tplCurrentDocument=`Nv-Sbar_Current` &paginate=`0` &paginateAlwaysShowLinks=`0` &dateSource=`pub_date` &id=`sbar_list` &orderBy=`pub_date ASC` &depth=`3`!]
</ul>

●チャンク・・・Nv-Sbar_Usual

コード: 全て選択

<li><a href="[+url+]" title="[+pagetitle+]" [+type:別窓+]>[+menutitle+]</a></li>

●チャンク・・・Nv-Sbar_Current

コード: 全て選択

<li class="active"><a href="[+url+]" title="[+pagetitle+]" [+type:別窓+]>[+menutitle+]</a></li>

[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」といったスニペットを使用している？


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

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

ということですよね？


デモサイトで動作させてみたので、ご確認ください。ピンクの部分です。
http://130226210657-1949.evo.demo.modx.jp/
http://130226210657-1949.evo.demo.modx.jp/manager/　（管理画面、ID・パスともにmodx）

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

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

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

＊＊＊　＊＊＊　＊＊＊　＊＊＊　＊＊＊

それとは別の問題として、以下で返信されている
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」は、親として指定したフォルダの中にさらに作ったフォルダをメニューとして出力するかどうかのパラメータだと思います。

※たぶん…！私も勉強中であやふやなところがたくさんあるので詳しい方、ご指摘あればください

どう解決するかですが、リンク一覧を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の数字決め打ちでリンクさせている部分があるので、変更がある場合は手動で書き換えなければいけませんが、
コンテンツ数が少ないサイトなら、十分対応できるかと思います。

長々と書きましたが、私の読み取ったこととやりたいことが全く違っていたらすみません。

[modxfan]

aki様のご尽力に感謝と感動をしています・・・・・
ひととおりやってみますのでのちほど追記いたします。お待ちください