MODXでカテゴリー別リンク一覧を生成する方法
社内の業務でカテゴリー別のエントリー一覧を作成することになったが、
MODXのDittoで表現するには複雑な処理があったのでオリジナルのスニペット作成に挑戦してみました。
こちらの内容はサンプルであり、架空の会社名を使っています。
完成のイメージから考える
こういう感じの一覧を出力したかったのです。画像クリックで一覧の全体が見れます。
各エリアの会社の件数とその一覧ですね。サンプルなのでシンプルにしています。
上部に各エリアのアンカーへリンクを張ったボタンを配置しています。
エリアのリンクをクリックすると、各エリアの見出しに移動し、件数と一覧を確認できます。
「詳細を見る」ボタンで各エントリーのページへ遷移します。
表示する情報をリソースとして作成する
テンプレート変数作成
会社名用と所在地の登録と出力用に
「test_company_name」と「test_company_location」を、
テンプレート変数として作成しています。
入力フォームはTextにしました。
後の項目は適当に決めました。
リソースで使うテンプレートとの関連付けを忘れずに。
コンテナとリソースの作成
各エリア名のコンテナを作成します。
リソースを作成後、ページ設定タブから「コンテナとして扱う」にチェックを入れるか、
エリア名リソースからサブリソースを作成すると自動でコンテナに変更されます。
作成したテンプレート変数の項目に「会社名」と「県名」を入力した子リソースをいくつか作っておく
テンプレート変数と関連付けた使用テンプレートを選択し、カスタムフィールドに会社名と所在地を入力し、更新します。
「entry_list」チャンク
完成イメージをもとにチャンクを作成します。
あとでソースコードを貼りますが、
エリア名のリンクを出力する「entry_list_link」と
各エリアの一覧を出力する「entry_list_length」という
2種類のスニペットを呼び出しています。
entry_list_linkの引数
「&parentId」は親のリソースIDです。
関東は110、関西は169、東北は13。
リソース名の後ろの（）内の数字を入れます。
「&anchor」は各エリアの見出しにジャンプするためのアンカー名です。
entry_list_lengthの引数
「&parentId」は親のリソースIDです。
entry_list_linkと同様です。
「&anchor」は各エリアの見出しのアンカー名（id）です。
H3タグのidに出力される文字列なので「#」は必要ありません。
「&items」は、このスニペット中に入れ子で呼び出しているDittoの記述です。
「&parents」は親リソースID、
「&tpl」は出力テンプレートのチャンクを指定。
「&paginate」はページャー機能です。「0」がOFF、「1」がON。
「&sortDir」は昇順にしています。降順にしたい場合は「DESC」と指定します。
「&sortBy」は「menuindex」。これはリソースの並び順。
Dittoのテンプレート「entry_list_tpl」
スニペット「entry_list_link」
$modx->getChildIdsで指定したリソースIDの子リソースの数をカウントし、
子リソースが1つでもあれば指定したアンカーにページ内リンクを表示する仕様です。
非公開のリソースはカウントされません。
スニペット「entry_list_length」
こちらも$modx->getChildIdsで子リソース数をカウントしますが、件数を出力します。
非公開のリソースはカウントされません。
リソース内にチャンクを貼り付け、デザインをカスタマイズ
リンク一覧を表示したいリソース内に「entry_list」チャンクを貼り付け、デザインを調整すれば完成です。
こうなりました。
まとめ
スニペットを使えば少しのPHPを書くだけでDittoよりも複雑な一覧コンテンツが作成できました。
スニペットコールのソースコードをMODXで作られたこのサイトに貼り付けるところで一番苦労しました。スニペットが展開してしまい、うまく貼れなかったので、MODXのエディタに貼るのをあきらめ、Github Gistを利用しました。
参照サイト
スニペットコールとスニペット自体の作り方はこちらを参考にさせていただきました。
Dittoの使い方
MODX APIの使い方
getChildIds
