X 열 뒤에 자동으로 행 만들기 WordPress

Question

WordPress 및 부트 스트랩으로 내 사이트에 "articles"페이지를 만듭니다. 나는 그것을 찾고있다 : 모든 3 개의 기사 (란), 새로운 "줄"는 모두를 분리한다. 이 행, 제 1 조, 제 2 조, 제 3 조, 행, 새 행, 제 4, 제 5의 끝 ...

내 테마 워드 프레스를위한 스타터 테마를 만들 것 : 여기

은 밑줄 기사 요약을 생성하는 내 코드 (content.php 파일) :

이것은 완벽하게 작동하지만 내용은 끝없이 생성됩니다 (무한 루프).

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 김정일 전화, 여기의 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 열 그룹으로 새 행을 시작하고 중지하려는 경우 $ i가 될 것 위의 예에서 3

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

로 나눌 수 있는지 결정하기 위해 PHPs의 모듈로 연산자 기사의 루프 (1없는 0에서 시작) 수를 인덱스 (또는 카운터) 테스트 루프 내의 현재의 인덱스 따라서 3 번째, 6 번째, 9 번째 등의 기사를 표시하는 경우 코드를 추가하여 새 행을 열고 닫을 수 있습니다.

그러나 실제로 그렇게 할 필요는 없습니다. 부트 스트랩 열은 감싸는 것이 허용되어야합니다. 열을 줄 당으로 묶어서 사용하면 부트 스트랩이 제공하는 응답 요소를 죽일 수 있습니다.

추가 읽기 : http://php.net/manual/en/language.operators.arithmetic.php

Answer 2

이미 col-xx-x 클래스 그래서 그들이 당신을 위해 열심히 일을 할 수 있도록 부트 스트랩을 사용!

코드에 col-sm-4을 사용하고 있으므로 루프를 제거하십시오. 당신의 while 루프 외부에서 외부 클래스 (즉 row를) 루프이 곳은, 그래서 추가 -

index.php를 : 여기

은 당신의 코드가 어떻게 보일지입니다.

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> 

업데이트 : 당신은 자신의 행에 하나 개의 기사가있는 문제에 대한

:

부트 스트랩이 요소를 줄을 float를 사용, 그리고 무슨 일이 일어나고있는 것은 2 번째 기사가 3 번째 기사보다 길고 4 번째 기사가 왼쪽으로 끝까지 플로트하려고 할 때 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 클래스는 컨테이너처럼 작동합니다. 부트 스트랩은 당신이 선택한 크기 인 col 클래스에 따라, 해당 컨테이너에있는 모든 기사를 적절한 수의 기사가있는 행으로 자동 표시합니다.

class="col-sm-4 col-lg-3"과 같은 것을 지정할 수 있습니다. 즉, 부트 스트랩은 자동으로 4 개의 기사를 큰 화면에 표시하고 3 개의 기사를 작은 화면에 표시합니다.