我希望搜索结果显示在列中,但只有文本才会显示

时间:2016-04-14 12:34:20

标签: php html css wordpress twitter-bootstrap-3

我有一个发布搜索结果的WP插件。这是PHP的结果:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */


if ( $query->have_posts() )
{

    ?>

    Found <?php echo $query->found_posts; ?> Results<br />
    Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />


    <div class="pagination">

        <div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
        <div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            }
        ?>
    </div>

    <?php
    while ($query->have_posts())
    {
        $query->the_post();

        ?>

<div>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php 
                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            <p><br /><?php the_excerpt(); ?><p>
</div>

        <?php
    }
    ?>
    Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />

    <div class="pagination">

        <div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
        <div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            }
        ?>
    </div>
    <?php
}
else
{
    echo "No Results Found";
}

?>

现在我希望结果(帖子)显示在2列中,但是,当我尝试这样做时:

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php 
                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            <p><br /><?php the_excerpt(); ?><p>
</div>
</div>
</div>

我可以看到文本(p)出现在列中,但不是结果。

我究竟如何实现目标?

1 个答案:

答案 0 :(得分:1)

有几个错误。 首先col-md-2在12列布局中创建一个2列宽的div。所以它是第六而不是一半。它应该是col-md-6

然后下一个问题是你添加容器,行和col的每个帖子。但是你应该只有1个容器和1行。对于每个帖子,你应该创建列div。

<!-- 1 container and row -->
<div class="container">
<div class="row">    
<?php
  while ($query->have_posts()){
    $query->the_post();
?>
    <!-- a six column wide div for each post -->
    <div class="col-md-6">
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php 
        if ( has_post_thumbnail() ) {
          echo '<p>';
            the_post_thumbnail("small");
          echo '</p>';
        }
      ?>
      <p><br /><?php the_excerpt(); ?><p>
  </div>

<?php
  }
?>
</div>
</div>