3

Seguinte estou construindo um website que precisa mostrar os posts com o wordpress, porém estou usando o framework de grid Skeleton, ele funciona da seguinte forma:

<div class="container">
    <div class="row">
       <div class="three columns"></div>
       <div class="three columns"></div>
       <div class="three columns"></div>
       <div class="three columns"></div>
    </div>
</div>

E assim vái....

Mas eu estou tendo o seguinte :

inserir a descrição da imagem aqui

E o Problema:

Wordpress tem o seguinte esquema de dar display nos posts:

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

<?php endwhile?>

<?php else: ?>

<?php endif; ?>

Como adapto o sistema de grid para a cada 4 posts dar um <div class="row"> no inicio e um </div> no final, para ficar responsivo?

Situação atual:

<div class="row">
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
</div>
<div class="row">
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
    <div class="three columns">
        <article class="articlebox">
            <header class="articleheader">
                <h2 class="article_title">Teste Bananinha</h2>
            </header>
        </article>
    </div>
</div>

1 Resposta 1

2

Existem várias maneiras de solucionar essa questão. Abaixo tem algumas das formas que já usei.

1. CSS:

Em vez de usar o framework nessa situação poderá usar o puro CSS. Seria algo mais ou menos assim:

HTML(gerado pelo WordPress):

<div class=" posts container">
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
    <div class="three"></div>
</div>

CSS:

.posts {
    width: 1280px;
}

.posts .three {
    width: 25%;
}

Porém seria necessárias mais algumas linhas de código para corrigir possíveis desajustes no layout.

2. PHP:

Você pode também usar uma função para incluir o código necessário no loop, essa era a maneira que eu fazia no início. Fiz uma função exemplo, basta colocá-la no funcions.php e chamá-la na página que quiser:

Função:

function add_row( $current, $end = false, $columns = 4 ) {
    $row = ( $current % $columns ) === 0 ? true : false;

    if( $row && ! $end ) {
        echo '<div class="row">';
    }
    if( $row && $end) {
        echo '</div>';
    }
}

Exemplo de uso:

if ( have_posts() ):
    $count = 1;
    while ( have_posts() ):
        add_row($count); // Imprimi a tag de abertura
        the_post();
        add_row($count, true); // Imprimi a tag de fechamento
        $count++;
    endwhile;
endif;

Com essa modificação o loop vai gerar o HTML que você espera.

3. Jeet:

Ou você pode usar o Jeet que é um sistema de grids, ele torna a criação de grids css bem mais fácil e rápida. Mas para isso você também terá de usar um task runner como Grunt ou Gulp e um pré-processador CSS como Less ou Sass ou Stylus. Interessante que dando uma olhada na documentação do Skeleton vi que eles dão suporte a Less e Sass, você pode ver isso aqui. Usando essas ferramentas combinadas* você teria um código assim:

HTML:

Séria o mesmo do primeiro exemplo.

Sass:

@import 'jeet/index';

.container {
  .three {
    col(3/12)
  }
}

*A combinação que eu gosto, devido a curva de aprendizado é Gulp + Sass + Jeet.

1
  • Estou utilizando o sistema básico com o html mais o css (gerado pelo WordPress), e está funcionando perfeitamente, obrigado! 21/02/2016 às 3:55

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 .