[英]Looping through Wordpress Posts - Output using Bootstrap
I'm creating a custom wordpress theme using the Bootstrap Framework. 我正在使用Bootstrap框架创建自定义的wordpress主题。 I need the loop through the blog posts in rows of 2. 我需要在2行中遍历博客文章。
The HTML output I need as follows: 我需要的HTML输出如下:
<div class="row">
<div class="col-md-6 blog-item text-center">
<div class="blog-padding blog-indx-panel">
<div><a href="link to post here"><img class="img-responsive" alt="" src="/wp-content/uploads/2015/05/featured-image1.jpg"></a></div>
<h3>POST TITLE #1</h3>
<p class="blog-date">10 FEBRUARY 2015</p>
<p>Blog Excerpt Shown Here</p>
<div><a class="btn btn-default btn-text" href="linktoposthere" role="button">Read Full Post</a></div>
</div>
</div>
<div class="col-md-6 blog-item text-center">
<div class="blog-padding blog-indx-panel">
<div><a href="link to post here"><img class="img-responsive" alt="" src="/wp-content/uploads/2015/05/featured-image1.jpg"></a></div>
<h3>POST TITLE #1</h3>
<p class="blog-date">16 FEBRUARY 2015</p>
<p>Blog Excerpt Shown Here</p>
<div><a class="btn btn-default btn-text" href="#linktoposthere" role="button">Read Full Post</a></div>
</div>
</div>
</div>
But I'm unsure on how to create a php loop in wordpress to get the desired output. 但是我不确定如何在wordpress中创建一个php循环以获得所需的输出。
Any ideas? 有任何想法吗?
Try this: 尝试这个:
<div class="row">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<div class="col-md-6 blog-item text-center">
<div class="blog-padding blog-indx-panel">
<div><a href="<?php the_permalink(); ?>"><img class="img-responsive" alt="" src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); ?>"></a></div>
<h3><?php the_title(); ?></h3>
<p class="blog-date"><?php the_time('F jS, Y'); ?></p>
<p><?php the_excerpt(); ?> </p>
<div><a class="btn btn-default btn-text" href="<?php the_permalink(); ?>" role="button">Read Full Post</a></div>
</div>
</div>
<?php
} // end while
} // end if
?>
</div>
You should read up on the modulo operator. 您应该阅读模运算符。 It's really helpful for these situations. 对于这些情况确实很有帮助。 Below I have two versions, the top is documented and uses braces (makes it easier to read) and the bottom does the same thing in the least code. 下面有两个版本,上面有文档记录,并使用花括号(使其更易于阅读),而下面用最少的代码执行相同的操作。
Way One 方式一
<?php
// wp_query is used to get the post count in the loop
global $query_string, $wp_query;
// Define starting count
$counter = 1;
// Will output pagination set limit unless there are not enough posts, then it will output the remainder
$post_count = $wp_query->post_count;
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
// Checks to see if the current post is odd.
// If it is, we open the div for the row.
// Modulo give the remainder of the two numbers.
if ($counter % 2 != 0) {
echo '<div class="row">';
}
?>
<div class="col-md-6 blog-item text-center">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
// Is the post count even? We better close the div.
// Also closes the div once we hit the last post in the loop.
if ( $counter % 2 == 0 || $post_count == $counter ) {
echo '</div>';
}
// Increment counter
$counter++;
}
}
Way Two 方式二
<?php
global $query_string, $wp_query;
$counter = 1;
$post_count = $wp_query->post_count;
if ( have_posts() ) : while( have_posts() ) : the_post();
if ($counter % 2 != 0)
echo '<div class="row">';
?>
<div class="col-md-6 blog-item text-center">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
if ( $counter % 2 == 0 || $post_count == $counter )
echo '</div>';
$counter++;
endwhile; endif;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.