Alterner l'affichage de ses articles wordpress avec bootstrap

Comment alterner l’affichage de ses articles en utilisant bootstrap

Dans un précédent tuto, nous avions vu rapidement comment alterner l’affichage de ses articles dans une page d’archive ou de catégorie. Le but était dans une liste de placer les images un coup à gauche, un coup à droite. Comme ceci :

Aujourd’hui, on va voir la même chose, mais en utilisant bootstrap. La technique précédente qui consistait simplement à utiliser un float; left ou float:right ne fonctionne plus vraiment en l’état : les propriétés css de bootstrap et certains attributs contenant déjà des éléments en float, ou en flex, compliquent la donne. Il y a des problèmes au redimensionnement de l »écran. L’image étant responsive, elle diminue en taille à mesure qu’on rapetisse l’écran et le layout est cassé.

Le code Php

J’affiche en premier lieu le code php, ma page d’archive ou de catégorie, dans laquelle je vais ramener des sous catégories avec leur image à la une (créée grâce à un custom field d’ACF) , le titre et la description. Les commentaires dans le code expliquent chaque étape :


<section class="no-padding">
<!--CATEGORIE PARENTE :  ici je ramène l'image à la une de la catégorie parente, et son titre. -->
    <?php 
    $post_id = 0;
    $queried_object = get_queried_object();
    if (isset($queried_object->term_id)) {
      $post_id = $queried_object->taxonomy.'_'.$queried_object->term_id;
    } ?>
	    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
		    <div class="home_image jumbotron d-flex align-items-center justify-content-center" style="background-image:url(<?php the_field('categimg', $post_id); ?>); ">
		        <div class="section-overlay"><!-- overlay --></div>
		        <meta itemprop="url" content="<?php echo $categimg ?>">
		        <div class="inner-home">
	                <h1 class="page-title display-2 entry-title" itemprop="headline"><?php  single_cat_title();?></h1>
		        
		    	</div>
		    </div>
	    </span>
</section>

		
<!--  ici je ramène la description de la catégorie parente  -->
	<section id="categposts">
		<div class="container-fluid">
			<div class="row ">
				<div class="col-xs-12">		
					<header class="page-header">
						<div class="category_description">
							<?php echo category_description(); ?>
						</div>
					</header><!-- .page-header -->
				</div>
			</div>
<!--CATEGORIE ENFANT :  au sein de cette catégorie parente, je ramène les sous catégories avec un get_categories()-->
			<?php
		
			$cat = get_query_var('cat');
			$args = array(
				'child_of' => $cat,
				'orderby' => 'name',
				'order' => 'ASC'
				);
			$categories = get_categories($args);
				foreach($categories as $category) {

				?>
<!--  au sein de mon container, je crée une row composée de 2 blocs.J'encapsule ces deux blocs dans un modulo qui va attribuer une classe paire impaire à chaque itération d'articles  -->
			<div class="row"> 
				<div class='<?php echo ( ++$j % 2 == 0) ? 'evenpost' : 'oddpost'; ?>'>
					<div class="col-lg-6 col-sm-12 archive-img">
						<a rel="bookmark"  href="<?php echo get_category_link( $category->term_id );?>" itemprop="url">	
							<div class="card-image ">
<!--  l'image à la une d'ACF ramenée grâce à la fonction classique the_field()  -->							
								<img src="<?php the_field('categimg',  $category ); ?>" alt="<?php  $category->name ;?>">
							</div>
						</a>
					</div>
					<div class="col-lg-6 col-sm-12 archive-bloc">
						<div class="categ-overlay">	
							<h3 class="entry-title" itemprop="headline">
								<?php echo  $category->name ;?>
							</h3>
							<div class="categ__description">
								<?php echo  $category->description ;?>
							</div>
						</div>	
					</div>	
			 	</div> 
			</div>

		<?php } ;?>
		</div>
	</div>
</section>

Le code CSS

Au niveau de mon css, voici le code : ici encore je commente le code pour une meilleure compréhension.

/*en version desktop, j'annule le float pour que les images n'englobent pas le texte et que les blocs s'aglignent bien les uns en dessous des autres*/
.oddpost .archive-img, .archive-bloc{float:none !important; }
.evenpost .archive-img, .archive-bloc{float:none !important; }


@media screen and (min-width:992px){

/* les deux blocs sont en display:flex. sur le bloc image, le flex-start permet d'annuler l'étirement de l'image*/ 
.card-image{display:flex; align-items: flex-start;}
.card-image img{ object-fit: cover; min-height: 635px;}
/* le align-item et justify-content me permet de centrer verticalement le contenu */
.archive-bloc {display: flex;align-items: center;justify-content: center;}
/* mes deux classes oddpost et evenpost générées par le php auxquelles j'applique un float et une min-width de 100% */
.oddpost .archive-img, .archive-bloc{float:left !important; padding:0 !important; min-height:100%;}
.evenpost .archive-img, .archive-bloc{float:right !important; padding:0 !important;min-height:100%;}
.categ-overlay{padding: 20px;	}
}

Alterner ses posts sans ACF

Pour reproduire l’alternance d ‘affichage des images à la une (un coup à gauche, un coup à droite) sur une page catégorie, et sans utiliser ACF, on peut partir sur le code suivant


$args( 'post_type' => 'post', 'posts_per_page' => 5 ); 

//initialiser le compteur
$counter = 0;


$query = new WP_Query( $args );

if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); $counter++; //on incrémente ici le compteur

    
    if( $counter % 2 == 0 ) : //pour tous les pairs (2,4,6,etc)...

       	votre image

		vos titres, extraits, liens etc

    else: //sinon pour tous les autres

		vos titres, extraits, liens etc
		votre image

    endif;

endwhile; 
wp_reset_postdata(); 
endif;

Après libre à chacun d’utiliser un système de grille comme bootstrap pour place d’abord l’image à gauche et ensuite à droite, toujours en utilisant un système de modulo ou compteur.

23/12/2018 Mis à jour le 11/06/2020 Par Copier coller | Dans wordpress