我要做的是从转发器字段获取图像，并在我的主页上填充导致帖子的图像。
这对我来说通常很容易，但这里的问题是转发器字段中的每个帖子都有多个图像，这些图像位于高级自定义字段插件的灵活内容字段中。
目标是在主页上以完全随机的顺序从'square_image'字段获得无限量的图像，这些图像会导致他们的特定帖子。因此，对于15个帖子，每个帖子各有15个'square_images'，主页上将有225个图像以完全随机的方式链接到各自的帖子。
我想知道我是否需要在while循环中构建一个数组，以便我可以在结尾处获得最终的随机顺序，而不是仅以随机顺序从第1个帖子开始的前15个图像，然后是接下来的15个图像从帖子2以随机顺序，这不是我想要做的。
<?php get_header(); /* Template Name: Homepage Looper */ ?>
<div id="homepage">
<?php
// the query
$args = array(
'post_type' => 'projects',
'posts_per_page' => '-1',
'orderby' => 'rand',
);
$the_query = new WP_Query( $args );$count = 1; ?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="row">
<!-- the loop -->
<?php
while ( $the_query->have_posts() ) : $the_query->the_post();
if( have_rows('the_page_content') ):
while ( have_rows('the_page_content') ) : the_row();
if(get_sub_field('images')) :
while(has_sub_field('images')) : the_row();
?>
<?php
$image = get_sub_field('square_image');
if ( !empty($image) ):
// vars
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
?>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder">
<a href="<?php the_permalink(); ?>" rel="<?php the_title(); ?>">
<img src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" class="img-responsive home-tile" />
<span class="title"><?php the_title(); ?><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/magnify.png"></span>
</a>
</div>
<?php endif; ?>
<?php
if($count % 6 == 0) {echo '</div><div class="row">';}
$count++;
?>
<?php
endwhile; // while(has_sub_field('images')
endif; // get_sub_field('images')
endwhile; // have_rows('the_page_content')
endif; // have_rows('the_page_content')
endwhile; // $the_query->have_posts ?>
<!-- end of the loop -->
</div>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; // $the_query->have_posts ?>
</div>
<div id="single_project" style="position: absolute; margin-left:100%; width:100%;">
</div>
<?php get_footer(); ?>
ACF出口如下
if(function_exists("register_field_group"))
{
register_field_group(array (
'id' => 'acf_project-fields',
'title' => 'Project Fields',
'fields' => array (
array (
'key' => 'field_534efd890cd30',
'label' => 'Hero Image',
'name' => 'hero_image',
'type' => 'image',
'instructions' => 'Upload the large version for this post that will be used as the hero image on the top of the page.',
'save_format' => 'url',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_534efdb70cd31',
'label' => 'Page Content',
'name' => 'the_page_content',
'type' => 'flexible_content',
'instructions' => 'Build out the content for this project.',
'layouts' => array (
array (
'label' => 'Image Row',
'name' => 'image_row',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_534efdea0cd32',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716523cfc52',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716532cfc53',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => 1,
'row_limit' => 6,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
),
),
array (
'label' => 'Text + Images',
'name' => 'text_images',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_5356d3a6a8ac9',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => 'Enter in the title of this project if you wish for it to show above the text.',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'formatting' => 'html',
'maxlength' => '',
),
array (
'key' => 'field_534eff4ae5d31',
'label' => 'Text Content',
'name' => 'text_content',
'type' => 'wysiwyg',
'column_width' => '',
'default_value' => '',
'toolbar' => 'full',
'media_upload' => 'yes',
),
array (
'key' => 'field_534eff32e5d30',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716549cfc54',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716557cfc55',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => '',
'row_limit' => 3,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
),
),
array (
'label' => 'Images + Text',
'name' => 'images_text',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_534effafb045d',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716567cfc56',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716576cfc57',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => '',
'row_limit' => 3,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
array (
'key' => 'field_5356d3dba8aca',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => 'Enter in the title of this project if you wish for it to show above the text.',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'formatting' => 'html',
'maxlength' => '',
),
array (
'key' => 'field_534effafb045c',
'label' => 'Text Content',
'name' => 'text_content',
'type' => 'textarea',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'maxlength' => '',
'rows' => '',
'formatting' => 'br',
),
),
),
),
'button_label' => 'Add Row',
'min' => '',
'max' => '',
),
),
'location' => array (
array (
array (
'param' => 'post_type',
'operator' => '==',
'value' => 'projects',
'order_no' => 0,
'group_no' => 0,
),
),
),
'options' => array (
'position' => 'normal',
'layout' => 'no_box',
'hide_on_screen' => array (
0 => 'the_content',
1 => 'excerpt',
2 => 'custom_fields',
3 => 'discussion',
4 => 'comments',
5 => 'format',
6 => 'featured_image',
7 => 'send-trackbacks',
),
),
'menu_order' => 0,
));
}
答案 0 :(得分：3)
在初始post循环期间创建一个图像数组，随机化该数组，然后通过images数组循环输出html。
<?php
$args = array(
'post_type' => 'projects',
'posts_per_page' => '-1',
'orderby' => 'rand',
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
$images = array();
while ( $the_query->have_posts() ) : $the_query->the_post();
if( have_rows('the_page_content') ):
while ( have_rows('the_page_content') ) : the_row();
if( have_rows('images') ) :
while( have_rows('images') ) : the_row();
$image = get_sub_field('square_image');
if ( !empty($image) ):
// add image properties and related data to main images array
$images[] = array(
'url' => $image['url'],
'title' => $image['title'],
'alt' => $image['alt'],
'postdata' => array(
'id' => get_the_ID(),
'title' => get_the_title(),
'permalink' => get_permalink()
)
);
endif;
endwhile; // while(have_rows('images'))
endif; // have_rows('images')
endwhile; // have_rows('the_page_content')
endif; // have_rows('the_page_content')
endwhile; // $the_query->have_posts
wp_reset_postdata();
endif; // $the_query->have_posts
// Loop through the images array and output html for each image
shuffle($images); // Randomize the order of the images
$count = 1;
foreach($images as $img) :
?>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder">
<a href="<?php echo $img['postdata']['permalink']; ?>" rel="<?php echo $img['postdata']['title']; ?>">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt']; ?>" class="img-responsive home-tile" />
<span class="title"><?php $img['postdata']['title']; ?><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/magnify.png"></span>
</a>
</div>
<?php if($count % 6 == 0) echo '</div><div class="row">';?>
<?php $count++; ?>
<?php endforeach; ?>
</div>