WordPressのカスタムフィールドで自由に追加出来る項目を作る方法（CFS利用）

ただいま車屋のサイトをWordPressで組んでまして、車の登録をカスタム投稿でやって車の写真をカスタムフィールドに入れる感じで作っていってるんですが、車の写真を沢山載せたい！っていうんですよ。

今までこれ系の依頼にはあらかじめ写真のカスタムフィールドを10個程度作っておいて対応してたのですが、今回は写真の上限がどうも定まらない。

という事で、カスタムフィールドに写真を追加する際にお客さんの方で自由に何枚でも追加出来る方法を探しておりましたら意外に簡単に出来たのでご紹介。

カスタムフィールドの作成はCustom Field Suiteを使用

WordPressでカスタムフィールドを作る際は僕いつも「Custom Field Suite」っていうプラグイン（以下CFS）を使ってますので、このプラグインベースで説明します。

色々調べてみたらCFSでカスタムフィールドのループっていうのが作れるみたいで、CFSのオフィシャルにもやりかた載ってました（笑）もっと前に調べてやっときゃよかったなー。

CFSで自由に項目を増やせるカスタムフィールドを作る手順

CFSでカスタムフィールドのループを作る

とりあえずフィールドを作成。ラベルと名前は通常通り好きに決め、フィールドタイプを「ループ（複製フィールド）」にします。この際に行ラベルとかボタンのラベルとか上限やらも決めれるみたい。

で、決めたらとりあえず「公開」を押して保存します。

増やしたいカスタムフィールドを作る

次に増やしたいカスタムフィールドを作成。僕の場合は写真なので写真の項目を作りましたが、テキストとかなんでもOK。

作ったら上の画像のようにフィールドをドラッグアンドドロップで写真の下に入れ込みます。

入れ込めたらこんな感じで青くなる。CFSにこんな機能があったなんて・・・。ここで忘れずに「更新」ボタンを押しておきましょう。

カスタムフィールドに自由追加のフィールドが出来てるか確認

これで該当のカスタム投稿を追加してみると・・・「追加」ボタンが出来てますね！

これで追加ボタンを押せば好きなだけ画像を登録する事が出来るカスタムフィールドが完成しました！

テンプレートファイルにカスタムフィールドをループさせるコードを記述

最後にテンプレートファイルに今回作ったカスタムフィールドをループさせるコードを記述すれば完成！サンプルコードはCFSのオフィシャルに載ってたのでそれを少し改造してこんな感じにしました。変数とかはお好きな感じで。

get( 'car-photos' );
foreach ($cars as $car): ?>

これで上手くループするはず・・・

出ましたね！完成です！

あーこれで今後は同じような案件が来てもカスタムフィールドを大量に作らなくて良くなったぜ！

※写真素材はいつもの「ぱくたそ」様から頂きました