0

Bom Dia pessoal, estou fazendo o loop utilizando o wordpress + bootstrap e na hora de mostra o conteudo o loop some alguns posts como mostra na imagem a seguir:

inserir a descrição da imagem aqui

Segue o codigo do loop:

 <div class="container">
    <div class="row">        
       <?php get_sidebar(); ?>           
        <div class="col-md-9">                 
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <div class="coluna-post">
                    <div class="thumbnail">
                       <?php
                            $thumb = get_post_thumbnail_id();
                            $img_url = wp_get_attachment_url( $thumb,'full'); //get img URL
                            $image = aq_resize( $img_url, 207, 292); //resize & crop img
                        ?>
                            <img src="<?php echo $image ?>" />
                        <div class="caption">
                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h4>
                            <p><?php the_excerpt(); ?></p>
                        </div>

                    </div>
                </div>
                <?php endwhile; else: ?>
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
                <?php endif; ?>
                <?php wp_pagenavi(); wp_reset_postdata(); ?>

         </div>
    </div>

</div>

Como estou usando o bootstrap, apenas a div coluna-post que criei o css.. segue o codigo

.coluna-post{ float:left; width:260px; padding:10px; margin:10px;}

Creio que isso seja uma falha no meu loop, mais não estou conseguindo identificar o problema. Já vem acontecendo isso em alguns sites que crio loops com imagens.

Nas minhas configurações do Wordpress em Leitura está o seguinte:

inserir a descrição da imagem aqui

Alguma luz no fim do túnel?

1 Resposta 1

2

não está sumindo nenhum post, oque está acontecendo é que você está usando um grid mal feito, alguma li ai está com pelo menos 1px maior que o resto, fazendo assim que a li abaixo fique batendo nela, uma forma de resolver isso é usando display: flex;

Como usar:

        ul#lista {
            display: flex;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0;
            flex-wrap: wrap;
        }

        ul#lista:before, ul#lista:afer {
            content:" ";
            display: table;
            width: 0;
        }

Esse :before e :after é para não ter nenhum erro no Google Chrome, tente adaptar ao seu css, já que você não informou o mesmo, eu não sei como lhe ajudar.

Outra forma de arrumar é usar o max-height: pixel fixo com o height: pixel igual ao max-height, e assim ele não vai ter erros, eu prefiro o display: flex, ele é mais simples e mais bonito na hora de ver o site.

Mas ainda tem outra forma de resolver, pode ser usado aí um famoso margin-bottom: 1.5em, talvez isso resolva, tente usar isso em último caso.

Boa Sorte no seu tema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .