2

Pessoal eu preciso criar essa disposição de artigos no meu loop do WordPress e não sei como eu poderia fazer. Sei que será necessário algumas instruções em PHP e algumas implementações de Bootstrap, estou usando esse framework CSS.

Alguém tem alguma ideia de como eu posso começar a pensar nessa estrutura?

2 Respostas 2

2

Aparentamente tem alguns posts que tem foto que é 2x1, e outros que tem foto de 1x2 (me refiro à essas fotos):

1x2

2x1

Além disso, são 3 colunas. O bootstrap consegue fazer isto de forma fácil:

<div class="row">
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
</div>

A sua lógica, porém, vai ter que analisar a imagem de cada post dentro do loop e verificar:

  1. Se esse post faz parte desse <div class="row">, ou precisa começar uma outra
  2. Se o post consta como uma, ou duas colunas.
  3. Se o post consta como duas rows, vai ter que pular a terceira coluna na próxima row

Exemplo

Obs: Esse não é código que poderás simplesmente copiar e colar na sua aplicação - é apenas uma tentativa a mostrar uma coisa aparecida que te direcione no caminho certo.

<?php 
 $colunas = 3;
 $coluna_corrente = 0;
 $duas_rows = false;
?>
<?php if ( have_posts() ) : ?>
 <?php while( have_posts() ) : the_post(); ?>
   <?php
    ++$coluna_corrente;
    if ( $coluna_corrente % $colunas == 0 ) {
      echo "<div class='row'>";
    }
    if ( tamanho_relativa_da_foto( $colunas, $post->foto ) < 2 ) { //esse função não existe
     echo '<div class="col-md-4">';
     the_title();
     //algo mais
     echo "</div>";
    } else if ( tamanho_relativa_da_foto( $colunas, $post->foto ) == 2 && !$duas_rows ) {
     echo '<div class="col-md-8">';
     //etc...
     echo '</div>';
    } else {
      $duas_rows = true;
      echo '<div class="col-md-4">';
      //...
      echo '</div>';
    }
    if ( $coluna_corrente == $colunas ) {
      echo "</div>";
    }
   ?>
 <?php endwhile; ?>
<?php endif; ?>
3
  • Muito intuitivo sua resposta. Quanto as imagens, não vai ter problemas, O que eu quero mesmo é respeitar o posicionamento do layout sem me preocupar por enquanto com o que vai lá dentro. Pode me ajudar a fazer as 3 verificações afim de chegar ao resultado desejado? Poderia me mostrar uma parte para eu tentar fazer o resto [PHP] ... 20/07/2015 às 23:30
  • Eu posso te oferecer um pouco de psuedocode, mas não vou conseguir escrever exatamente o que precisa para conseguir o que está querendo fazer - ao menos que queira pagar minha passagem ao seu país, e aí vou com prazer! :D 20/07/2015 às 23:34
  • rsrsrsrs ... vou aceitar sua pequena remota colaboração. Obrigado. 20/07/2015 às 23:39
1

Sugiro que você use o grid do bootstrap http://getbootstrap.com/css/#grid para criar as disposições. montando primeiro os grids e depois implementando os loops. https://codex.wordpress.org/pt-br:O_Loop

Bom, acredito que seja algo assim que você tenha que usar:

<div class="row">
  <div class="col-sm-6">  


    <?php if (have_posts()) : ?>
      <?php $number = 0 ?>
      <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         

            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><p><?php echo the_content(); ?></p></a>
          
 
        </article><!--col--> 
        <?php $number++; ?>      
      <?php endwhile; ?>
    <?php endif; ?>
  </div>  

</div>  

Você define como o grid será representado e depois cria o loop para trazer a informação do wordpress

3
  • As ferramentas a serem usadas eu conheço. Não sei a lógica da programação envolvendo estas ferramentas para aplicar ao layout. Alguém tem uma ideia? Obrigado. 20/07/2015 às 22:50
  • editei a resposta 20/07/2015 às 23:02
  • Consegue refinar a resposta de forma a reproduzir uma parte do layout para que eu possa desenvolver o resto? Obrigado 20/07/2015 às 23:26

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 .