数组块和在WP_QUERY中插入变化的HTML

时间:2016-02-02 作者:C. Ruben

我正试图从我的博客中输出最新的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>

2 个回复
SO网友:cjbj

这是一个非常复杂的方法。为什么不简单地添加一个计数器?像这样:

$i=1;
echo \'<div class="row full">\';
if( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        if ($i < 3)
          $class = "large-6 medium-6 small-12 columns"
        else
          "large-4 medium-4 small-12 columns";
        echo \'<div class="\' . $class . \'">\'
        ... output your post ...
        echo \'</div>\'
        if ($i=2) echo \'</div><div class="row full">\';
        $i = $i+1;
        }
    }
echo \'</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().