遍歷Wordpress帖子-使用Bootstrap輸出

Question

我正在使用Bootstrap框架創建自定義的wordpress主題。 我需要在2行中遍歷博客文章。

我需要的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>

但是我不確定如何在wordpress中創建一個php循環以獲得所需的輸出。

有任何想法嗎？

Answer 1

嘗試這個：

<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>

Answer 2

您應該閱讀模運算符。 對於這些情況確實很有幫助。 下面有兩個版本，上面有文檔記錄，並使用花括號（使其更易於閱讀），而下面用最少的代碼執行相同的操作。

方式一

<?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++;

  }

}

方式二

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