投稿をグリッドレイアウトで表示する方法

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

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

役職。

はあなた<article>の周りにこれを追加します。あなたがこれを実行したときに起こる

<?php while ($the_query->have_posts()) : ?> 

    <?php $the_query->the_post(); ?> 

    <article> ... 

    ... </article> 

<?php endwhile; ?>