Advanced Custom Fieldsの繰り返し機能を無料で使いたい時

- WordPress -
2020.04.30
WordPress

Advanced Custom Fields(ACF)の繰り返しフィールド(Repeater Field)って有料なのか...。

そんな風にがっかりしている方へ、「Smart Custom Fields」という無料プラグインを使えばだいたい同じことができますよ、という記事です。

WordPressでサイト制作していると、「投稿記事の編集画面でこんな↓感じでカスタムフィールドを必要な数に応じて簡単に増減させたい」という時が出てきますよね。

Advanced Custom Fieldは無料?

これを達成するための代表的なプラグインが「Advanced Custom Fields Repeater Field」でした。

ですが、残念ながらこれはAdvanced Custom Fieldsの有料アドオン

僕が携わっていた案件では有料だと導入が厳しかったので「しゃーない、このカスタムフィールドはACFで4つ事前定義しといて、最大4つですって仕様にしとくか」と諦めかけました。

そんなとき、ACF Repeater Fieldの機能を代替できる素晴らしい無料プラグイン「Smart Custom Fields」を見つけて歓喜したのでシェアします。

ACFを使ったことがある方なら、なにも難しいことはないのでぜひ使ってみてください。

(ちなみに冒頭の↑画像は、このSmart Custom Fieldsで実現したものです)

【無料】ACF Repeater FieldをSmart Custom Fieldsで代替する

  1. プラグインをインストールする
  2. フィールドの設定をする

Smart Custom Fieldsをインストール

WordPress管理画面の「プラグイン」>「新規追加」からsmart custom fieldsで検索し、インストール・有効化します。評価星5なのも良いですね。

Advanced Custom Fieldsのrepeater fieldを無料で代替

Smart Custom Fieldsを設定する

有効化すると、管理画面左バーに「Smart Custom Fields」と現れるので、ここからカスタムフィールドの定義を始めます。

メモ:

以下例では、本記事冒頭の画像にあるように「ギャラリー」というカスタム投稿タイプを作って、画像が並んで表示されるギャラリーページを想定します。

1記事内で何枚の画像を登録するかは事前に決まっておらず、投稿者の必要に応じて簡単に枚数増減したい、ということです。

「新規追加」からフィールドタイトル名を入力し、「フィールド追加」をクリック。

ACFのrepeater fieldを無料で代替

「フィールド追加」をクリックするとフィールドが展開されます。

Advanced Custom Fieldsは無料?

  1. 「繰り返し」をオン
  2. PHPテンプレートで呼び出す際に必要な「グループ名」を定義("gallery")
  3. 「タイプ」を選択("画像")
  4. PHPテンプレートで呼び出す際に必要な「名前」を定義("gallery-item")
  5. どの投稿タイプに表示するかを選択("ギャラリー")

これら5点を最低限設定すれば、じゅうぶん使い物になると思います。

今回の例では、「画像」と一緒に表示する短い文章も紐づけたかったので、もう一つのタイプ「テキスト」も設定しました。

ちなみに「タイプ」には以下種類が用意されています。ACFより対応タイプ種類が少ないので、そこだけは注意ですね。

smart custom fieldsとACF

これでカスタム投稿タイプ「ギャラリー」の記事作成画面を見てみると、冒頭と全く同じ画像ですがこんな風に操作できます↓

Advanced Custom Fieldは無料?

このように+ボタンをクリックするだけでフィールドを簡単に好きなだけ増やし、画像を登録しまくることができます。削除したい時は×をクリックするだけ。

フィールド左上の「三」マークをつかんで上下にさせれば順番の入れ替えもできます。

以上、まずはSmart Custom Fieldsで繰り返しカスタムフィールドを試してみてはいかがでしょうか、の巻でした。

大抵の場合は、通常はACFを使いつつ繰り返したいカスタムフィールドがある時だけはSCF、というふうに併用スタイルになるのかと思います。

SCFで作成したカスタムフィールドの入力値を出力する方法は、「smart custom fields 出力」とググれば親切な人たちが分かりやすく解説してくれている記事に出会えるのでそちらを参照してください。

参考サイトWordPress公式 Smart Custom Fields

↑TOP