kdcsライブラリー

acfで画像フィールドが複数あり、返り値がidの場合の出力

room_img1～room_img6まで画像フィールドがある場合
※画像サイズは複数（largeとthumbnail）に対応

<?php
$size_large = 'large';
$size_thumb = 'thumbnail';

$images = [];

for ($i = 1; $i <= 6; $i++) {
    $field = 'room_img' . $i;
    $attachment_id = get_field($field);

    if ($attachment_id) {
        $image_large = wp_get_attachment_image_src($attachment_id, $size_large);
        $image_thumb = wp_get_attachment_image_src($attachment_id, $size_thumb);
        $attachment = get_post($attachment_id);
        $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
        $caption = get_the_excerpt($attachment);

        // 念のため画像URLが取得できているかも確認
        if ($image_large && $image_thumb) {
            $images[] = [
                'large' => $image_large[0],
                'thumb' => $image_thumb[0],
                'alt' => esc_attr($alt),
                'caption' => esc_html($caption)
            ];
        }
    }
}
?>

テンプレートの出力部はswiperでスライドさせる場合

<div class="swiper-wrapper">
<?php foreach ($images as $img): ?>
    <div class="swiper-slide">
        <img src="<?php echo $img['src']; ?/>" alt="<?php echo $img['alt']; ?>" title="<?php echo $img['caption']; ?>">
        <?php if ($img['caption']): ?>
            <span><?php echo $img['caption']; ?></span>
        <?php endif; ?>
    </div>
<?php endforeach; ?>
</div><!--/.swiper-wrapper-->

(続きを読む…)

リンク画像がスライド中に誤タップされるのを防ぎたい場合

$('.slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick-slide a').css('pointer-events', 'none');
});
$('.slick-slider').on('afterChange', function(event, slick, currentSlide){
    $('.slick-slide a').css('pointer-events', 'auto');
});

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;
}

advanced custom fieldsでテキストエリアの内容をリストタグで出力する方法

<?php
// ACFのフィールド名を指定
$text = get_field('your_field_name');

if ($text) {
    // 改行で分割（Windows環境なども考慮して\r\nも含める）
    $lines = preg_split('/\r\n|\r|\n/', $text);

    echo '<ul>';
    foreach ($lines as $line) {
        // 空行を除外し、余分な空白を除去してエスケープ
        if (trim($line) !== '') {
            echo '<li>' . esc_html(trim($line)) . '</li>';
        }
    }
    echo '</ul>';
}
?>

「preg_split(‘/\r\n|\r|\n/’, $text)」：改行コードの違いに対応（Windows, macOS, Linux）

「trim($line) !== ”」：空行を除外

「esc_html()」：HTMLエスケープで安全に出力

「ul」タグでリスト化