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;
*/

以前、特定のカスタム投稿タイプの編集画面にあるacf入力フィールドについてcssを適用する方法（こちら）を書いたが、今回は全投稿タイプの投稿編集画面対象。

あらかじめcssフォルダ内に「custom-admin-acf.css」を作成しておく
※こちらの記述では固定ページ、投稿ページ共にcustom-admin-acf-cssが出力される
copilot

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->base === 'post') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

「投稿編集画面だけ」に限定したいので、get_current_screen() を使って画面の種類を判定

固定ページを除外したい場合
※こちらの記述では投稿ページのみcustom-admin-acf-cssが出力される

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

custom-admin-acf.cssの記述
入力フィールドのdata-nameにフィールド名が入っているのでそれぞれ入力し、widthを!important指定する

/* inputの場合 */
div[data-name="フィールド名"] input {
width: 300px !important;
}
/* selectの場合 */
div[data-name="フィールド名"] select {
width: 300px !important;
}

親要素にdisplay: flexを指定している中にある子要素はflexアイテムとなり、さまざまなプロパティが用意されている。

order … 順序の指定（子要素を任意の順で並べ替えられる）

flex-grow … 子要素の伸びる比率（初期値 0）
【 1 を指定すると、「余白があれば、その分だけ広がる」という意味になる】
flex-shrink … 子要素の縮む比率（初期値 1）
【 0 を指定すると、「絶対に縮まない」という意味になる】
flex-basis … 子要素のベースとなる幅の指定（初期値 auto）
【pxや%で指定する】

上記の3つは「flex-grow flex-shrink flex-basis」の順でまとめて指定できる
例：flex: 0 1 30%;

その他、
align-self … 子要素の垂直方向の揃え（初期値 auto）

flexを使ったレスポンシブレイアウトの例
asideの幅を全幅の30%で最小幅を250pxとし、残りのスペースをmainで使うという指定

html ---------------------------
<div id="wrapper">
<div class="contentBox">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
</div>

css ----------------------------
#wrapper {
    max-width: 1240px;
    width: 100%;
}
.contentBox {
    display: flex;
    flex-wrap: wrap;
}
.main {
    flex: 1; /* aside指定値(flexやmin-width)以外で伸縮 */
    min-width: 0; /* オーバーフロー防止 */
}
.aside {
    flex: 0 0 30%; /* 初期値・縮まない・幅30%を基本に */
    min-width: 250px; /* 最小幅を250pxに固定 */
}

メディアクエリでモバイル対応させる場合
※contentBox内を縦表示にしてmainとasideの幅を100%にする

@media (max-width: 780px) {
.contentBox {
  flex-direction: column;
  }
#main, .main {
  width:100%;
  min-width: unset;
  flex: 0;
  }
#aside {
  width: 100%;
  min-width: unset;
  flex: 0 1 auto;
  }
}

WordPressでユーザーが画像を投稿にアップする時、画像サイズや縦横比がバラバラでレイアウトが崩れてしまうことを防止してサイズを合わせる手段。
cssの「aspect-ratio」で対応できるがsafari（ios14以前）は未対応
css

img {
  width: 96%;
  aspect-ratio: 16 / 9; /* 例：16:9の比率に統一 */
  object-fit: cover;    /* はみ出た部分を切り取ってフィット */
  height: auto;         /* 高さは自動で調整 */
  display: block;
}

古いブラウザや特殊な環境では効かない可能性があるため、フォールバックとして padding-top を使った従来の方法。

.aspect-box {
  position: relative;
  width: 96%;
  padding-top: 56.25%; /* 16:9の比率 */
}

.aspect-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

slicksliderのスライド範囲にborder-radius:10px;overflow: hidden;を適用して中身の画像を角丸表示させようとしたが、safariだけ角丸にならない。safari特有のバグらしい。

対策方法は以下
.slick-list や .slick-track が overflow を制御しているため、それぞれに角丸と隠すスタイルを加えることで画像のはみ出しを防げる。

.slick-slider,
.slick-list,
.slick-track {
  border-radius: 10px;
  overflow: hidden;
}