スライダーの実装

固定ページにswiperを使ってスライダーを実装します。詳細はこちらのswiperの実装を参照ください。

ACFの設定

以下は実装の一例です。

フィールドタイプ -ラジオボタン
フィールドラベル　-スライダーの設定
フィールド名 -swiper-btn
選択枠　-有効にする・無効にする
返り値 -値

ACFの値を取得する

ACFの値を取得するにはget_field();関数を使用します。

<?php
$swiper = get_field("swiper-btn");
echo '<span>var_dumpの値: ';
print_r($swiper);
echo '</span>';
?>

値が取得できているか、print_rで確認しています。

論理演算子

以下のコードで条件に当てはまらない場合は、本体ごと非表示にします。

<div class="hero" <?php if ($swiper !== '有効にする') echo 'style="display: none;"'; ?>>

!=で’有効にする’でない場合にechoが実装されます。

スライダーの実装

以下のようにコードを記述しています。

php

<div class="swiper">
    <?php if ($swiper === '有効にする') : ?>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=1" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=2" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=3" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=4" alt="" />
            </div>
        </div>
        <div class="swiper-button-next fa-circle-right"></div>
        <div class="swiper-button-prev fa-circle-left"></div>
        <div class="swiper-pagination"></div>
    <?php endif; ?>

</div>

script

<?php if ($swiper === '有効にする') : ?>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script type="module" src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
<?php endif; ?>

上記のように条件分岐を設定することで、’有効にする’を選択している場合は表示され、それ以外は非表示となります。