ラック
Home > CMS > 記事 > 2017年10月 > ランキングテーブルをMODxで作る

ランキングテーブルをMODxで作る

カテゴリ: MODx

久々のMODxネタ。こういうのをパッと思い付くようになれると色々と捗る気がします。

仕様

データ設計

  • 各項目をtableで表示
    • ランキングの個数・種類は増減する可能性があるため、ランキング1つでリソース1つとする
    • ランキングのランクを表示する記事ページが必要なため、このページ(リソース)を各ランキングリソースの親リソースとして親子管理とする
  • 各項目における表示項目は以下の2つ
    • ランキング名: TextField
    • ランク: Radio Button (0~5)
      • 表示はラジオボタンで設定した数値分だけ、ランクを示すアイコンをループで表示(例: 3ならば3個。残り2個は余白もしくはそれを示すアイコンを表示。★と☆を用いて、ランクが3であれば「★★★☆☆」となる)。
  • table全体を表示するリソースにテンプレート変数「更新日付」を紐付け、その値をページの最終更新日付とする

詳細設計

必要な項目
  • テンプレート: 2
  • テンプレート変数: 2
  • スニペット: 1
  • リソース: 親: 1, 子: ランキングの個数
  • ManagerManagerの管理画面カスタマイズ使用

構築手順

  1. テンプレートを作成
    1. ランク用のテンプレートを作成(既存のコピーで良い。ただし必要であればtableを表示させるためのcssを追加)
      • テンプレート名: ランク
    2. ランキング用のテンプレートを作成(既存のコピーで良い)
      • テンプレート名: ランキング
  2. テンプレート変数を作成
    1. 「ランク」
      • 変数名: ranking_status
      • 投稿画面内の見出し: ランク
      • 入力フォーム: Radio Options
      • オプション:
        0||
        1||
        2||
        3||
        4||
        5
      • 規定値: 0
      • プロセッサ: (空欄)
      • テンプレートへの紐付け: 1.2.で作成した「ランク」に紐付け
    2. 「更新日付」
      • 変数名: ranking_modifieddate
      • 投稿画面内の見出し: 更新日付
      • 入力フォーム: DateTime
      • 規定値: (空欄)
      • プロセッサ: (空欄)
      • テンプレートへの紐付け: 1.1.で作成した「ランキング」に紐付け
  3. ManagerManagerのルール作成
    1. チャンク→mm_rulesの末尾に以下を追記
      /* 第三引数(対象リソース)ブランク、第四引数にテンプレートID指定で、対象テンプレートを使用している全てのリソースが対象となる */
      mm_hideFields('longtitle,description,link_attributes,introtext,menutitle,parent,is_folder,is_richtext,log,content', '', 'XX'); //テンプレートID=XX(=テンプレート「ランク」)に適用。タイトル、テンプレート変数、メニューオーダーなど必要最低限以外を画面から隠す
      mm_renameField('pagetitle', '項目名', '', 'XX'); //管理画面の「タイトル」という表示を「ランク名」に変更
      mm_hideFields('longtitle,description,link_attributes,introtext,menutitle,parent,is_folder,is_richtext,log', '', 'YY'); //テンプレートID=YY(=テンプレート「ランキング」)に適用。タイトル、テンプレート変数、メニューオーダー、本文など必要最低限以外を画面から隠す
  4. ランクのループ処理を行うスニペットを作成
    1. スニペット→新規作成
      • スニペット名: phx:ranking_loop
        • テンプレート変数を引数として使用するため、PHxプラグインとして作成する。そのため、先頭に「phx:」を付けること
      • スニペットコード:
        $ranking = $value; // 入力値$valueを$rankingに代入
        for($i = 1; $i < 6; $i++) { //0~5の6段階、0の場合は☆を5個出力とする
        if($i <= $ranking) {
        echo "★";
        }
        else {
        echo "☆";
        }
        }
  5. リソースを作成
    1. ランキングを表示する記事ページ(親リソース)を作成
      • リソース名: ランキング
      • エイリアス、メニューオーダー: 任意
      • 使用テンプレート: ランキング(1.1.で作成)
      • 更新日付: カレンダーから日付を入力(2.2.で作成)
        更新日付の編集画面
      • 本文
        <p>更新</p>
        <table>
        

        記事はありません。

        </table>
    2. 各ランクを作成
      ランクリソースの作成
      • リソース名: (ランク名)
      • エイリアス、メニューオーダー: 任意
      • 使用テンプレート: ランク(1.2.で作成)
      • ランク: 0~5のいずれかを選択(ラジオボタン。 2.2.で作成)
        ランクリソースの編集画面

以上を経て生成されたサンプルが下図となる。

表示サンプル

参考

タグ: テンプレート変数,スニペット,チャンク

 



関連する記事一覧