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

- WordPress -
2021.06.15
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で代替する手順

以下3ステップで設定、出力をしましょう。

  1. プラグインをインストール
  2. Smart Custom Fieldsでカスタムフィールドの設定
  3. 繰り返しフィールドを出力

1. Smart Custom Fieldsをインストール

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

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

インストールしたら、有効化を忘れずに。

2. Smart Custom Fieldsのカスタムフィールドを設定

メモ:

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

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

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

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

ACFのrepeater fieldを無料で代替

すると、フィールドを定義する欄が展開されます。

Advanced Custom Fieldsは無料?

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

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

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

ちなみに「タイプ」には以下種類が用意されています。

smart custom fieldsとACF

ACFより対応するタイプ種類が少ないので、全てのACFカスタムフィールドをSmart Custom Fieldsで代替できるわけではない点だけ注意してください。

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

Advanced Custom Fieldは無料?

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

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

3. 繰り返しフィールドを出力

  • gallery (グループ名)
    - gallery-item (画像)
    - gallery-description (テキスト)

このように繰り返しフィールドを作ったとして、これを出力する場合は

  1. SCF::get( 'グループ名' )で繰り返しフィールド全体を取得
  2. foreachループを回して個別フィールドを取得

という2ステップを踏みます。

PHP// まず「グループ名」で取得
$field_group = SCF::get( 'gallery' );
// ループ
foreach ( $field_group as $field ) {
    // 「画像」タイプを出力(登録した画像がimgタグとともに出力される)
    echo wp_get_attachment_image( $field['gallery-item'] )
    // 「テキスト」タイプを出力
    echo esc_html( $field['gallery-description'] )
}

・・・

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

通常はACFを使いつつ、繰り返したいカスタムフィールドがある時だけはSCFというふうに併用スタイルで使っています。

参考サイトWordPress公式 Smart Custom Fields

 

▼"なんとなく"から脱出するおすすめテキスト

↑TOP