WordPressで複数の列に内容を投稿する

Question

Wordpressの投稿を1つではなく2つの列に表示したいとします。

私はブートストラップと高度なカスタムフィールドを使用しています。私が働いているが、投稿はcol-lg-5部門の両方で繰り返されている。

<div class="container"> 
    <?php // Display blog posts on any page @ https://m0n.co/l 
    $temp = $wp_query; $wp_quersy= null; 
    $wp_query = new WP_Query(); $wp_query->query('posts_per_page=-1' . '&paged='.$paged); 
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 


     <div class="row"> 
      <div class="col-lg-2"> 
       <?php the_category(', '); ?> 
      </div> 

      <div class="col-lg-5 left"> 
       <?php the_post_thumbnail(); ?> 
      <p><?php the_title(); ?></p> 
      </div> 

      <div class="col-lg-5"> 
       <?php the_post_thumbnail(); ?> 
      <p><?php the_title(); ?></p> 
      </div> 
     </div> 


    <?php endwhile; ?> 

    <?php if ($paged > 1) { ?> 

    <?php } else { ?> 

    <?php } ?> 

    <?php wp_reset_postdata(); ?> 
    </div> 

Answer 1

あなたがする必要があるのは、CSSの列を使用することです。

PHPファイルの追加列を削除します。

次のCSS

.container { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-gap: 20px; 
    column-gap: 20px; 
} 

.col-lg-5 { 
    padding-bottom: 20px; 
    width: auto; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    -moz-page-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid-column; 
} 

Answer 2

あなたは次のことを試すことができます適用します。もちろん

<div class="container"> 
    <div class="row"> 
    <?php // Display blog posts on any page @ https://m0n.co/l 
    $temp = $wp_query; $wp_quersy= null; 
    $wp_query = new WP_Query(); $wp_query->query('posts_per_page=-1' . '&paged='.$paged); 
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 



     <div class="col-lg-2"> 
      <?php the_category(', '); ?> 
     </div> 

     <div class="col-lg-5"> 
      <?php the_post_thumbnail(); ?> 
     <p><?php the_title(); ?></p> 
     </div> 



    <?php endwhile; ?> 
    </div> 
<?php if ($paged > 1) { ?> 

<?php } else { ?> 

<?php } ?> 

<?php wp_reset_postdata(); ?> 
</div>