Wordpress Beiträge in Rasteransicht mit Bootstrap 3 Spalten

Question

Ich versuche, eine 3x3 Rasteransicht aller WordPress Beiträge auf der "Blog" -Seite (index.php) zu erreichen. Ich baue die Site basierend auf Bootstrap 3. Daher muss die Schleife die Spalten und Zeilen mit PHP erstellen.

Ich möchte es in Zeilen eingerichtet haben, so dass potenzielle Höhenunterschiede in jeder Zeile zurückgesetzt werden. Die Bootstrap-Gitter würde wie folgt aussehen:

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

die PHP-Kenntnisse Ohne für die Schleife richtig einrichten, Ich habe versucht, meinen Weg um Hacking, kommen mit 3-mal das (Modifizieren der Offsets):

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

Es hat offensichtliche Nachteile:

• eine Menge unnötiger PHP-Anfragen/
• Filterung nach Kategorie Schleifen s, Tags, etc funktioniert nicht

Können Sie mir helfen mit der Erstellung der PHP-Schleife?

Die am meisten verwandte Frage, die ich fand, ist this, aber das Spaltenlayout ist irgendwie verzerrt!

Vielen Dank! Philipp

Answer 1

Am einfachsten wäre es, einen Container zu verwenden und alle contentn Elemente darin zu setzen, dann ihre Höhe über js so zu entsprechen.

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

Wenn das ist keine Option, könnte man etw tun. dass wie:

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

Alle drei Post-Objekte müssen innerhalb einer Zeile enthalten sein. So wird es wie <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> , wenn Sie diese in PHP tun möchte, und immer noch die richtige halten ‚rowage‘ Ihr Code könnte wie folgt aussehen: `

<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

Hier ist eine Lösung für 3 Spalten

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>