WordPress 循环中的 ACF 图像滑块

Question

我有一个问题，我无法在 wp 循环中获取每个帖子的图像。

此代码进入一个 wordpress 循环，该循环拉取所有房地产类型的帖子，并且每个帖子都有一个 acf 图像滑块。 通过这段代码，我在循环的第一篇文章中获得了所有帖子的所有图像，我想要的是在每篇文章中我都获得了各自的图像。 另外，for 中的图像限制为 20 个，它应该是一个 count()，但我不知道如何处理它以便取出所有图像。 ACF 图像是个人图像，而不是画廊。

非常感谢您的帮助并向大家致以诚挚的问候。

function foto_slider($post_id) {
    $featured_image_url = get_the_post_thumbnail_url($post_id, 'full');
    $imagenes = [];
    $get_the_ID = get_the_ID();

    if ($get_the_ID == $post_id) {
        for ($i = 1; $i <= 20; $i++) {
            $imagen = get_field('foto' . $i, $post_id);
            if ($imagen) {
                $imagenes[] = $imagen;
            }
        }
    }

    ob_start();
    ?>
    <div class="slider-container">
        <div class="slider-wrapper">
            <div class="slider">
                <div class="slides">
                    <?php if ($featured_image_url): ?>
                    <div class="slide">
                        <img src="<?php echo esc_url($featured_image_url); ?>" alt="Featured image">
                    </div>
                    <?php endif; ?>
                    <?php foreach ($imagenes as $imagen): ?>
                    <div class="slide">
                        <img src="<?php echo esc_url($imagen['url']); ?>" alt="<?php echo esc_attr($imagen['alt']); ?>" />
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <button class="prev">❮</button>
            <button class="next">❯</button>
        </div>

        <div class="slider-counter">
            <span id="currentSlide">1</span>/<span id="totalSlides"></span>
            <span class="dashicons dashicons-camera-alt"></span>
        </div>
    </div>

    <style>

        .slider-container {
            width: 100%;
            max-width: 600px;
            position: relative;
            margin: auto;
            overflow: hidden;
        }

        .slider {
            display: flex;
            position: relative;
            width: 100%;
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease;
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            vertical-align: middle;
            transition: transform 0.5s ease;
        }

        .slide:hover img {
            transform: scale(1.1);
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            color: white;
            border: none;
            border-radius: 50%;
            padding: 10px;
            cursor: pointer;
            z-index: 2;
            font-size: 30px;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .slider-counter {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 4px;
            font-size: 12px;
            z-index: 2;
            border-radius: 3px;
        }
        
    .dashicons-camera-alt:before {
        position: relative;
        bottom: 4px;
        font-size: 0.7em;        
    }

        .slider-wrapper::before, .slider-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 1;
            pointer-events: none;
            transition: background 0.3s ease;
        }

        .slider-wrapper::before {
            left: 0;
            background: linear-gradient(to right, rgba(106, 105, 105, 0.4), transparent);
        }

        .slider-wrapper::after {
            right: 0;
            background: linear-gradient(to left, rgba(106, 105, 105, 0.4), transparent);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var slideIndex = 0;
            var slides = document.querySelectorAll('.slide');
            var totalSlides = slides.length;
            var prevButton = document.querySelector('.prev');
            var nextButton = document.querySelector('.next');
            var currentSlide = document.getElementById('currentSlide');
            var totalSlidesElement = document.getElementById('totalSlides');
            totalSlidesElement.textContent = totalSlides;
            function showSlide(index) {
                if (index >= totalSlides) {
                    slideIndex = 0;
                } else if (index < 0) {
                    slideIndex = totalSlides - 1;
                } else {
                    slideIndex = index;
                }
                var offset = -slideIndex * 100;
                console.log("Mostrando slide:", slideIndex, "Offset:", offset);
                document.querySelector('.slides').style.transform = 'translateX(' + offset + '%)';
                currentSlide.textContent = slideIndex + 1;
            }
            nextButton.addEventListener('click', function() {
                showSlide(slideIndex + 1);
            });
            prevButton.addEventListener('click', function() {
                showSlide(slideIndex - 1);
            });
            showSlide(slideIndex);
        });
    </script>
    <?php
    return ob_get_clean();
}

Answer 1

要解决这个问题，我们需要：

调整 get_field() 函数检索每个帖子的图像的方式。 动态计算图像数量，以便自动循环显示可用图像，而不是使用固定计数 20。 更新代码

function foto_slider($post_id) {
// Get the featured image URL
$featured_image_url = get_the_post_thumbnail_url($post_id, 'full');
$imagenes = [];

// Loop through ACF fields for the post and collect images dynamically
for ($i = 1; $i <= 20; $i++) {
    $imagen = get_field('foto' . $i, $post_id);
    if ($imagen) {
        $imagenes[] = $imagen;
    }
}

if (empty($imagenes) && !$featured_image_url) {
    // If no images are found, return early (optional)
    return '';
}

ob_start();
?>
<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slider">
            <div class="slides">
                <?php if ($featured_image_url): ?>
                <div class="slide">
                    <img src="<?php echo esc_url($featured_image_url); ?>" alt="Featured image">
                </div>
                <?php endif; ?>
                <?php foreach ($imagenes as $imagen): ?>
                <div class="slide">
                    <img src="<?php echo esc_url($imagen['url']); ?>" alt="<?php echo esc_attr($imagen['alt']); ?>" />
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <button class="prev">❮</button>
        <button class="next">❯</button>
    </div>

    <div class="slider-counter">
        <span id="currentSlide">1</span>/<span id="totalSlides"></span>
        <span class="dashicons dashicons-camera-alt"></span>
    </div>
</div>

<style>
    /* Slider styles here */
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var slideIndex = 0;
        var slides = document.querySelectorAll('.slide');
        var totalSlides = slides.length;
        var prevButton = document.querySelector('.prev');
        var nextButton = document.querySelector('.next');
        var currentSlide = document.getElementById('currentSlide');
        var totalSlidesElement = document.getElementById('totalSlides');
        totalSlidesElement.textContent = totalSlides;
        function showSlide(index) {
            if (index >= totalSlides) {
                slideIndex = 0;
            } else if (index < 0) {
                slideIndex = totalSlides - 1;
            } else {
                slideIndex = index;
            }
            var offset = -slideIndex * 100;
            document.querySelector('.slides').style.transform = 'translateX(' + offset + '%)';
            currentSlide.textContent = slideIndex + 1;
        }
        nextButton.addEventListener('click', function() {
            showSlide(slideIndex + 1);
        });
        prevButton.addEventListener('click', function() {
            showSlide(slideIndex - 1);
        });
        showSlide(slideIndex);
    });
</script>
<?php
return ob_get_clean();

}