Custom Field Suiteでloopを複数設置した場合に意図しないloop要素が複製された

Custom Field SuiteはWordPressのプラグインでloopフィールドが多重化できるということで、今回の案件の要件とハマったので利用してみました。

そのloopフィールドの多重化で少しハマったのでメモ。

環境

• WordPressのバージョン：6.0.3
• Custom Field Suiteのバージョン：2.6.2.1（執筆時点の最新）
  
  

構成

カスタムフィールドに複数のカスタムフィールドグループが存在

イベントグループ

• イベント項目1
• イベント項目2
• イベント詳細ループ
  • 個別開催日時設定ループ
    • 日付
    • 開始時間
    • 終了時間

リンクボタングループ

• リンクボタンアイテムループ
  • ボタンタイプ
  • ボタンURL
  • ボタンラベル

と大まかですが、上記のようなフィールドグループを2つ特定のカスタムポストに紐付けていました。

症状

上記の構成のときに「リンクボタンアイテムループ」を追加するボタンが入力画面の上部と下部に存在するのですが、上部から追加しようとした場合に「リンクボタンアイテムループ」の構成が複製されて追加されるのではなく「個別開催日時設定ループ」が追加されるということが起こりました。

原因

ループフィールドのファイル（custom-field-suite/includes/fields/loop.php）を見に行くとプラスボタンでクローンを生成するJavascript内で、該当のグループを特定するIDを参照しにいっている先の要素が別のところを見に行ってるっぽい。

 $(document).on('click', '.cfs_insert_field', function(event) {
                    event.stopPropagation();
                    var $add_field = $('.cfs_add_field'); //←ここ

// ~ 以下省略

ということで、この部分を修正してみた。

修正

プラグイン本体のファイルは変更したくないので、フィールドのオーバーライドなどできないかと調べていると、以下の記事が丁寧に記載してくれていました。

www.itti.jp

ということで、同じようにloopフィールドを上書きできると思い、テーマ内に custom-field-suite/includes/fields/loop.php を inc/loop.php としてコピーし、functions.php で

add_filter('cfs_field_types', 'plus_field_type');
function plus_field_type($field_types){
    $field_types['loop'] = './inc/loop.php';
    return $field_types;
}

というものを追加すると loopフィールド がテーマディレクトリの中で上書きできるようになりました。

あとは loop.php で

 $(document).on('click', '.cfs_insert_field', function(event) {
                    event.stopPropagation();
                    // var $add_field = $('.cfs_add_field'); // 変更前コード
                    var $add_field = $(this).parents('.cfs_loop').find('.table_footer .cfs_add_field'); // 変更後コード

// ~ 以下省略

として記載してあげたら、自分の領域の cfs_add_field の要素を見に行くようになりました。

まとめ

Custom Field Suiteは細かいところまで手を入れられる素晴らしいプラグインだなと思いました。 ただ、今回はカスタムフィールドの構成が肥大化したのも原因かと思うので、もっともっと分割していったほうがやさしいのかなとも思った件でした。

もし参考にしていただけましたら幸いです。