ブートストラップ付きのアーカイブページグリッドレイアウトを作成

Question

私の食品カテゴリ（カテゴリーIDは10）のすべてのアーカイブポストを持つページが必要です。私はcol-md-4を使って設定しようとしていますので、3つの投稿が1つの行に表示されます。私は私のPHPファイルに必要な要素をすべて追加したと思う、私はちょうど今それを設定する方法を知らない。私はそれを3つの記事の（そのように12の記事）の4つの列があるようにして、12の投稿ごとにAJAXの負荷の詳細ボタンをロードするようにそれを設定しようとしました。これを動作させるために誰かが私を助けることができますか？前もって感謝します。そしてそれだけであなたは各ループの反復で新しい行を開始している

<?php 
 
get_header(); 
 
get_template_part ('inc/carousel-food'); 
 

 
$the_query = new WP_Query([ 
 
    'posts_per_page' => 12, 
 
    'paged' => get_query_var('paged', 1) 
 
]); 
 

 
if ($the_query->have_posts()) { ?> 
 
    <div id="ajax">          
 
<article class="post">  
 
<div class="row"> 
 
    <div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?> 
 
     <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
     <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
     <?php get_template_part('share-buttons'); ?> 
 
     <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
     <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?> 
 
    </div> 
 
    
 
    </div> 
 
    
 
</article> 
 
</div> 
 
    <?php if(get_query_var('paged') < $the_query->max_num_pages) { 
 
     load_more_button(); 
 
    } 
 
} 
 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
 
    echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
wp_reset_postdata(); 
 
get_footer();

Answer 1

つのポストを示している - それはまだ正常にポストをループしていないの更新された

。あなたはループの外で列を置くことによって、あなたのコードを変更することができます。

<div class="row"> 
while ($the_query->have_posts()) { $the_query->the_post(); 

<article class="post">  

    <div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?> 
     <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
     <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p> 
     <?php get_template_part('share-buttons'); ?> 
     <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
     <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?> 
    </div> 
</article> 
} 
</div> 

<?php if(get_query_var('paged') < $the_query->max_num_pages) { 
    load_more_button(); 
} 

をまた、私はあなたがループの外で、あなたのAjaxのオプションを移動したいかもしれないと思いますか？