Différencier l'affichage des articles

Différencier l’affichage des articles dans une page d’archives

Dans ce court mémo, on va voir comment on peut parvenir à créer un affichage original de nos articles dans une page d’archive. Le but est d’arriver à quelque chose qui se rapproche du résultat suivant :

La première image dans une grande taille, puis les deux suivantes en taille moyenne.

Création de nouvelles tailles d’images dans wordpress

Pour arriver à ce résultat et le rendre dynamique via nos templates, il faut créer de préférence des tailles d’images additionnelles via le fichier functions.php.

Dans la fonction « setup » de votre thème, on place la fonction add_image_size avec nos tailles supplémentaires, par exemple:

add_image_size('postbig',674.5,678, true);
add_image_size('postmedium',674.5,339,true);

Modifier le premier élément d’une liste de 3

Pour une boucle restituant seulement trois articles, c’est assez simple. Dans la boucle, on place une condition pour que la première image soit la plus grande.

<?php
           
                $count = 0;
                $args = array('posts_per_page' => 3);
                $custom_query = new WP_Query($args);
                ?>
              
                <?php if ($custom_query->have_posts()) : ?>
                    <?php while ($custom_query->have_posts()) : $custom_query->the_post();
                    $count++;
                            ?>
                        <a  href="<?php the_permalink(); ?>" >
                            <?php     if( $count ==1 )  
                            the_post_thumbnail('postbig');
                            else 
                                 
                           the_post_thumbnail('postmedium');?>
                        </a>
                        <?php
                       
                    endwhile;
                     wp_reset_postdata();
                endif
                ?>

Modifier les troisièmes éléments d’une liste

Dans l’exemple suivant, on utiliser un compteur et le modulo pour styliser le troisième élément d’une liste. Au cas où l’on voudrait plusieurs rangées, on va pouvoir appliquer ce code.

<?php
           
      

     $count = 0;
                $args = array('post_type' => 'post');
                $custom_query = new WP_Query($args);
                ?>
                <?php if ($custom_query->have_posts()) : ?>
                    <?php while ($custom_query->have_posts()) : $custom_query->the_post();
                    $count++;
                            ?>
                            
                        <a href="<?php the_permalink(); ?>" >
                            <?php     if( $count %3 == 0 ) 
                            the_post_thumbnail('postbig');
                            else  the_post_thumbnail('postmedium');?>

                        </a>
                        <?php
                      
                    endwhile;
                     wp_reset_postdata();
                endif;
                ?>

Modifier le premier élément d’un groupe

Voici une autre façon de parvenir au même résultat : on applique ici un style particulier au premier élément d’un groupe d’éléments : ici on cherche à afficher une grande image dans chaque groupe de trois images. C’est une solution idéale si on utilise bootstrap par exemple. Chaque row va afficher un groupe de 3 images avec des tailles différentes.

  <?php
           
      
    $posts = get_posts($args='posts_per_page=-1');
foreach (array_chunk($posts, 3, true) as $array){   
    $count =0;
    echo '<div>';
    foreach($array as $post){
          $count++;
?>        <div class="article">
            <a  href="<?php the_permalink(); ?>">
                <?php  if( $count == 1)  the_post_thumbnail('postbig');
                else  the_post_thumbnail('postmedium');?>
           
            </a>
           
        </div>
  <?php 
        }
    echo '</div>';
    } ;?>

23/12/2018 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress