Wordpress posty w widoku siatki z Bootstrap 3 kolumny

Question

Próbuję uzyskać widok siatki 3x3 wszystkich postów WordPress na stronie "blog" (index.php). Buduję witrynę na podstawie Bootstrap 3. Dlatego pętla musi tworzyć kolumny i wiersze z PHP.

Chciałbym ustawić go w rzędach, aby potencjalne różnice wysokości były resetowane w każdym rzędzie. Siatka bootstrap będzie wyglądać następująco:

<div class="row"> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
</div> 

<div class="row"> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
</div> 

<div class="row"> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
    <div class="col-sm-4">content</div> 
</div> 

brakuje umiejętności PHP do utworzenia pętli prawidłowo, próbowałem hacking moją drogę, wymyślanie 3 razy ten (modyfikujących przesunięcia):

<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?> 
<div class="row"> 
    <div class="col-sm-4 blog-post thumb"> 
    <?php get_template_part('templates/content', get_post_format()); ?> 
    </div> 
<?php endwhile; ?> 

<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?> 
    <div class="col-sm-4 blog-post thumb"> 
    <?php get_template_part('templates/content', get_post_format()); ?> 
    </div> 
<?php endwhile; ?> 

<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?> 
    <div class="col-sm-4 blog-post thumb"> 
    <?php get_template_part('templates/content', get_post_format()); ?> 
    </div> 
</div> 
<?php endwhile; ?> 

To ma oczywiste wady:

• dużo wniosków niepotrzebny PHP/okrążenia
• filtrowanie przez categorie s, tagi itp. nie działa

Czy możesz mi pomóc w tworzeniu pętli PHP?

Najbardziej powiązane pytanie, które znalazłem, to this, ale układ kolumn jest jakoś przekrzywiony!

Wielkie dzięki! Philipp

Answer 1

Najprostszym rozwiązaniem byłoby użycie jednego kontenera i umieszczenie w nim wszystkich elementów, a następnie wyrównanie ich wysokości za pomocą takiego js.

PHP

<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?> 
    <div class="col-sm-4 blog-post thumb"> 
     <?php get_template_part('templates/content', get_post_format()); ?> 
    </div> 
<?php endwhile?> 

JS:

function equalHeight(group) {  
    tallest = 0;  
    group.each(function() {  
     thisHeight = $(this).height();  
     if(thisHeight > tallest) {   
      tallest = thisHeight;  
     }  
    });  
    group.each(function() { $(this).height(tallest); }); 
} 

$(document).ready(function() { 
    equalHeight($(".thumb")); 
}); 

Jeśli ów nie ma opcji, można zrobić czegoś. tak:

PHP

<div class="row"> 
    <?php 
     $count=0; 
     query_posts('posts_per_page=9'); 
     while (have_posts()) : the_post(); 
    ?> 
    <div class="col-sm-4 blog-post thumb"> 
     <?php get_template_part('templates/content', get_post_format()); ?> 
    </div> 
    <?php 
     $count++; 
     if($count == 3 || $count == 6) echo '</div><div class="row">'; 
     endwhile; 
    ?> 
</div> 

Answer 2

Co trzy obiektów pocztowych musi być zawarta w jednym rzędzie. Tak będzie jak <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> Jeśli chcesz to zrobić w php, i nadal utrzymać właściwą „rowage” Twój kod mógłby wyglądać tak: `

<div class="container"> 
    <?php 
$countturtle = 0 ; 
$countbang = 0 ; 
$count_posts = wp_count_posts('portobello')->publish; 
$args = array('post_type' => 'portobello', 'posts_per_page' => 32); 
$loop = new WP_Query($args); 
while ($loop->have_posts()) : $loop->the_post(); ?> 
<?php $countbang++ ?> 

<?php if ($countbang >= 2) { 
    $countturtle = $countturtle + 1 ; } ?> 
<?php if ($countbang == 1) { 
echo '<div class="row first-training">'; } elseif (($countturtle % 3) == 0) { 
    echo '<div class="row">'; } ; ?> 

<div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" > 
    <header class="entry-header training-header">  
     <h1 class="entry-title train"> 
      <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> 
     </h1> 
    </header><!-- .entry-header --> 

     <div class="entry-imogin"> 

    <a href="<?php the_permalink(); ?>" rel="bookmark"> ddd</a> 

     </div><!-- .entry-imogin --> 

</div><!-- #post --> 
<?php if ($countbang % 3 == 0) { 
echo '</div>'; } 
      elseif ($countposts == $countbang) { echo '</div>';} ; ?> 
      <?php endwhile; ?> 
</div> 

Answer 3

Tu rozwiązanie dla 3 kolumny

layout:

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
...

<div class="row"> 
    <div class="col-sm-4"> 
     <?php $i = 1 ?> 
     <?php $posts = get_posts(array(
      'post_type' => 'news', 
      'posts_per_page' => -1 
     )); 
     foreach ($posts as $post) : start_wp(); ?> 
     <?php if ($i == 1): ?> 
      <h2><?php the_title(); ?></h2> 
     <?php endif; ?> 
     <?php if($i == 3){$i = 1;} else {$i++;} ?> 
     <?php endforeach; ?> 
    </div> 

    <div class="col-sm-4"> 
     <?php $i = 1 ?> 
     <?php $posts = get_posts(array(
      'post_type' => 'news', 
      'posts_per_page' => -1 
     )); 
     foreach ($posts as $post) : start_wp(); ?> 
     <?php if ($i == 2): ?> 
      <h2><?php the_title(); ?></h2> 
     <?php endif; ?> 
     <?php if($i == 3){$i = 1;} else {$i++;} ?> 
     <?php endforeach; ?> 
    </div> 

    <div class="col-sm-4"> 
     <?php $i = 1 ?> 
     <?php $posts = get_posts(array(
      'post_type' => 'news', 
      'posts_per_page' => -1 
     )); 
     foreach ($posts as $post) : start_wp(); ?> 
     <?php if ($i == 3): ?> 
      <h2><?php the_title(); ?></h2> 
     <?php endif; ?> 
     <?php if($i == 3){$i = 1;} else {$i++;} ?> 
     <?php endforeach; ?> 
    </div> 
</div>