[英]How to display WordPress posts in a table using Bootstrap?
I want to display my recent blog posts in this specific layout in WordPress. 我想以这种特定的布局在WordPress中显示我最近的博客文章。 Here it is below: 在下面:
1|2|3
-----
4|5|6
Here is my code so far..... 到目前为止,这是我的代码.....
<div class="container post_container">
<div class="row">
<div class="col-xs-12">
<h1>Recent Posts</h1>
<?php
$recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');
if(have_posts()) {
while($recentPost->have_posts()) {
$recentPost->the_post(); ?>
<br>
<br>
<div class="posts_table">
<--Where all recent posts will be displayed-->
</div>
<?php
}
}
?>
I want to use the WordPress loop display the last six posts going in chronological order and I have no idea how to create it and very confused. 我想使用WordPress循环显示按时间顺序排列的最后六个帖子,我不知道如何创建它并且非常困惑。 I have zero idea if I should be using HTML table or Bootstrap grids or both? 我不知道我应该使用HTML表表格还是Bootstrap网格,或者两者都使用?
You could use the WP_Query
argument as an array, it's much less confusing. 您可以将WP_Query
参数用作数组,这样可以减少混乱。
Since you want to fetch the posts in a chronological order, order by date
. 由于您要按时间顺序获取帖子,因此请按date
排序。 Your instance of the class WP_Query
becomes: 您的类WP_Query
实例变为:
$recentPost = new WP_Query(
array(
'type' => 'post',
'posts_per_page' => 6,
'order' => 'ASC',
'orderby' => 'date' // Order by date!
)
);
Then I see you're using Bootstrap with rows and columns. 然后,我看到您正在使用具有行和列的Bootstrap。
First step, create everything around the while() loop: 第一步,围绕while()循环创建所有内容:
<?php
if(have_posts()) {
// First, build parent DIV element outside the while() loop
?>
<div class="row posts_table">
<?php
// Setup the counter
$counter = 0;
Second, build everything inside the while loop: 其次,在while循环中构建所有内容:
// Iterate over the posts
while($recentPost->have_posts()) {
// Get next
$recentPost->the_post();
// Render post content here
// Bootstrap uses 12 columns, we want 3 blocks. 12/3 = 4 thus use cols-xs-4.
?>
<div class="cols-xs-4">
<?php the_title(); ?>
</div>
This is the tricky part. 这是棘手的部分。 After three posts, we're building a new row element. 在发表三篇文章之后,我们正在构建一个新的行元素。 Why? 为什么? Because Bootstrap was designed to use 12 columns in a row, no more. 因为Bootstrap被设计为连续使用12列,所以不再需要。
If you want to refactor this code later on, let's say you want 9/15 posts per page, you can easily update the posts_per_page
value from the array inside WP_Query
without manually putting in a break at 3, 6, 9 and so on. 如果以后要重构此代码,比如说您希望每页9/15个帖子,则可以轻松地从posts_per_page
内部的数组中更新posts_per_page
值,而无需手动在WP_Query
中断。
<?php
// Increment for next post
$counter++;
// Use the modulo to break a Bootstrap row and start a new one
// The HTML inside this control flow will be printed every third post (every third iteration).
if($counter % 3 == 0){
?>
</div>
<div class="row posts_table">
<?php
}
}
Finally, we only have to close our last .row.posts_table
element. 最后,我们只需要关闭最后一个.row.posts_table
元素。
?>
</div>
<!-- end of .row.posts_table -->
<?php
}
?>
Also, check out the WordPress documentation on WP_Query , especially the WP_Query orderby part . 另外,请查看WP_Query上的WordPress文档 ,尤其是WP_Query orderby部分 。
I don't know if .posts_table
has any meaning to the website, if not => it can be removed. 我不知道.posts_table
对网站是否有任何意义,如果不是=>可以删除。
I think you might be looking for something like this. 我认为您可能正在寻找类似的东西。 Note that @Joachim has provided a more in depth answer but the below is a modified version of your original code that might be a good reference for you moving forward. 请注意,@ Joachim提供了更深入的答案,但是下面是原始代码的修改版本,可能对您前进有很好的参考。
<div class="container post_container">
<div class="row">
<div class="col-xs-12">
<h1>Recent Posts</h1>
<?php
$recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');
if(have_posts()) {
// the wrapper div goes between the IF outside the while
// added a '.row' class here ?>
<div class="posts_table row">
<?php
while($recentPost->have_posts()) {
$recentPost->the_post();
// the column class is added below here inside the WHILE
// it needs to output on each loop ?>
<div class="col-xs-4">
<!-- post content comes here -->
</div>
<?php
} // end the WHILE
// the .posts_table wrapper is closed here outside the WHILE inside the IF ?>
</div>
<?php
} // end the IF
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.