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]

Você quer adicionar classes pares e ímpares a artigos sobre o tema do seu blog WordPress? Adicionar uma turma 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 recuperadas pelo WordPress

Por que adicionar classes? pares »Ou« Odd Sobre o tema do seu blog WordPress?

Muitos temas do WordPress usam uma classe antiga ou até mesmo para comentários do WordPress. Ele permite que os usuários visualizem onde termina um comentário e onde o 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 home page de sites de jornais ou revistas.

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]

Dito isto, vamos ver como adicionar uma classe nos artigos de 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 na hora. Essas classes CSS ajudam os desenvolvedores de plug-ins e de temas a adicionar seus próprios estilos a cada artigo diferente.

O WordPress também oferece uma função chamada " post_class Qual é 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. Isso é exatamente o que vamos fazer aqui.

Basta adicionar este 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.

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]

Você encontrará classes ímpares e pares no código-fonte do seu site. Basta levar o mouse ao título de um item e clicar com o botão direito do mouse para Inspecionar Item.

pré-visualizar mesmo artigo estranho do WordPress

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 seu tema filho ou usando um simples plugin CSS.

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:

artigos WordPress de cores alternativas

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. [FREE]

Você precisará de um pouco de prática para obter bons resultados, mas para isso você precisará dominar o CSS ou apenas usar uma ferramenta como CSS herói.

É tão 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.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
20 ações
ação16
chilrear1
Enregistrer3
Whatsapp