Bootstrap 搜索结果页面中的 Wordpress 自定义布局

Question

如果可能，我希望在以下问题中得到一些帮助：

我在 Genesis 主题中使用 bootstrap 网格，并希望使用此网格显示搜索结果。

我使用以下代码创建了一个 search.php：

<?php
/**
 * Search Results Template File
 */ 
get_header(); ?>
    <header>
        <h1>Search Results: &quot;<?php echo get_search_query(); ?>&quot;</h1>
        <br>
    </header>

<?php if ( have_posts() ) :  // results found?>
    <?php while ( have_posts() ) : the_post(); ?>

<div class="container-fluid">

<div class="row">

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></a></div>
<div class="gr-nome-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>

</div> <!-- Row -->

</div> <!-- Container -->

<?php endwhile; ?>

<?php else :  // no results?>
    <article>
        <h1>No Results Found.</h1>
    </article>
<?php endif; ?>
<?php get_footer(); ?>

genesis();

但在搜索结果中，内容是一个接一个地对齐，而不是在选定的网格中。

有什么建议可以给我吗？

非常感谢您的帮助！

Answer 1

这是因为您的 'row' div 在 while 循环内，导致它生成多个 'row' div 而不是一个。

要解决此问题，您需要将 while 循环放在 'row' div.

中

试试下面的代码

<?php
/**
 * Search Results Template File
 */ 
get_header(); ?>
<header>
    <h1>Search Results: &quot;<?php echo get_search_query(); ?>&quot;</h1>
    <br>
</header>

<?php if ( have_posts() ) :  // results found?>
<div class="container-fluid">
    <div class="row">
    <?php while ( have_posts() ) : the_post(); ?>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="gr-infos-container-cliente">
                <div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
                <div class="gr-img-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></a></div>
                <div class="gr-nome-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></div>
                <div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
                <div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
            </div>
        </div>
    <?php endwhile; ?>
    </div> <!-- Row -->
</div> <!-- Container -->

<?php else :  // no results?>
<article>
    <h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>

genesis();

Bootstrap 搜索结果页面中的 Wordpress 自定义布局

Wordpress Custom Layout in Search Result Page with Bootstrap

css

php

wordpress

twitter-bootstrap

genesis