我正试图从我的博客中输出最新的5篇文章。我希望每个帖子缩略图以以下格式填充div。
<div class="row full">
<div class="large-6 medium-6 small-12 columns"></div>
<div class="large-6 medium-6 small-12 columns"></div>
</div>
<div class="row full">
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
</div>
我从另一篇文章中获得了这段代码,只做了一些编辑,但我没有达到目的。
<?php
// Let\'s get all posts with thumbnail set in some category
$args = [
\'posts_per_page\' => 5,
\'orderby\' => \'date\',
\'order\' => \'DESC\'
];
// Fetch posts
$query = new WP_Query( $args );
if( $query->have_posts() )
{
while ( $query->have_posts() )
{
$query->the_post();
// Collect all items into a temp array
$tmp[] = sprintf(
\'<div class="small-12 medium-6 large-6 columns"><a href="%s">%s</a></div>\',
get_permalink(),
get_the_post_thumbnail( get_the_ID(), \'large\' )
);
}
$tmpp[] = sprintf(
\'<div class="small-12 medium-4 large-4 columns"><a href="%s">%s</a></div>\',
get_permalink(),
get_the_post_thumbnail( get_the_ID(), \'large\' )
);
}
// Split the divs into rows of 2 items
$rows = array_chunk( $tmp, 2 );
// Split the second chunk of divs into rows of 3 items
$rowss = array_chunk ($tmpp, 3);
// Housecleaning
unset( $tmp );
unset( $tmpp);
wp_reset_postdata();
// Output the rows
foreach( $rows as $row ){
printf( \'<div class="row full">%s</div>\', join( \'\', $row ) );
}
foreach( $rowss as $roww ){
printf( \'<div class="row full">%s</div>\', join( \'\', $roww ) );
}
?>
不幸的是,它不能正常工作。它输出的是:
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2015/12/15/5-decorating-tips-for-every-living-room/"><img width="1024" height="640" src="http://localhost:8888/myoshdiy/wp-content/uploads/2015/12/living-room-pictures-1024x640.jpg" class="attachment-large wp-post-image" alt="living-room-pictures"></a></div>
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/excepteur-sint/"><img width="800" height="533" src="http://localhost:8888/myoshdiy/wp-content/uploads/2014/03/LED-flushmount.jpg" class="attachment-large wp-post-image" alt="LED-flushmount"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/post-template-2/"><img width="576" height="384" src="http://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165912.jpg" class="attachment-large wp-post-image" alt="165912"></a></div>
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/left-sidebar-post/"><img width="800" height="534" src="http://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165961.jpg" class="attachment-large wp-post-image" alt="165961"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="http://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-4 large-4 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="http://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>
SO网友:birgire
这里有一个替代建议:
if( $query->have_posts() )
{
while ( $query->have_posts() )
{
$query->the_post();
// Collect all items into a temp array
$tmp[] = sprintf(
\'<a href="%s">%s</a>\',
get_permalink(),
get_the_post_thumbnail( get_the_ID(), \'large\' )
);
}
wp_reset_postdata();
// Display rows 1-2
the_wpse_rows(
$tmp,
$from = 0,
$number = 2,
$outer_class = \'row full\',
$inner_class = \'large-6 medium-6 small-12 columns\'
);
// Display rows 3-5
the_wpse_rows(
$tmp,
$from = 2,
$number = 3,
$outer_class = \'row full\',
$inner_class = \'large-4 medium-4 small-12 columns\'
);
unset( $tmp );
}
其中,我们将助手函数定义为:
function the_wpse_rows( Array $data, $from, $number, $outer_class, $inner_class )
{
$inner_class = esc_attr( $inner_class );
$outer_class = esc_attr( $outer_class );
if( $rows = array_slice( (array) $data, $from, $number ) )
printf(
"<div class=\'{$outer_class}\'><div class=\'{$inner_class}\'>%s</div></div>",
join( "</div><div class=\'{$inner_class}\'>", $rows )
);
}
我们是否使用
array_slice()
而不是
array_chunk()
.