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

您应该阅读模运算符。这对这些情况非常有帮助。下面我有两个版本，顶部是文档并使用大括号（使其更容易阅读），底部在最少的代码中做同样的事情。

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

  }

}

第二种方式

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

循环使用Wordpress帖子 - 使用Bootstrap输出

2 个答案: