Créer automatiquement des lignes après les colonnes X WordPress

Question

Je crée la page "articles" sur mon site avec WordPress et Bootstrap. Je cherche ça: tous les 3 articles (colonnes), une nouvelle "rangée" sépare tout. Cela ferait une ligne, l'article 1, article 2, article 3, à la fin de la ligne, nouvelle ligne, l'article 4, l'article 5 ...

Mon thème est un thème de démarrage pour WordPress: Souligner

Voici mon code pour générer des résumés d'articles (sur le fichier content.php):

Cela fonctionne parfaitement mais le contenu est généré sans fin (boucle infinie).

Here the result on browser

<div class="row"> 
    <?php $i = 1; while(have_posts()) : the_post();?> 
     <div class="col-sm-4 blog-resume"> 
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
       <header> 
        <a href="<?php echo get_permalink() ?>"> 
         <div class="featured-image-blog" style="background-image: url('<?php echo get_the_post_thumbnail_url() ?>')"></div> 
        </a> 
       </header> 
       <div class="article-resume text-center"> 
        <h2><a href="<?php echo get_permalink() ?>"><?php echo get_the_title() ?></a></h2> 
        <p class="posted-on">Posté le <?php echo the_date() ?></p> 
        <p class="resume-article"><?php echo the_content() ?></p> 
       </div> 
      </article> 
     </div> 
     <?php if ($i % 3 === 0) { echo '</div><div class="row">'; } ?> 
     <?php $i++; endwhile; wp_reset_query(); ?> 
</div> 

Je pense qu'il est le fichier index.php où appel content.php ìl, ici le contenu de index.php:

<div class="blog-part"> 
    <div class="container"> 
     <?php 
     if (have_posts()) : 

      if (is_home() && ! is_front_page()) : ?> 
      <header> 
       <h1 class="text-center"><?php single_post_title(); ?></h1> 
      </header> 

      <?php 
     endif; 

     /* Start the Loop */ 
     while (have_posts()) : the_post(); 

     /* 
     * Include the Post-Format-specific template for the content. 
     * If you want to override this in a child theme, then include a file 
     * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
     */ 
     get_template_part('template-parts/content', get_post_format()); 

    endwhile; 

    the_posts_navigation(); 

    else : 

     get_template_part('template-parts/content', 'none'); 

    endif; ?> 

</div><!-- container --> 
</div><!-- blog-part --> 

<?php 
get_sidebar(); 
get_footer(); 

Voici le CSS de .blog-CV

.blog-resume { 
     margin-bottom: 20px; 
     margin-top: 20px; 
    } 

    .blog-resume > article { 
     background: #fff; 
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); 
     -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); 
    } 

Answer 1

Si vous allez toujours démarrer et arrêter de nouvelles lignes avec des groupes de 3 colonnes simplement tester l'index (ou un compteur) dans votre boucle d'articles avec l'opérateur phps modulo pour déterminer si elle est divisible par 3.

<?php if($i % 3 == 0) { 
    // do something here like start and stop new rows 
} ?> 

Dans l'exemple ci-dessus, je voudrais $ le nombre (à partir de 1 pas 0) de l'index actuel dans votre boucle. Donc, si vous affichez votre 3e, 6e, 9e, etc. article, vous pouvez ensuite ajouter le code pour ouvrir et fermer de nouvelles lignes.

Cependant, vous ne devriez pas vraiment besoin de faire cela. Les colonnes Bootstrap doivent être autorisées à être renvoyées. En isolant vos colonnes pour qu'elles aient toujours 3 lignes par ligne, l'élément responsive fourni par bootstrap est tué.

Pour en savoir plus: http://php.net/manual/en/language.operators.arithmetic.php

Answer 2

Vous utilisez déjà le bootstrap col-xx-x les classes alors laissez-les faire le travail pour vous!

Vous utilisez col-sm-4 dans votre code, alors sortez votre boucle.

Voici ce que votre code devrait ressembler à:

index.php - c'est là votre boucle est, il faut donc ajouter la classe externe (à savoir row) en dehors de votre boucle while.

if (have_posts()) : 

[... your header code here...] 

<div class="row"> <?php /* ADD YOUR ROW CLASS HERE!! */ ?> 

    <?php 
    /* Start the Loop */ 
    while (have_posts()) : the_post();  
     get_template_part('template-parts/content', get_post_format()); 
    endwhile; 
    ?> 

</div> <?php /* END ROW CLASS */ 

[...post navigation, etc here... ] 

endif; ?> 

content.php - faire à nouveau pas en boucle ici!afficher uniquement le contenu du poste actuel

<div class="col-sm-4 blog-resume"> 
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
     <header> 
      <a href="<?php echo get_permalink() ?>"> 
       <div class="featured-image-blog" style="background-image: url('<?php echo get_the_post_thumbnail_url() ?>')"></div> 
      </a> 
     </header> 
     <div class="article-resume text-center"> 
      <h2><a href="<?php echo get_permalink() ?>"><?php echo get_the_title() ?></a></h2> 
      <p class="posted-on">Posté le <?php echo the_date() ?></p> 
      <p class="resume-article"><?php echo the_content() ?></p> 
     </div> 
    </article> 
</div> 

Mise à jour:

Pour la question que vous avez avec un article sur sa propre ligne:

Bootstrap utilise float pour aligner les éléments, et ce qui se passe est que votre 2ème article est plus long que le 3ème, et le 4ème article est "attrapé" par lui quand il essaye de flotter complètement vers la gauche. Je n'utilise pas Bootstrap, donc je pensais que quelque chose interférait avec vos classes Bootstrap, mais il s'avère que c'est comme ça que fonctionne Bootstrap. J'ai supposé qu'il traiterait correctement les nouvelles lignes ... apparemment pas!

Ce que vous devez faire est d'ajouter un clear au premier élément de chaque rangée afin qu'il ne soit bloqué par aucun de la rangée précédente.

Ajouter ce qui suit à votre CSS (assurez-vous d'inclure après Bootstrap de css)

CSS

@media (min-width:768px) and (max-width: 991px) { 
    .row > div:nth-child(2n+3) { 
    clear: left; 
    } 
} 
@media (min-width: 992px) and (max-width: 1199px) { 
    .row > div:nth-child(3n+4) { 
    clear: left; 
    } 
} 
@media (min-width: 1200px) { 
    .row > div:nth-child(4n+5) { 
    clear: left; 
    } 
} 

Je pense que le nom de la classe row est ce qui est vous confus .. Il peut sembler que vous devez mettre tous les 3 articles dans leur propre row, mais en fait la classe row agit ici comme un conteneur. Bootstrap affichera automatiquement tous les articles qui se trouvent dans ce conteneur sous forme de lignes avec le nombre d'articles approprié dans chacune d'entre elles, en fonction de la taille col que vous avez choisie. L'avantage de ceci est que vous pouvez spécifier quelque chose comme class="col-sm-4 col-lg-3", ce qui signifie que Bootstrap mettra automatiquement 4 articles d'affilée sur les grands écrans et seulement 3 sur les plus petits écrans.