Você deseja adicionar classes pares e ímpares a artigos sobre o assunto de sua blog WordPress ? Adicionar uma classe permitirá que você exiba um estilo específico para cada artigo.
Neste tutorial, mostraremos como exibir classes pares ou ímpares no WordPress.
Por que adicionar aulas? pares "Ou" Odd » sobre o tema do seu blog WordPress ?
muitos Temas do WordPress use uma classe antiga ou a mesma para comentários do WordPress. Ele permite que os usuários vejam onde um comentário termina e outro começa.
Da mesma forma, você pode usar essa técnica para seus artigos. Parece esteticamente agradável permitir que os usuários digitalizem rapidamente páginas grandes. Isso é particularmente útil para a página inicial de sites de jornais ou revistas.
Dito isto, veremos como adicionar uma classe nos artigos do seu blog WordPress.
Como adicionar uma classe par / ímpar em WordPress
O WordPress gera classes CSS padrão e as adiciona a diferentes artigos em seu site em tempo real. Essas classes CSS ajudam os desenvolvedores de plugins e temas a adicionar seus próprios estilos a cada artigo diferente.
O WordPress também oferece uma função chamada " post_class Que é usado pelos desenvolvedores de temas para adicionar classes aos artigos.
A função post_class Também é um filtro, o que significa que você pode manipular isso com. É exatamente o que vamos fazer aqui.
Basta adicionar este código ao seu arquivo functions.php. tema WordPress.
função oddeven_post_class ($ class) {$ current_class global; Classes $ [] = $ current_class; Current_class $ = ($ current_class == 'estranho')? 'Mesmo' 'estranho'; retornar $ classes; } Add_filter ( 'post_class', 'oddeven_post_class'); $ Current_class global; $ Current_class = 'estranho';
Esta função simplesmente adiciona uma classe para uniformizar e itens estranhos.
Você encontrará classes ímpares e pares no código-fonte do seu site. Basta levar o mouse até o título de um artigo e clicar com o botão direito para inspecionar o item.
Agora que você adicionou as classes ímpares e pares aos seus artigos. O próximo passo é dar a eles um estilo único com CSS. Você pode adicionar seu código CSS personalizado em seu tema filho ou usando um plugin CSS simples.
Aqui está um exemplo de código CSS que você pode usar como ponto de partida:
.Mesmo {background: #f0f8ff; .odd} {background: #f4f4fb; }
Aqui está como o resultado pode ser:
Você vai precisar de um pouco de prática para conseguir bons resultados, mas para isso você precisará dominar CSS ou apenas usar uma ferramenta como CSS herói.
É simples assim. Espero que este tutorial seja de grande ajuda para você. Sinta-se à vontade para nos fazer perguntas ou compartilhar este tutorial com seus amigos em suas redes sociais favoritas.
