Como adicionar a classe ímpar/par à sua postagem em temas do WordPress

Deseja adicionar um toque de interesse visual às postagens do seu blog no WordPress? A adição de classes pares e ímpares pode ajudá-lo a obter um design exclusivo e envolvente, dando um estilo diferente a cada postagem.

Frequentemente recebemos perguntas de nossos leitores sobre como aplicar essa técnica. Embora muitos temas do WordPress não ofereçam uma opção integrada para classes de postagens pares e ímpares, é um processo relativamente simples adicioná-las você mesmo.

Neste artigo, mostraremos como adicionar classe par/ímpar à sua postagem nos temas do WordPress.

Por que adicionar a classe ímpar/par às suas postagens em temas do WordPress?

Muitos temas do WordPress usam uma classe par ou ímpar para os comentários do WordPress. Isso ajuda os usuários a visualizar onde um comentário termina e o próximo começa.

Da mesma forma, você pode usar essa técnica para suas postagens no WordPress. Ela tem uma aparência esteticamente agradável e ajuda os usuários a examinar rapidamente as páginas com muito conteúdo. Ela é particularmente útil para a página inicial de sites de revistas ou notícias.

Dito isso, vamos ver como adicionar uma classe par e ímpar às suas postagens no tema do WordPress.

Adição de classe ímpar/par a posts no tema WordPress

O WordPress gera classes CSS padrão e as adiciona a diferentes itens em seu site em tempo real. Essas classes CSS ajudam os desenvolvedores de plugins e temas a adicionar seus próprios estilos a diferentes itens.

O WordPress também vem com uma função chamada post_class, que é usada pelos desenvolvedores de temas para adicionar classes ao item da postagem. Consulte nosso guia sobre como estilizar cada postagem do WordPress de forma diferente.

A post_class também é um filtro, o que significa que você pode conectar suas próprias funções a ela. É exatamente isso que faremos aqui.

Basta adicionar esse código ao arquivo functions.php do seu tema, em um plug-in específico do site ou em um plug-in de snippets de código.

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

Recomendamos adicionar esse código usando o plug-in WPCode. É o melhor plug-in de snippets de código que torna seguro e fácil adicionar código personalizado no WordPress.

Para começar, você precisa instalar e ativar o plug-in gratuito WPCode. Para obter instruções, consulte este guia sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Code Snippets ” + Add Snippet no painel do WordPress. Em seguida, clique no botão “Use Snippet” na opção “Add Your Custom Code (New Snippet)”.

A partir daí, adicione um título para o trecho de código, que pode ser qualquer coisa que o ajude a lembrar para que serve o código.

Em seguida, cole o código acima na caixa “Code Preview” (Visualização de código) e selecione “PHP Snippet” como o tipo de código na lista suspensa à direita.

Depois disso, basta alternar o botão de alternância de “Inativo” para “Ativo” e clicar no botão “Salvar snippet”.

Essa função simplesmente adiciona ímpares à primeira postagem, depois pares e assim por diante.

Você pode encontrar as classes pares e ímpares no código-fonte do seu site. Basta levar o mouse até o título de uma postagem e clicar com o botão direito do mouse para selecionar Inspecionar ou Inspecionar elemento.

Agora que você adicionou classes pares e ímpares às suas postagens. A próxima etapa é estilizá-las usando CSS. Você pode adicionar seu CSS personalizado à folha de estilo do tema filho, ao personalizador de temas ou usando o plug-in WPCode.

Aqui está um exemplo de CSS que você pode usar como ponto de partida:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

Esta é a aparência em nosso site de teste:

Se você não sabe como usar CSS, talvez queira consultar nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar classes ímpares/pares às suas postagens nos temas do WordPress. Talvez você também queira ver nosso guia sobre como estilizar o layout dos comentários do WordPress e nossas escolhas de especialistas dos melhores construtores de páginas do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.