kdcsライブラリー

acfで画像フィールドを多く使うと縦長になってしまうので、3枚ずつを横並びにする方法。
初めはflort:leftで並べたが、画像が全部埋まらないとレイアウトが崩れてしまう。
これら複数の画像フィールドをdivで囲んでflexboxで処理する方法。

※注意点は、advanced custom fieldsの仕様が変わると修正しなければならない可能性がある
※acf proを使えばこの方法は必要ない

javascript（ custom-admin-acf_img.js ）

// acfの「複数画像フィールド」をdivで囲む ----------------------------
jQuery(function($) {
  const fieldGroups = [
    { prefix: 'banquet_img', wrapperClass: 'img_wrapper_banquet' },
    { prefix: 'room_img', wrapperClass: 'img_wrapper_rooms' }
  ];

fieldGroups.forEach(group => {
  const $fields = $(`[data-name^="${group.prefix}"]`);
    if ($fields.length) {
      const $wrapper = $(`<div class="${group.wrapperClass}"></div>`);
    
    // 先に wrapper を挿入
      $fields.first().before($wrapper);
    
    // その後 wrapper にフィールドを append
      $fields.each(function() {
        $wrapper.append($(this));
      });
    }
  });
});

※先にwrapperのdivを挿入してから画像フィールドを中に入れるという順にしないとエラーになる

functions.php

// あらかじめjsフォルダ内にcustom-admin-acf_img.jsを作成しておく----------------------------
function custom_admin_scripts() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_script('custom-admin-acf_imgjs', get_template_directory_uri() . '/js/custom-admin-acf_img.js');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_scripts');

css ( custom-admin-acf.css )

/* 画像（floatで3列にする） */
div.img_wrapper_rooms,
div.img_wrapper_banquet {
  display: flex;
  flex-wrap: wrap;
}
div.acf-field-image {
  width: calc(100% / 3) !important;
  padding: 16px;
}


/* div.acf-field-imageにflexが使えない場合 */
/*
min-height: 320px !important;
float: left !important;
clear: initial !important;
*/