Advanced Custom Fieldsの繰り返し機能を無料で使いたい時
Advanced Custom Fields(ACF)の繰り返しフィールド(Repeater Field)って有料か...。無料でこの機能が使えたらな...
そんな風にがっかりしている方へ。
Smart Custom Fieldsという無料プラグインを使えばだいたい同じことができますよ、という記事です。
WordPressでサイト制作していると、「投稿記事の編集画面でカスタムフィールドを必要な数に応じて簡単に増減させたい」という時が出てきますよね(こんな↓感じ)。
これを達成するための代表的なプラグインが「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ステップで設定、出力をしましょう。
- プラグインをインストール
- Smart Custom Fieldsでカスタムフィールドの設定
- 繰り返しフィールドを出力
1. Smart Custom Fieldsをインストール
WordPress管理画面「プラグイン」>「新規追加」から"smart custom fields"と検索し、インストールします。評価星５なのも良いですね。
インストールしたら、有効化を忘れずに。
2. Smart Custom Fieldsのカスタムフィールドを設定
メモ：
以下例では、本記事冒頭の画像にあるように「ギャラリー」というカスタム投稿タイプを作って、画像が並んで表示されるギャラリーページを想定します。
1記事内で何枚の画像を登録するかは事前に決まっておらず、投稿者の必要に応じて簡単に枚数増減したい、ということです。
有効化すると、管理画面左バーに「Smart Custom Fields」が現れるので、ここからカスタムフィールドの定義を始めます。
「新規追加」からフィールドタイトル名を入力し、「フィールド追加」をクリック。
すると、フィールドを定義する欄が展開されます。
- 「繰り返し」をオン
- PHPテンプレートで呼び出す際に必要な「グループ名」を定義("gallery")
- 「タイプ」を選択("画像")
- PHPテンプレートで呼び出す際に必要な「名前」を定義("gallery-item")
- どの投稿タイプに表示するかを選択("ギャラリー")
これら5点を最低限設定すれば、じゅうぶん使い物になります。
今回の例では、「画像」と一緒に表示する短い文章も紐づけたかったので、もう一つのタイプ「テキスト」も設定しました。
ちなみに「タイプ」には以下種類が用意されています。
ACFより対応するタイプ種類が少ないので、全てのACFカスタムフィールドをSmart Custom Fieldsで代替できるわけではない点だけ注意してください。
これでカスタム投稿タイプ「ギャラリー」の記事作成画面を見てみると、冒頭と全く同じ画像ですがこんな風に操作できます↓
このように＋ボタンをクリックするだけでフィールドを簡単に好きなだけ増やし、画像を登録しまくることができます。削除したい時は×をクリックするだけ。
フィールド左上の「三」マークをつかんで上下にさせれば順番の入れ替えもできます。
3. 繰り返しフィールドを出力
- gallery (グループ名)
- gallery-item (画像)
- gallery-description (テキスト)
このように繰り返しフィールドを作ったとして、これを出力する場合は
- SCF::get( 'グループ名' )で繰り返しフィールド全体を取得
- 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というふうに併用スタイルで使っています。
