Post Wordpress in visualizzazione griglia con colonne Bootstrap 3

Question

Sto cercando di ottenere una visualizzazione griglia 3x3 di tutti i post WordPress nella pagina "blog" (index.php). Sto costruendo il sito basato su Bootstrap 3. Quindi il ciclo deve creare le colonne e le righe con PHP.

Mi piacerebbe averlo impostato in righe, in modo che eventuali differenze di altezza vengano ripristinate su ogni riga. La griglia di bootstrap sarebbe simile a questa:

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

Mancando le competenze PHP per la creazione di loop correttamente, ho provato l'hacking mio modo per aggirare, in arrivo con 3 volte questo (modifica gli offset):

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

Ha evidenti svantaggi:

• un sacco di richieste inutili PHP/loops
• filtraggio per categoria s, tag, ecc non funziona

Potresti aiutarmi con la creazione del ciclo PHP?

La domanda più correlata che ho trovato è this, ma il layout della colonna è in qualche modo distorto!

Grazie mille! Philipp

Answer 1

Il modo più semplice sarebbe utilizzare un contenitore e inserire tutti gli elementi contetn in esso, quindi uguagliare la loro altezza tramite js in quel modo.

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")); 
}); 

Se questo è alcuna opzione, si potrebbe fare qc. così:

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

Ogni tre oggetti postali devono essere contenuti all'interno di una riga. Così sarà come <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> Se volete fare questo in php, e ancora mantenere la corretta 'rowage' il codice potrebbe sembrare qualcosa di simile: `

<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

Ecco una soluzione per i 3 colonne

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>