Créer des blocs de différentes tailles dans vos pages d'archives

Comment créer des pages d’archives originales ?

Aujourd’hui on va voir ou revoir une façon de disposer ses blocs d’articles différemment.

Dans un thème classique, toutes les vignettes d’articles sont réparties de manière équivalentes, faisant toutes la même taille et la même largeur.

Le schéma

Voici ce à quoi on veut parvenir

Le schéma a été fait rapidement, mais en gros on veut obtenir une première vignette qui s’étend sur 12 colonnes, puis 6, puis 4.

Je donne d’autres exemples d’affichages originaux dans des précédents articles, ici, là, ou encore ici.

Le code

Ici, je n’utilise pas bootstrap, mais une grille flexbox équivalente. Vous pouvez la retrouver ici.

<?php
				$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
				$args = array(
				    'post_type' => 'post',
				    'post_status' => 'publish',
				    'posts_per_page' => 5,
				    'paged' => $paged
				   
				);
				$query = new WP_Query( $args ); ?>
				<?php 
				if ( $query->have_posts() ) :
				$count = (int)0;?>
				  	<div id="cc_posts_wrap" class="flex-row">
						<?php
						while ( $query->have_posts() ) : $count++;
							$query->the_post();
							if($count == 1){
								$span = 'flex-col-xs-12';
								
								
								
							}
							if($count == 2 || $count == 3){
						   	$span = 'flex-col-sm-6';
						   	
							}
							if($count > 3){
						   	$span = 'flex-col-sm-4';
						   	
							}
							//If its not 3 or higher, increase the count
							$termsArray = get_the_terms($post->ID, "category");  //Get the terms for this particular item
							 $termsString =""; //initialize the string that will contain the terms
							 foreach ( $termsArray as $term ) { // for each term 
							 $termsString .= $term->slug;  
							 }
						?>
								 <div  class="<?php echo $termsString  .' ' . $span ;?> item">
									<article  id="post-<?php the_ID(); ?>" <?php post_class();?>>
										<div class="post-featured-thumbnail">
											<?php 	
												if ( has_post_thumbnail() ) { 
													if($count == 1){
											 		the_post_thumbnail('blog_featured');										
												}else{
											 		the_post_thumbnail();
											 	}
											}
											 
											 if ( 'post' === get_post_type() ) :
												?>
												<div class="entry-meta">
													<?php
													numgrade_category_sticker(); 	
													?>
												</div><!-- .entry-meta -->

											<?php endif; ?>
										</div>

										<div class="post-content">
											<header class="entry-header">
												<?php
												if ( is_singular() ) :
													the_title( '<h1 class="entry-title">', '</h1>' );
												else :
													the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
												endif;
												?>
											</header><!-- .entry-header -->
											<div class="entry-content">
												<?php the_excerpt(); ?>
											</div><!-- .entry-content -->
											<?php 
											if($count == 1){ ?>
												<div class="isotope-cta">
													<a href="<?php esc_url( the_permalink() );?>" rel="bookmark">Lire</a>
												</div>
											<?php } ?>
										</div>
										<?php if($count != 1){ ?>
										<div class="isotope-cta">
											<a href="<?php esc_url( the_permalink() );?>" rel="bookmark">Lire</a>
										</div>
										<?php } ?>
									</article><!-- #post-<?php the_ID(); ?> -->
								</div>


				<?php		endwhile;
				?>	
				</div> <!-- end isotope-list -->

L’idée pour ce genre de cas est toujours la même. On crée notre boucle, et à l’intérieur, on crée un compteur qu’on va incrémenter. Dans ce cas particulier, on place nos différentes tailles de colonnes dans une variable, et on dit : »si c’est le premier article, entoure mon article d’une classe « flex-col-sm-12 » (12 colonnes), Si ce sont les deuxième et troisième article, entour les d’une classe « flex-col-sm-6 ». Puis, pour toutes les autres, attribue leur une classe « flex-col-sm-4 » pour créer 3 colonnes.

A vous ensuite de styliser le tout pour un rendu optimal, comme ici.

15/04/2020 Mis à jour le 12/04/2020 Par Copier coller | Dans wordpress