Blog

ブログ

home > ブログ > WordPressリピーターフィールド実装メモ
WordPress

WordPressリピーターフィールド実装メモ

導入メモ

案件で「管理画面から項目を追加できる入力UI」が必要になった。

よくあるのはACF Proのリピーターフィールドだが、今回はACF無料版のみ利用可能な環境だったため、自前でリピーターを実装することにした。

対象は製品資料のPDF一覧や会社沿革のような、「行数が固定ではない情報」。

独自テーブルを作るほどの要件ではなかったので、保存先はWordPress標準のpost_metaを採用した。

結果として、管理画面から行追加・削除ができて、フロント側では配列をforeachするだけで扱える構成になった。

📝 なぜ自作リピーターを作ったのか

ACF無料版ではリピーターフィールドが利用できない。

ただ、実際の案件では以下のような入力UIが必要になることが多い。

用途入力内容
会社沿革年・内容
製品資料タイトル・PDF・画像
実績紹介タイトル・説明・画像
FAQ質問・回答

固定数のフィールドを並べる方法もあるが、将来的な増減を考えると管理しづらい。

そこで「行を追加」できる管理画面を自作することにした。

🏗️ 実装方針

今回の構成はかなりシンプル。

項目方針
保存先post_meta
管理画面メタボックス
行追加・削除JavaScript
画像選択wp.media()
表示get_post_meta() + foreach

独自テーブルは作らない。WordPress標準機能だけで完結させることを優先した。

📦 データ構造

保存データは配列形式。

company_history_items = [
  [
    'year' => '大正12年',
    'content' => '創業'
  ],
  [
    'year' => '昭和12年',
    'content' => '事業拡大'
  ]
];

実際にはこの配列がシリアライズされてpost_metaへ保存される。

沿革でも製品情報でも同じ構造で扱える。

⚙️ 作った構成

汎用的に使いたかったため、用途ごとに毎回作るのではなく共通化した。

ファイル役割
Repeaterクラスメタボックス生成
admin.js行追加・削除
admin.css管理画面UI
configファイルフィールド定義

設定だけ変えれば別用途でも流用できる状態になった。

例えば沿革用なら、

[
  'year' => 'text',
  'content' => 'textarea'
]

製品資料なら、

[
  'title' => 'text',
  'image' => 'image',
  'url' => 'url'
]

のような定義を渡すだけで利用できる。

🔑 実装時に重要だったポイント

name属性の設計

リピーターで最も重要だったのがname属性。

name="company_history_items[0][year]"
name="company_history_items[0][content]"

この形式にすることで、保存時に配列として受け取れる。

行追加時のindex管理

JavaScriptで行追加する際はindexを採番する。

0
1
2
3

削除後も連番になるよう振り直している。

indexが崩れると保存データが意図しない形になるため、この部分はかなり重要だった。

保存処理

保存時には最低限以下を実施。

  • nonceチェック
  • 権限チェック
  • sanitize
  • 空行除外

特に空行除外は入れておいた方が後から扱いやすい。

入力されていない行まで保存すると、フロント側の処理が複雑になる。

🖼️ 画像フィールド

画像選択はWordPress標準のメディアライブラリを利用。

wp.media()

を使えば管理画面と同じUIで画像を選択できる。

画像URLを保存してもよいが、今回は添付IDを保存する形にした。

その方が画像サイズ変更や将来的な運用変更に対応しやすい。

💻 フロント側の出力

取得は非常にシンプル。

$items = get_post_meta(
    get_the_ID(),
    'company_history_items',
    true
);

foreach ($items as $item) {
    echo esc_html($item['year']);
    echo esc_html($item['content']);
}

リピーターだからといって特別な処理は不要。

保存データが配列になっているので、そのままforeachできる。

🔄 実際に使ったケース

沿革

フィールド
年
内容

製品資料

フィールド
タイトル
画像
URL

どちらも同じリピータークラスで対応できた。

設定だけ変えれば流用できるので保守もしやすい。

✅ やってよかったこと

  • ACF ProなしでもリピーターUIを実現できた
  • WordPress標準機能だけで完結した
  • 複数箇所で使い回せた
  • フロント実装はforeachだけで済んだ
  • 独自テーブル管理が不要だった

⚠️ 注意点

これはACF Proの完全な代替ではない。

フィールドタイプを増やし始めると実装量が急激に増える。

まずは以下くらいに絞るのが現実的だった。

フィールド対応
text○
textarea○
url○
image○
relationship×
flexible content×

必要になった時に少しずつ増やす方が安全。

🤖 AIへ渡す用の実装要件まとめ

今回の実装を要件だけにするとこんな感じ。

  • WordPress管理画面にメタボックスを追加する
  • post_metaへ配列形式で保存する
  • name属性はmeta_key[index][field_key]形式にする
  • JavaScriptで行追加・削除を行う
  • 削除後はindexを振り直す
  • 画像選択はwp.media()を利用する
  • nonceチェックを行う
  • 権限チェックを行う
  • sanitizeして保存する
  • 空行は保存しない
  • フロントではget_post_meta()で取得する
  • 配列をforeachで出力する

気付き・補足メモ

今回作ったものは「ACF Proの代用品」というより、「案件で必要だった範囲だけ切り出した軽量リピーター」に近い。

WordPressでは管理画面の入力体験を整えるために高機能なプラグインへ頼りがちだが、要件が限定的なら標準機能だけでも十分対応できるケースがある。

特に沿革や資料一覧のような単純な繰り返しデータなら、post_meta + 配列保存はかなり扱いやすかった。

一覧へ戻る