Блог

Я создал поле повторителя под названием «random_images». Он содержит подполя: «случайная фотография один» (до пяти)

Одно случайное изображение за раз из этих пяти должно отображаться на моем интерфейсе. Изображения должны соответственно изменяться: при загрузке страницы должно отображаться одно случайное изображение. Через пару секунд изображение должно смениться на другое.

Как мне это сделать?

Я новичок в ACF и PHP. Это то, к чему я пришел до сих пор:

  if (get_row_layout() == 'random_images') {

            $rows = get_sub_field('random_images'); 
            $rand_row_image = array_rand($random_images, 1); 
            $image = wp_get_attachment_image_src($rand_image, 'full');
          
        }

 

Я предполагаю , что у вас есть поле повторителя random_images , которое называется поддиапазоном повторяемости (поле изображения) image , поэтому, когда вы перейдете в свой редактор записей (или куда бы вы ни поместили повторяемое поле), вы можете повторить поле изображения столько раз, сколько хотите, и поместить туда столько изображений, сколько хотите.

Затем, если вы введете свой код в single.php (или вы создаете части шаблона или другие файлы шаблонов), вы можете сделать это:

 <?php
    // ... template code already there
    
    $random_images = get_field('random_images');
    //The line below will mix the array randomly, so you always pick a random element from it
    shuffle($random_images);
    $random_img_url = $random_imges[0]['image']['url'];
?>
 

Примечание. Способ получения URL-адреса может измениться в зависимости от того, как вы настроили свои поля при их создании, но в этом и заключается идея.

Примечание: Если вы хотите использовать get_field() вне цикла, вам придется использовать идентификатор записи таким образом get_field('random_images', $post_id);

Приведенный выше код предоставит вам одно из изображений, которые вы разместили в поле повторитель, так что теперь вы можете отобразить это изображение на своей странице или в публикации, и изображение будет отличаться при каждой загрузке страницы.

     <img src="<?php echo $random_img_url; ?>" />
 

До этого момента вы использовали PHP для визуализации случайного изображения, но с помощью PHP вы не можете изменить изображение после загрузки страницы, поэтому для этого вам придется использовать jQuery (вы можете использовать ванильный JavaScript, но для упрощения я объясню это с помощью jQuery).

Если у вас нет пользовательского файла для размещения кода JS в разрабатываемой теме, вам придется создать файл с именем custom.js или любым другим именем, которое вы хотите ему присвоить, а затем поставить этот файл в wp_enqueue_script очередь . Я не буду больше объяснять это, потому что это не имеет прямого отношения к вопросу.

Теперь у вас есть свой custom.js файл, но вам понадобится способ получить другие URL-адреса изображений со страницы со случайными изображениями, поэтому для достижения этой цели вы можете сделать следующее там, где мы оставили php-код выше.

 <?php
    $rand_imgs_urls = [];
    foreach($random_images as $image) {
        $rand_imgs_urls[] = $image['image']['url'];
    }
// Now, instead of the <img /> tag we used above, we will use this
?>
<div class="random-img" data-images="<?php echo json_encode($rand_imgs_urls); ?>">
    <img src="<?php echo $rand_imgs_urls[0]; ?>" />
</div>
 

После того, как вы отрисовали изображение, теперь вы можете использовать jQuery для размещения изображений в data-images атрибуте div выше и изменять src изображения каждые несколько секунд. Итак, в custom.js файл, в который вы можете поместить что-то вроде этого:

 jQuery(document).ready(function($) {
    var images = JSON.parse($('.random-img').data('images'));
    var randomImage = images[Math.floor(Math.random()*images.length)];
    setInterval(function(){ $('.random-img img').attr('src', randomImage); }, 5000);
});
 

При этом изображение будет меняться каждые 5 секунд.