web-dev-qa-db-fra.com

Morceaux de tableau et insertion de code HTML variable dans WP_Query

J'essaie de publier les 5 derniers messages de mon blog. J'aimerais que chaque miniature de message remplisse les divs dans le format suivant.

<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>

J'ai obtenu ce code d'un autre article avec quelques modifications, mais je ne touche pas à la cible.

<?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 ) ); 
     }
?>

Malheureusement, cela ne fonctionne pas correctement. Voici ce que ça donne:

<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>
wp-querytheme-development
2
C. Ruben

C'est une approche assez compliquée que vous prenez. Pourquoi ne pas simplement ajouter un compteur? Comme ça:

$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>';
1
cjbj

Voici une suggestion alternative:

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 );
}

où nous définissons notre fonction d'assistance comme:

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 ) 
        ); 
}

avons-nous utilisé array_slice() au lieu de array_chunk().

1
birgire