• Home
  • Craft CMS
  • Craft CMS で質問と答えのサービスを作ってみる - STEP02:Craft CMS の設定

Craft CMS で質問と答えのサービスを作ってみる - STEP02:Craft CMS の設定

こんにちは。この記事は「Craft CMS Advent Calendar 2021」6日目の記事です。

昨日から、ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるという企画をやっていて、今日はその2日目です。

ステップ1で、Craft CMS のインストールが終わったので、今日は Craft CMS の管理画面で色々と作り始めようと思います。

セクションの作成

そもそもセクションとは何か、については「Craft CMS のエントリ(セクション、および、入力タイプ)について理解しよう | BUN:Log」の記事が参考になりますのでご覧ください。

さて、今回の質問と回答のサービスでは、下記のようなセクションを作ります。

  • プロジェクト:やっぱりプロジェクトという概念があると便利だと思います。
  • 質問と答え:初めは質問と回答は別々のセクションにしようと思いましたが、回答者が質問の意図を質問することもある可能性があるので、質問と答えは同じ枠組みにしようと思います。

細かい設定内容は下記の通りです。(そういえば、インストール時は言語を en-NZ にしていましたが、キャプチャが日本語の方が分かりやすいと思いましたので、言語を ja-JP に変更しました。)

プロジェクト・セクション

  • 名前:プロジェクト
  • ハンドル:projects
  • セクションタイプ:ストラクチャー
  • エントリ URI 形式:projects/{uid}
  • テンプレート:_pages/project
  • 最大レベル:空欄のまま(親子階層の深さの制限無し)
  • デフォルトのエントリの配置:他のエントリの前(降順に並ぶ:新しいものから順に並ぶ)
Clean Shot 2021 12 05 22 37 59

質問と答え・セクション

  • 名前:質問と答え
  • ハンドル:comments(質問と答えは大きく見ればコメントなので、comments と総称しておきます)
  • セクションタイプ:ストラクチャー
  • エントリ URI 形式:comments/{uid}
  • テンプレート:_pages/comment
  • 最大レベル:空欄のまま(親子階層の深さの制限無し)
  • デフォルトのエントリの配置:他のエントリの後(昇順に並ぶ:古いものから順に並ぶ)
Clean Shot 2021 12 05 22 40 36

フィールドの作成

続いて各セクションのエントリに持たせるフィールドを作成していきます。

プロジェクトフィールド

各質問と答えをプロジェクトに結びつけるためのフィールドを作成します。フィールドハンドルは「project」とします。選択できるプロジェクトは1つのみにします。

Clean Shot 2021 12 27 08 43 06

質問・答えフィールド

各プロジェクトに質問と答えフィールドを結びつけるために、プロジェクトセクションに「質問・答え」フィールドを作ります。フィールドハンドルは「comments」とします。

Clean Shot 2021 12 05 22 59 22
Clean Shot 2021 12 05 22 59 38

本文

質問・答えの本文用のフィールドです。Craft CMS の管理画面では、プラグインをインストールするとリッチエディタの Redactor が使えるようになります。しかし、今回は基本的に管理画面ではなくフロントで投稿することになると思うので、改行可能なテキストフィールドにしておきます。フィールドハンドルは「body」にしておきましょう。

Clean Shot 2021 12 06 21 25 46
Clean Shot 2021 12 06 21 26 31

フィールドをセクションに割り当て

作ったフィールドをそれぞれセクションに割り当てます。

  • 「プロジェクト( project )」フィールド→「質問・答え( comments )」セクション
  • 「質問・答え( comments )」フィールド→「プロジェクト( projects )」セクション
  • 「本文( body )」フィールド→「質問・答え( comments )」セクション

これでデータを入れる枠組みができました。今後他のフィールドが必要になったら適宜追加していきましょう。

今日はここまで。

See you next time.