web-development-kb-pt.site

Estilos personalizados para páginas de categoria

Existe uma maneira de os estilos em uma página aparecerem de maneira diferente para determinadas categorias, ao exibir uma página que seja apenas dessa categoria?

categories
1
GSto

A @EAMann tem uma ótima resposta se você quiser layouts diferentes para diferentes categorias. OTOH se você quiser apenas alterar o CSS para, por exemplo, ter uma cor de fundo diferente para cada categoria , então você verá que a maioria dos temas incluirá o slug de categoria como um CSS class no elemento <body> e/ou possivelmente outros elementos HTML que são produzidos pelo tema. (E mesmo que o seu tema não seja, você pode sempre adicionar essa funcionalidade).

Por exemplo, o tema TwentyTen faz exatamente isso; para o seguinte URL:

http://example.com/category/category-1/

Aqui está o aspecto do elemento <body>:

<body class="archive category category-category-1">

Sabendo o acima, você poderia adicionar os seguintes estilos ao arquivo style.css do seu tema para ter fundos de cores diferentes para cada página (estou sendo muito simplista aqui, é claro; seu CSS real certamente seria mais sofisticado):

/* style.css */
body.category-category-1 {
  background-color: red;
}
body.category-category-2 {
  background-color: green;
}
body.category-category-3 {
  background-color: blue;
}

Tudo o que você realmente precisa fazer é descobrir se o seu tema faz isso ou não é ver a fonte nas páginas de interesse da categoria e procurar por sua categoria slug.

Use um tema infantil

É claro que você provavelmente não quer modificar o style.css do seu tema; você provavelmente quer criar um Tema infantil em vez disso. Aqui estão algumas respostas onde eu falo sobre temas infantis:

Note que nem todos os temas suportam temas infantis, sendo a Tese um exemplo notável. No caso desses temas, você terá que pesquisar mais sobre como eles são estendidos.

4
MikeSchinkel

Se desejar, você pode ter um modelo diferente para cada categoria com seu próprio conjunto de definições de estilo. Em seguida, você pode estilizar a página de forma diferente para determinadas categorias, mas somente ao exibir uma página que seja apenas dessa categoria.

Apenas use isso no seu tema:

  1. categoria-slug.php
  2. categoria-ID.php
1
EAMann

O que Eric disse. Mas se você só quer mudar o estilo, e não a marcação, há um jeito mais fácil. Contanto que seu tema inclua a chamada body_class () na tag de corpo de abertura, WP adicionará todos os tipos de ganchos de CSS úteis à sua página. A marcação padrão adicionará as classes seguintes ao elemento body em um arquivo de categoria:

  • arquivo
  • categoria
  • lesma de categoria

que você pode estilizar como quiser. Muitos frameworks de tema adicionarão ganchos ainda mais úteis à sua classe corporal, embora alguns deles não possam ver os casos de uso do mundo real.

0
goldenapples