Deseja categorizar categorias de maneira diferente no WordPress?
A maior parte das Temas do WordPress use o mesmo estilo para todas as páginas de arquivo de categoria. No entanto, se você tiver um site rico em conteúdo, poderá optar por exibir cada categoria de maneira diferente para maximizar seu potencial.
Neste tutorial, mostraremos como exibir categorias de maneira diferente em seu blog WordPress.
Sem mais delongas, convidamos você a descobrir nossa lista. Mas primeiro, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
Por que dar um estilo diferente às categorias no WordPress
Como dissemos anteriormente, a maioria Temas do WordPress use o mesmo modelo para cada página de arquivo de categoria. Isso ocorre porque os desenvolvedores de Temas do WordPress não sei como você usará categorias em seu site.
Leia também: Como exibir conteúdo RSS apenas para assinantes no WordPress
No entanto, se você tiver um site rico em conteúdo, alterar o layout de uma página de arquivo A categoria pode ter um impacto dramático sobre como os usuários se envolvem com o conteúdo dessa página.
Por exemplo, se você gerencia um site de notícias ou revista, pode exibir anúncios locais na categoria de notícias locais. Você pode ver informações meteorológicas, ver as histórias mais populares nesta categoria e assim por diante.
Dito isso, vamos ver como personalizar facilmente categorias individuais no WordPress.
Como dar um estilo às categorias
Existem várias maneiras de categorizar categorias no WordPress. Mostraremos dois métodos diferentes para atribuir um estilo diferente às categorias e você poderá escolher os que melhor atendem às suas necessidades e nível de habilidade.
Usando um único modelo de categoria em um tema WordPress
Os temas do WordPress seguem uma hierarquia padrão de modelos. De acordo com o nome de um arquivo de modelo, o WordPress pode escolher automaticamente o modelo certo para exibir uma página.
Por exemplo, ele procura o arquivo category.php para exibir as páginas do arquivo da categoria.
WordPress também permite que você criar modelos para categorias individuais. Suponha que você queira classificar a categoria "AppleDiferentemente. Você pode fazer isso adicionando um novo arquivo de modelo ao seu tema WordPress e nomeando-o category-apple.php.
Conecte-se ao seu site WordPress usando um cliente FTP e navegue até / Wp-content / themes / your-theme / e crie um novo arquivo denominado category-apple.php. Lembre-se de substituir "Apple" pelo nome de sua categoria.
Você pode usar o arquivo " category.php Do seu tema WordPress como ponto de partida. Basta editar e copiar todo o seu conteúdo. Agora renomeie seu novo arquivo para " category-apple.php E cole o código dentro.
Então você pode começar a fazer alterações no seu modelo de categoria individual. Você pode criar e usar uma barra lateral diferente para esta categoria, torná-la uma página de largura total, adicione uma mensagem de boas-vindas ou o que você quiser.
Atribua um estilo às categorias usando o código CSS
O WordPress adiciona automaticamente classes CSS a diferentes elementos do seu site. Isso inclui a classe do corpo e a classe da publicação.
Por exemplo, se você visualizar uma página de arquivo de categoria e, em seguida, usar a ferramenta Inspecionar, notará as classes CSS "categorias" e o nome da categoria na tag "corpo".
Você pode usar esta classe CSS para cada categoria individual diferente, adicionando CSS personalizado.
Aqui está um exemplo de CSS que você pode usar como ponto de partida.
body.category-maçã {background-color: #EEE; background: url ( "http://example.com/wp-content/uploads/2017/background.jpg ') no-repeat fixo; Cor: #FFFFFF; } .Mapa-maçã .site {background: #232323; } .Mapa-maçã {color: # CCCCCC; }
Não se esqueça de alterar o nome da categoria na classe CSS com o nome da sua categoria.
Agora você pode adicionar código CSS personalizado no WordPress. Mas, se você precisar de uma solução premium para adicionar código CSS personalizado, oferecemos abaixo 2 WordPress plugins premium que o ajudará nessa tarefa.
1. Easy Custom JS e CSS
Ce WordPress Plugin premium é um poderoso editor de código CSS e JavaScript que permite adicioná-los a qualquer seção do seu site. Ele permite que você mantenha suas personalizações mesmo após uma grande atualização no seu tema WordPress.
Você tem a opção de limitar o campo de uso do seu código personalizado. Por exemplo, você pode usar seu código apenas para um artigo no formato de vídeo.
Veja nossos artigos sobre Como exigir a aceitação dos termos de uso no WordPress
Ou você pode limitar seu código a um tema específico do WordPress; O que é útil se você estiver alterando temas para o seu blog WordPress.
Descarregar | Demo | hospedagem na web
2. JavaScript e CSS personalizados nas páginas!
Graças a isso WordPress Plugin, Você pode adicionar Estilos CSS e JavaScript personalizado em páginas específicas. Também permite definir regras para várias páginas. Dessa forma, você pode ter estilos predefinidos ou exclusivos para seções específicas.
Como qualquer outro recurso oferecido por este WordPress Plugin, você pode facilmente incluir scripts diferentes em diferentes páginas do seu site.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- 8 plugins do WordPress para adicionar um sistema de tradução em um blog
- 5 plugins do WordPress para criar um calendário em um blog
- O guia nas etapas do 4 para criar sua autoridade através do seu blog
- Alguns plugins do WordPress para redirecionar
Conclusão
Aqui ! É isso para este tutorial, espero que ele permita que você adicione código CSS personalizado no WordPress. sinta-se livre para compartilhe este artigo com seus amigos em suas redes sociais favoritas.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.
Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.
...
Muito obrigado por este tutorial excelente e fácil de entender, graças ao seu artigo consegui modificar o design da página
Olá!
Por favor, veja se você pode me ajudar porque estou fumando minha cabeça
Estou fazendo uma loja online com divi e woocommerce e estou tendo um problema porque não consigo personalizar a página da categoria.
Eu passo o link para você ver:
https://chachocarp.com/product-category/los-mas-vendidos
O que eu quero mudar é:
1. Tenho 24 produtos nesta categoria e em vez de mostrá-los em duas páginas de 12 produtos, ela os mostra em três páginas de 9, 9 e 6 e é fatalmente claro.
2. Não mantive a configuração de foco ao passar o mouse sobre os produtos. Gostaria que a transparência fosse azul e as letras "ver produto para ser naranaja", como no módulo da loja na página principal.
3. Eu gostaria que a barra lateral esquerda mostrasse todas as categorias e subcategorias.
Como ele fez isso?
Merci pour ton aide
Olá Miguel
Faça a pergunta em um artigo sobre WooCommerce ou Divi. E é com prazer que lhe responderei. 😉