Como usar um layout de grade para exibir suas postagens do WordPress

Deseja mostrar seus posts do WordPress em um formato de grade?

Ao apresentar seu conteúdo no WordPress, um layout de grade oferece opções adicionais. Isso pode ser útil ao projetar páginas personalizadas. Vamos ensiná-lo a exibir rapidamente suas postagens do WordPress em um estilo de grade em qualquer lugar do seu site neste artigo.

Quando você precisa de um layout de grade do WordPress?

Todo tema WordPress suporta o estilo clássico de postagem de blog vertical, que funciona bem para a maioria dos sites. Esse estilo, no entanto, pode ocupar muito espaço, especialmente se você tiver muitos artigos. Se você estiver criando uma página inicial personalizada para o seu blog, convém utilizar o estilo de grade para exibir seu conteúdo mais recente.

Isso permitirá que você adicione mais coisas à sua página inicial. Além disso, sua grade de postagem acentuará suas fotos em destaque, tornando-as esteticamente mais atraentes e clicáveis. A grade de postagem também pode ser usada para exibir seu portfólio criativo e outras formas de material exclusivo.

Usando o editor de blocos, crie um layout de grade de postagem do WordPress.

Usando o editor de blocos do WordPress, você pode exibir facilmente suas postagens e miniaturas em um arranjo de grade de postagem. Você pode construir sua própria grade usando o bloco de grade de postagem embutido.

Abra a página que deseja alterar, clique no botão 'Mais' adicionar bloco, procure por 'Loop de consulta' e clique no bloco para adicioná-lo.

Este bloco incorpora seu loop de postagem em sua página.

Em seguida, no topo do bloco, selecione 'Start Blank' para criar uma grade de postagem.

Dependendo do tipo de informação que você deseja exibir com sua grade de postagem, você tem algumas opções.

Vamos com 'Imagem, Data e Título', mas você pode fazer o que quiser.

Em seguida, passe o mouse sobre a imagem e escolha a opção 'Grid View'.

Isso converte sua lista em uma grade de postagens.

As informações exibidas podem então ser personalizadas.

Primeiro, removeremos a paginação na parte inferior do bloco. Basta clicar nele e selecionar o menu de opções 'Três pontos'.

Em seguida, escolha 'Remover paginação'.

Isso excluirá o elemento do bloco automaticamente.

Da mesma forma, você pode remover as datas das postagens ou deixar informações de postagem adicionais para seus leitores.

Depois disso, adicionaremos links à miniatura da postagem e ao título da postagem.

Basta clicar na miniatura de sua postagem e alternar o botão 'Link para postagem' na caixa de opções à direita.

Então, para o título do seu post, repita o processo.

Quando terminar, clique no botão 'Atualizar' ou 'Publicar' para publicar sua grade de postagem.

Agora você pode visualizar sua nova grade de postagem do WordPress visitando seu site WordPress.

Então, para o título do seu post, repita o processo. Quando terminar, clique no botão 'Atualizar' ou 'Publicar' para publicar sua grade de postagem. Agora você pode visualizar sua nova grade de postagem do WordPress visitando seu site WordPress.

Ao adicionar código ao WordPress, você pode criar um layout de grade de postagem do WordPress.

Essa abordagem requer uma compreensão básica de como inserir código no WordPress. Antes de começar a adicionar código, você deve primeiro estabelecer um novo tamanho de imagem para sua grade de postagem.

Em seguida, localize o arquivo de tema do WordPress ao qual você adicionará o trecho de código. Você pode, por exemplo, incluí-lo em seu arquivo single.php para que ele apareça na parte inferior de todos os seus artigos. Você também pode criar seu próprio modelo de página para exibir o layout da grade de postagem do blog com miniaturas.

Depois disso, você pode começar a adicionar código ao WordPress. Dividiremos a amostra de código seção por seção porque ela é muito longa. Para começar, insira o seguinte trecho de código em seu arquivo de modelo de tema.

 <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>

A consulta pós-loop é configurada nesta linha de código. Se quiser, você pode alterar a variável 'posts por página' para mostrar mais posts por página.

Em seguida, em seu arquivo de modelo de tema, cole o seguinte trecho de código.

 <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?>

Essa linha de código produz duas colunas para nossos artigos, exibindo o título e a imagem do post. Ele também gera uma classe CSS, que vamos estilizar mais tarde. Também se refere à 'imagem do post', que deve ser substituída pelo nome do tamanho da imagem que você criou anteriormente.

Em seguida, no final, adicione o seguinte trecho de código.

 <?php $counter++; endwhile; //Post Navigation code goes here endif; ?>

Este pedaço de código apenas fecha o loop. Ele também permite que você adicione navegação de postagem, mas como a maioria dos proprietários de sites usa um plug-in diferente para isso, não o incluímos para evitar conflitos de código.

Veja como o snippet de código inteiro aparece.

 <div> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div>

Para garantir que sua grade de postagem seja exibida corretamente, adicione o seguinte CSS ao seu site.

 #gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; }

Explore os efeitos de vários seletores CSS em diferentes componentes do seu post loop experimentando.

Esperamos que este artigo tenha sido útil para ensiná-lo a exibir suas postagens do WordPress em um estilo de grade.