Ir para o conteúdo principal

Como adicionar uma classe mesmo / itens estranhos em seu WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Deseja adicionar classes pares e ímpares a artigos sobre o tema do seu 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.

exibir classes ímpares até recuperadas por WordPress

Por que adicionar aulas? pares "Ou" Odd Sobre o tema do seu blog WordPress?

Muitos temas do WordPress usam uma classe antiga ou semelhante para comentários do WordPress. Permite que os usuários visualizem onde um comentário termina e onde o outro começa.

Da mesma forma, você pode usar esta 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, vamos ver como adicionar uma classe nos artigos de seu blog WordPress.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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 esse código ao arquivo functions.php do seu 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 colocar o mouse no título de um item e clicar com o botão direito do mouse em Inspecionar item.

visualizar artigo WordPress ainda estranho

Agora que você adicionou classes pares e ímpares aos seus artigos. O próximo passo é oferecer a eles um estilo único com CSS. Você pode adicionar seu código CSS personalizado ao tema filho ou usando um plug-in 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:

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

artigos de cores alternativas do WordPress

Você precisará de um pouco de prática para obter bons resultados, mas para isso 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.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
12 ações
ação8
chilrear1
Enregistrer3