Home > MODx
Web 酒 肴
[MODx]Dittoでn件ごとにページング処理を実装する方法
MODx(0.9.6)において、Dittoは記事をソートして一覧表示などする場合に必須のスニペットだ。 今回、一覧表示した記事を10件ごとにページングして表示する機会があったので、その方法をここに残しておく。
必要最小限の書式は以下
[!Ditto? &id=`id` &display=`10` &paginate=`1` &language=`japanese-utf8` !]
パラメータ名 役割 id Dittoごとに一意なID display １ページに表示する件数 paginate 1でページング処理を有効にするlanguage デフォルトでは英語になっていたので日本語を指定（「前へ」「次へ」などの文言） 注意点
- ページのキャッシュを無効にするために [[Ditto ～ ]] ではなく [!Ditto ～ !] の書式にする
- 必ずidパラメータに適当な値を設定する（Dittoを同ページで複数使用するときにはそれぞれ別の値を設定する）
ページのナビゲーションを表示したい場所に以下のタグを追加する
<p id="ditto_pages">[+id_previous+] [+id_pages+] [+id_next+]</p>強調している「id」のところには自分がDittoのタグに使用したidの値と置きかえる。 HTMLは別にPタグでなくとも良いが、スタイルの指定のためタグのID指定はditto_pagesにする。（まぎらわしいがDittoのidのことではなくHTMLタグのこと）
スタイルシートに以下を追加する
.ditto_paging { border-top: 1px solid #ccc; padding: 10px; font-size: 86%; color: black; } #ditto_pages .ditto_currentpage { border: 1px solid black; padding: 1px 5px 2px; margin-right: 1px; background-color: #008CBA; color: #fff; } #ditto_pages .ditto_off { border: 1px solid #ccc; padding: 1px 5px 2px; margin-right: 1px; color: #ccc; } #ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited { border: 1px solid #008CBA; padding: 1px 5px 2px; margin-right: 1px; text-decoration: none !important; color: black; } #ditto_pages a:hover { background-color: #fff; color: #000; }このスタイルシートは以下のページでDittoの作者が提供しているものだ。 好きに改変して使用すればいいだろう。
以上
これでid="ditto_pages"のタグ内が自動で変換されてページングのナビゲーションが表示される。 うまくいかないときはid指定、ページのキャッシュなどに気をつけて確認してみよう。
ちなみに使ってみるとこんな感じにできました。
[MODx]CSS Star Ratingで記事評価機能
よく技術情報のページなんかに
この記事は役に立ちましたか？
なんていって5段階評価の投票ができるようなページがあります。 Amazonの書評みたいなものですね。 あれを実現するスニペット。
参考サイトはこちら
導入手順は上記サイトを参考にしてもらえばわかるので、簡単に。
- 環境： MODx 0.9.6 / CSS Star Rating 1.0
- 本家サイトから必要なファイルをダウンロード＆解凍＆適切な場所に設置
star_rating.snippet.tplの内容で新しいスニペットを作成（スニペット名：star_rating）star_ratingという名前のテンプレート変数を作成し、投票機能をつけたいテンプレートへのアクセスを追加- 先ほどのテンプレートにCSS Star Ratingのスタイルシートへのリンク追加
- テンプレートや記事の好きな場所に
[!star_rating!]と追加
以上。（ホンマにテキトーやな）
でもここで問題。僕のサイトでは「フレンドリーURL：ON」、「エイリアスパス：使用」の環境で使用しているのですが、投票時にアクセスするURLにエイリアスパスが反映されないという不具合が。 要するに親フォルダ（エイリアス名：parent）の下に子ドキュメント（エイリアス名：child）があり、接尾詞が.htmlの場合は以下のURLになる。
http://(site_url)/parent/child.html
そのドキュメントを評価するときに接続するURLは、以下のようになるべきである。
http://(site_url)/parent/child.html?starvote=5&pid=xx
（starvoteは5段階評価の数値、pidはドキュメントID）
だが、そこがうまく動作せず、以下のように親のパスがなくなったURLになってしまっている。
http://(site_url)/child.html?starvote=5&pid=xx
そしてページが見つからないというエラーになる。 こちらのフォーラムを参照したところ、どうやらこれはバグだ。
Support/Comments for CSS Star Rating
次のバージョンで修正されると思われるが、次バージョンがリリースされるまでは以下の修正で対応できる。
star_ratingスニペットを修正する
star_rating.snippet.tplファイルの内容でstar_ratingスニペットを作成したが、その内容を修正する。 star_rating.snippet.tplでいうところの157行目から161行目までの5行でURLを作成している。 （最低評価から最高評価まで5段階分のURL) そこを修正する。
修正前
$modx->makeUrl($modx->documentObject['id'], $modx->documentObject['alias'], 'starvote=1&pid=' . $docID)
･･･
$modx->makeUrl($modx->documentObject['id'], $modx->documentObject['alias'], 'starvote=5&pid=' . $docID)
修正後
$modx->makeUrl($modx->documentObject['id'], '', 'starvote=1&pid=' . $docID)
･･･
$modx->makeUrl($modx->documentObject['id'], '', 'starvote=5&pid=' . $docID)
つまり以下の部分を空文字列に置き換える。
$modx->documentObject['alias'] → ''
これで正常に動作しました。 同じユーザが何度も投票しないようにするためのセッション管理などで、ややこしい部分はまだありそうだけど、それはおいおい調査します。
追記
検索エンジンのクローラーのせいで、勝手に投票されて少し困っています。 対処法はまだわかりません。
[MODx]Dittoでドキュメントとウェブリンクを同様に扱うには？
MODxを使用して以下のようなことをしたいと思っていました。
前提条件
- MODx0.9.6
- サイトには随時、記事が追加される
- サイトは外部のブログへのリンク集も持ち、そのリンクも随時追加される
- MODx上で記事はドキュメント、リンクはウェブリンクで保持している
やりたいこと
- 新着記事、リンクをDittoを使って表示する
- 記事もリンクも時系列でソートされ、どちらもごちゃまぜで表示する
- 記事の場合は内容（[+content+]）の一部、リンクの場合はリンクの説明文（[+description+]）を表示する
例えば以下のようなファイル構成です（カッコ内はそのオブジェクトが持つID）。
記事用フォルダ(1)
└記事A
└記事B
└記事C
ウェブリンク用フォルダ(2)
└リンクA
└リンクB
└リンクC
このようなファイル構成から記事とウェブリンクをごちゃ混ぜにして公開日が最新の3件を取得するには、Dittoスニペットを以下のように使用します。表示に使用するチャンク名はchunkとします。
[[Ditto?parents=`1,2` &sortBy=`pub_date` &total=`3` &sortDir=`DESC` &tpl=`chunk` &hideFolders=`1`]]
それぞれの設定内容は以下の意味です。
| 設定内容 | 意味 |
|---|---|
| parents=`1,2` | 記事用フォルダとウェブリンク用フォルダ両方から取得する |
| sortBy=`pub_date` | 公開日でソートする |
| total=`3` | 3件取得する |
| sortDir=`DESC` | 降順でソート（新しいものが上にくる） |
| tpl=`chunk` | 使用するチャンク名 |
| hideFolders=`1` | 親フォルダを表示対象にしない |
そしてチャンクを以下のようにし、PHxファンクションを使用してドキュメントかウェブリンクかで表示内容を変えます。プレースホルダ[+type+]がドキュメントの場合はdocument、ウェブリンクの場合はreferenceとなるのでそれをもとに条件式で判定します。
注意
以下の例はうまく動作しません。
[+phx:if=`[+type+]`:is=`reference`:then=`[+description+]`:else=`[+content:limit=`500`+]`+]
これでドキュメントのときは内容（[+content+]）の最初の500文字を、ウェブリンクの場合は説明文（[+description+]）を表示できる・・・と思ってたらできませんでした。色々試行錯誤しているうちに、どうやら[+type+]の中にオブジェクトのタイプがちゃんと取れるときと取れないときがあることがわかりました。
結局、[+type+]を別の場所で一度使用してやるとPHxファンクションの中でも使用できるようになることを発見。以下のようにHTMLのコメント部で一度表示するとうまくいきます。なぜかはわかりませんが。
一応の解決策
<!-- this is [+type+] -->
[+phx:if=`[+type+]`:is=`reference`:then=`[+description+]`:else=`[+content:limit=`500`+]`+]
Dittoのソースとか追っかければ理由はわかるかもしれないけど、今までPHPはほとんどノータッチだったので、とりあえず動いたということでよしとします。
Home > MODx