WordPressで定番のプラグイン ACF(Advanced Custom Fields)。「担当範囲」「使用技術」のような繰り返し項目を、管理画面から手軽に入力できるのが魅力です。EmDash でも、プラグイン「Field Kit」を使えば、同じような繰り返しフィールドを実現できます。

Field Kit とは

Field Kit は、EmDash の json フィールドに対して、入力しやすいウィジェット(編集UI)を追加するプラグインです。ただのテキスト入力ではなく、用途に合った形で繰り返し項目を入力できるようになります。

EmDashでACF風のカスタムフィールド・リピーターを作る — Field Kitの図解

導入は設定1行から

プラグインを読み込み、EmDash の plugins に渡すだけで有効になります。

astro.config.mjs
import { fieldKitPlugin } from "@emdash-cms/plugin-field-kit";

export default defineConfig({
  integrations: [
    emdash({
      database,
      storage,
      // ACFのリピーター相当の list / tags / object-form / grid を追加
      plugins: [fieldKitPlugin()],
    }),
  ],
});

フィールドを定義する

あとは、コレクションのフィールドで widget を指定します。たとえば「使用技術」をチップ状に入力する tags ウィジェットは、次のように定義します。

フィールド定義(例)
{
  "slug": "tech_stack",
  "label": "使用技術",
  "type": "json",
  "widget": "field-kit:tags"
}

この設定だけで、管理画面の編集フォームが「タグを追加していくUI」に変わります。複数の項目をまとめたグループを繰り返したいときは list ウィジェットを使うと、ACFのリピーターに近い使い心地になります(固定項目のグループをまとめたいだけなら object-form が単一オブジェクトの固定フォームとして使えます)。

使いどころ

実績の「使用技術」「担当範囲」「実装機能」、スタッフ紹介、料金表、FAQ など、「同じ形の項目を、数を決めずに繰り返したい」場面で活躍します。実際にこのサイトの実績ページでも、Field Kit を使って使用技術をチップ表示しています。

EmDash でのサイト構築や、こうしたカスタムフィールド設計のご相談は、お問い合わせからどうぞ。