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 12/04/2020
Par Copier coller | Dans wordpress
