使用引导程序创建归档页面网格布局

问题描述：

我想要一个包含我的食物类别（类别ID为10）的所有归档帖子的页面。我正在尝试使用col-md-4进行设置，因此我将在一行中放置三个帖子。我想我已将所有必要的元素添加到了我的PHP文件中，但我现在不知道如何设置它。我试图设置它，所以有3个职位的4列（所以12职位），然后在每12个职位后，它会加载ajax加载更多按钮。任何人都可以帮我解决这个问题。提前致谢。使用引导程序创建归档页面网格布局

更新的IT仍然没有通过帖子循环正确 - 这是只显示一个帖子

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

答

你开始在每次循环迭代一个新行。

<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选项循环之外：您可以通过将行外循环改变你的代码？

使用引导程序创建归档页面网格布局

相关推荐