Wordpress Loop posts in Bootstrap 3グリッドレイアウト

Question

Wordpess内でBootstrap 3を使用していて、アーカイブの投稿をページ全体にグリッド形式で表示する際に問題があります。私のワードプレスのループコードは...

<?php if (have_posts()) : ?> 

<?php 
$args=array(
'post_type' => 'artist', 
'post_status' => 'publish', 
'posts_per_page' => -1, 
'caller_get_posts'=> 1 
); 
$my_query = null; 
$my_query = new WP_Query($args); 
if($my_query->have_posts()) { 
echo ''; 
while ($my_query->have_posts()) : $my_query->the_post(); ?> 
<li> 
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /> 
</li> 

<?php endwhile; 
} 
wp_reset_query(); 
?> 

<?php while (have_posts()) : the_post(); ?> 
<?php endwhile; ?> 
<?php else : ?> 
<?php endif; ?> 

これは、投稿の画像を含むリストを表示します。今すぐ、ページの下に1つずつリストします。

どのように私は

<div class="row"> 

<div class="col-md-3"> 
<li>image 1 goes here</li> 
</div> 

<div class="col-md-3"> 
<li>image 2 goes here</li> 
</div> 

<div class="col-md-3"> 
<li>image 3 goes here</li> 
</div> 

<div class="col-md-3"> 
<li>image 4 goes here</li> 
</div> 

</div> 

等...このようなことの下の行に、次の4、の下の行に、次の4、彼らはページ全体で4を示す私のブートストラップグリッドを使用するようになるだろうそれは可能ですか？基本的に私は、Wordpressのループには、ページの下のHTMLリストの中の1つの代わりに、ページの向こう側にあるすべての投稿4をリストすることが必要です。

Answer 1

はい、できます。

<?php 
    $args=array(
    'post_type' => 'artist', 
    'post_status' => 'publish', 
    'posts_per_page' => -1, 
    'caller_get_posts'=> 1 
    ); 
    $my_query = null; 
    $my_query = new WP_Query($args); 
if($my_query->have_posts()) { 
    echo ''; 
$i = 0; 
while ($my_query->have_posts()) : $my_query->the_post(); 
    if($i % 4 == 0) { ?> 
     <div class="row"> 
    <?php 
    } 
    ?> 
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p> 
    <p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p> 
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p> 

    <?php  
    if($i % 4 == 0) { ?> 
     </div> 
    <?php 
    } 

    $i++; 
endwhile; 
} 
wp_reset_query(); 
?> 

Answer 2

THIS COMPLETE CODEをジェルマンのおかげで私の質問に答え....

<?php 
$args=array(
'post_type' => 'artist', 
'post_status' => 'publish', 
'posts_per_page' => -1, 
'caller_get_posts'=> 1 
); 
$my_query = null; 
$my_query = new WP_Query($args); 
if($my_query->have_posts()) { 
echo ''; 
$i = 0; 
while ($my_query->have_posts()) : $my_query->the_post(); 
if($i % 4 == 0) { ?> 
<div class="row"> 
<?php 
} 
?> 
<div class="col-md-4"> 
<div class="artist-thumbnail"> 
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p> 
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p> 
</div> 
</div> 
<?php  
if($i % 4 == 0) { ?> 

<?php 
} 

$i++; 
endwhile; 
} 
wp_reset_query(); 
?> 
</div> 

Answer 3

// Opening container or wrap outside of the loop 
<div class="container my-container"> 
// start the loop 
<?php 
    $args=array(
    'post_type' => 'post', 
    'post_status' => 'publish', 
    'posts_per_page' => 18 
    ); 

    $my_query = null; 
    $my_query = new WP_Query($args); 

    if($my_query->have_posts()) { 

    $i = 0; 
    while ($my_query->have_posts()) : $my_query->the_post(); 
    // modified to work with 3 columns 
    // output an open <div> 
    if($i % 3 == 0) { ?> 

    <div class="row"> 

    <?php 
    } 
    ?> 

    <div class="col-md-4"> 
     <div class="my-inner"> 
     // all your content, title, meta fields etc go here. 
     </div> 
    </div> 
// increment the loop BEFORE we test the variable 
     <?php $i++; 
     if($i != 0 && $i % 3 == 0) { ?> 
     </div><!--/.row--> 
     <div class="clearfix"></div> 

     <?php 
     } ?> 

     <?php 
     endwhile; 
     } 
     wp_reset_query(); 
     ?> 

</div><!--/.container--> 

Answer 4

私は、これらのオプションのいずれかが完全に動作すると思ういけません。彼らは、要素/投稿の数が正確に列番号で割り切れると仮定しています。 2 = 5いい閉じ行

が、3 = 3いい行と最終DIVによって閉じられていない一つの列で割っ

10ポストによってdiveded

10投稿：例えば。

私の解決策は、ループの後にカウンタをチェックすることでした。無視できない場合は無視し、そうでなければ終了divを追加しました。

私はあなたのすべてがあなたのソリューションのすべてのものは非常にmuch.The主な問題は、あなたが行の要素の数と同じ数を持っていない場合は、最後の行を閉じていないことである複雑していると思います

<?php $i = 0; //keep track of the row div ?> 

<?php foreach ($array_object as $key => $value) : ?> 

    <?php if($i % 2 == 0) : ?> 
     <div class="row"> 
    <?php endif; ?> 

     <div class="col-md-6"> 

       Some content in the div 

     </div> 

     <?php $i++; ?> 

     <?php if($i != 0 && $i % 2 == 0) : ?> 
      </div><!--/.row--> 
     <?php endif; ?> 

    <?php endforeach; ?> 

    <?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?> 
     </div><!--/.row--> 
    <?php endif; ?> 

Answer 5

、あなたは本当の混乱を取得...

Open row 
Run loop 
If it is the last element in row close row, and open another one 
Close the final row 

そして、ここでは一例である（あなたに似てますが、複雑なものなし、および調節可能）なら、私は一つだけで私の解決策を説明しましょうループ（私はどのWP_Queryを表示するのか分からないし、どうやって得たの？ Rの記事）あなたは$columns_num = 4の値を変更することができます

$columns_num = 4; // The number of columns we want to display our posts 
$i = 0; //Counter for .row divs 

echo '<div class="row">'; 

    /* Start the Loop */ 
    while (have_posts()) : the_post(); 

     echo '<div class="single-product-archive col-md-' . 12/$columns_num . '">' 
      get_template_part('template-parts/content', get_post_format()); 
     echo '</div>'; 

     if($i % $columns_num == $columns_num - 1) { 
      echo '</div> <div class="row">'; 
     } 

     $i++; 

    endwhile; 

echo '</div>'; 

注意。カスタマイザから選択ボックスを作成し、必要な行あたりの列数を選択するだけでも可能です。もちろん、値は休憩なしに番号12（ブートストラップ列）を分割する必要があります。だから1、2、3、4と6だけが受け入れられます。

Answer 6

これらのソリューションはうまくいきますが、ブートストラップの列をオーバーライドするメディアコールを追加しないと応答しません。画面サイズに関係なく常に行ごとに同じ数のポストを出力します。

ブートストラップの列幅、浮動小数点数、およびクリアフィックスを使用する3列のグリッド表示が必要でした。浮動小数点の高さが異なる場合に発生する非一様なずれを避けるために、すべてのポストは同じ高さでなければなりません。

私はもともとブートストラップの.row-eq-heightでこれをやろうとしていましたが、列サイズに関係なく、同じ行のすべての列を表示するflexboxを使用しています。

この人のjQueryのソリューションは、私の問題を解決し... Same height column bootstrap 3 row responsive

// Add this javascript to header.php(or equivalent file)... 

jQuery(document).ready(function() { 
    var heights = jQuery(".col-eq-height").map(function() { 
     return jQuery(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights);  
    jQuery(".col-eq-height").height(maxHeight); 
}); 

...そして、あなたの定義されたブートストラップの列に.COL-EQ-高さクラスを追加...

<?php 
    $args = array(); 
    $query = new WP_Query($args); 

    while($query->have_posts()) : $query->the_post(); ?> 

     <div class="col-eq-height col-md-4">      
     <?php // Content goes here... ?> 
     </div><!-- /.col-md-4 --> 

    <?php endwhile; 
    wp_reset_postdata(); 
    ?> 

あなたが投稿した3列のスタック可能なブートストラップグリッドが反応します。 トピックにあり、誰かを助けてくれることを願っています。