使用引导程序制作存档页面网格布局答案

【问题标题】：make archive page grid layout with bootstrap使用引导程序制作存档页面网格布局
【发布时间】：2017-01-11 02:13:43
【问题描述】：

我想要一个包含我的食品类别（类别 ID 为 10）的所有存档帖子的页面。我正在尝试使用 col-md-4 进行设置，因此我将在一行中发布三个帖子。我想我在我的 php 文件中添加了所有必要的元素，但我现在不知道如何设置它。我试图设置它，以便有 4 列的 3 个帖子（所以 12 个帖子），然后在每 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();

【问题讨论】：

标签： php wordpress twitter-bootstrap archive grid-layout

【解决方案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 选项移到循环之外？

【讨论】：