WordPressでダイナミックなスライダーを実装する

WordPressのサイトで、ACF(Advanced Custom Fields)を使用してスライダーを
ダイナミックに実装する方法を紹介します。
このコードは、複数のスライドを表示すると共に、
リンクに「target=”_blank”」を加える機能も含んでいます。

コードの概要

下記のコードは、ACFで定義したフィールドを使用して、ダイナミックにスライダーを表示する方法です。スライドのデータは配列で管理し、ループを使用して表示を行います。

大まかな処理は下記の通りです。

スライド情報を配列で管理

ACFでフィールドを定義し、スライド情報を配列で一括管理。

ACFからデータを取得

get_field() を使用して、スライド画像、リンク、チェックボックスの値を取得。

プロパティの加工

チェックボックスに基づき、target="_blank"を加工。

HTMLとPHPコード

下記のHTML構造を使用します。

<div class="swiper-wrapper">
    <?php
    // スライド情報を配列で管理
    $slides = [
        [
            'image_field' => 'sliderimg01',
            'link_field' => 'linktxt01',
            'checkbox_field' => 'blanktxt01',
            'alt_text' => 'スライド画像01',
        ],
        [
            'image_field' => 'sliderimg02',
            'link_field' => 'linktxt02',
            'checkbox_field' => 'blanktxt02',
            'alt_text' => 'スライド画像02',
        ],
        [
            'image_field' => 'sliderimg03',
            'link_field' => 'linktxt03',
            'checkbox_field' => 'blanktxt03',
            'alt_text' => 'スライド画像03',
        ],
        [
            'image_field' => 'sliderimg04',
            'link_field' => 'linktxt04',
            'checkbox_field' => 'blanktxt04',
            'alt_text' => 'スライド画像04',
        ],
        [
            'image_field' => 'sliderimg05',
            'link_field' => 'linktxt05',
            'checkbox_field' => 'blanktxt05',
            'alt_text' => 'スライド画像05',
        ],
    ];

    // スライドを出力
    foreach ($slides as $slide) {
        // 1. 画像の値を取得
        $image = get_field($slide['image_field']);

        // 2. リンクの値を取得
        $link = get_field($slide['link_field']);

        // 3. チェックボックスの値を取得
        $checked = get_field($slide['checkbox_field']);

        // 4. チェックが入っている場合に target="_blank" を設定
        $target = ($checked && in_array('open_in_new_tab', $checked)) ? ' target="_blank"' : '';

        // 5. スライド表示を行う
        if ($image): // 画像フィールドが存在する場合
            ?>
            <div class="swiper-slide">
                <div>
                    <?php if ($link): ?>
                        <a href="<?php echo esc_url($link); ?>"<?php echo $target; ?>>
                    <?php endif; ?>
                        <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($slide['alt_text']); ?>">
                    <?php if ($link): ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
            <?php
        endif;
    }
    ?>
</div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-white"></div>

ポイント解説

配列によるデータ管理

スライドの情報を配列 $slides で管理し、
同じ構造のコードを繰り返しで変更なく出力できるようにしています。

get_field を使用してACFのデータを取得

各スライドの情報を、get_field() を通じて取得しています。
たとえば
$slide['image_field']: 画像のフィールド名。ACFで使用しているフィールド名をそのまま取得。
$slide['link_field']: リンクのフィールド名。
$slide['checkbox_field']: チェックボックスのフィールド名。

target="_blank"の追加

チェックボックスに基づき、値が配列として取得されることを考慮して、
in_array を使用して判定しています。

$target = ($checked && in_array('open_in_new_tab', $checked)) ? ' target="_blank"' : '';

HTMLエスケープでセキュリティ安全を確保

esc_url() でURLをエスケープ。
esc_attr() でalt値をエスケープ。

Swiperとの連携

Swiper.jsの構造とクラス名を活用することで、動的なスライダーを実現します。

まとめ

このコードを使用すると、ACFで定義したフィールドからダイナミックにスライダーを
表示することが可能です。
配列を使うことで、一定のパターンに基づいて動的にHTMLを生成できます。

これにより、コードの再利用性が高まり、メンテナンスの時間を短縮できます。
デザインや動作に合わせたカスタマイズも容易なため、
WordPressサイトの強力な機能の一部として活用できる方法です。