X列の後に自動的に行を作成するWordPress

Question

WordPressとBootstrapで自分のサイトに「articles」というページを作成します。私はそれを探しています：すべて3つの記事（列）、新しい "行"はすべてを分離します。ここで

アンダースコアは次のようになります。これが私のテーマはWordPress用スターターのテーマである行、記事1、記事2、記事3、行、新しい行、第4条、第5条の終わり...

になるだろう

これは完全に動作しますが、コンテンツは無限ループ（無限ループ）で生成されます。

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> 

は、私はそれはindex.phpのファイルだと思うところcontent.phpのIL呼び出し、ここの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(); 

.blog再開

のCSS

.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

3列のグループで新しい行を開始したり停止したりする場合は$私は次のようになり、上記の例では3

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

によってそれが割り切れるかどうかを決定するためにPHPSのモジュロ演算子を持つ記事のループ内での（1ない0から始まる）番号をインデックス（またはカウンタ）をテストループ内の現在のインデックスしたがって、3番目、6番目、9番目などの記事を表示している場合は、コードを追加して新しい行を開いたり閉じることができます。

ただし、これを行う必要はありません。ブートストラップ列はラップすることが許されます。あなたの列をコード化すると、常に3行の種類があり、ブートストラップが提供する応答性の高い要素が殺されます。

さらに読書：http://php.net/manual/en/language.operators.arithmetic.php

Answer 2

あなたはまだ彼らはあなたのために懸命に仕事をさせブートストラップcol-xx-xクラスを使用します！

コードでcol-sm-4を使用しているので、ループを取り除くだけです。ここで

はあなたのコードがどのように見えるかです：

のindex.php - これはあなたのループがどこにあるかであるので、あなたのwhileループの外に外部クラス（すなわちrow）を追加します。

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 - ここで再びないループを行います！唯一の現在のポストの内容を表示

<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> 

更新：あなたは独自の行に1件の記事で抱えている問題については

：

ブートストラップは、要素を並べるためにfloatを使用して、何が起こっているのは、2番目の記事が3番目の記事よりも長く、4番目の記事が左にずっと浮かんでいるときに、その記事が「キャッチ」しているということです。

私はブートストラップを使用しないので、あなたのブートストラップクラスに干渉していると思っていましたが、それは実際にブートストラップの仕組みです。私はそれが新しい行を正しく処理すると思った...明らかにそうではない！

あなたがする必要があるのは、各行の最初の要素にclearを追加して、前の行のいずれかでブロックされないようにすることです。

があなたのCSSに以下を追加します。私は rowクラスの名前はあなたいただきまし混乱だと思う

@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; 
    } 
} 

CSS

（ブートストラップのCSSの後にそれを含めるようにしてください）。.. 3つの記事をすべて自分のrowに入れる必要があるように聞こえるかもしれませんが、実際にはrowクラスはコンテナのように機能します。ブートストラップは、あなたが選択したクラスのサイズに応じて、そのコンテナ内にあるすべての記事を、適切な数の記事を含む行として自動的に表示します。

class="col-sm-4 col-lg-3"のようなものを指定することができます。つまり、ブートストラップは4つの記事を大きな画面で1行に、小さな画面では3つだけ自動的に配置します。