Já recebi alguns emails e respondi alguns tópicos no fórum sobre como ter um background/banner/imagem diferente em cada categoria do WordPress. Como é algo simples e que pode ter muitas utilizadades resolvi fazer este rápido tutorial explicando o passo-a-passo. Para exemplificar utilizarei o tema Mystique, que além de ser muito bom possui um background que poderemos utilizar neste exemplo.
Antes de colocarmos a mão na massa vamos primeiro explicar a teoria. No WordPress existe um recurso chamado Condicional Tags que nos permite realizar uma tarefa apenas se atender uma condição. Por exemplo, exiba este menu apenas se a página for a inicial. Com o tempo é fácil perceber o poder que as condicionais possuem e a quantidade de coisas que se podem fazer com elas, principalmente em termos de personalização.
Então vamos cair em campo, no CSS do tema Mystique há uma id chamada page que define o background.
#page{background:transparent url(images/header.jpg) no-repeat center top;}
A idéa é criar uma id para cada categoria e claro, um background para cada uma também, para isso acrescentaríamos mais algumas linhas de código ao CSS.
#page{background:transparent url(images/header.jpg) no-repeat center top;}
#page1{background:transparent url(images/header1.jpg) no-repeat center top;}
#page2{background:transparent url(images/header2.jpg) no-repeat center top;}
#page3{background:transparent url(images/header3.jpg) no-repeat center top;}
Não esqueça de criar as novas imagens que serão usadas como background e fazer o upload, neste exemplo seriam as imagens header1.jpg, header2.jpg e header3.jpg. Feito isso é hora de usarmos as codicionais do WordPress e dar o pulo do gato. No arquivo header.php, exatamente na linha 30, existe o código:
<div id="page">
Empregando as codicionais nós iremos fazer com que o valor da id “mude” de acordo com a categoria que esteja sendo exibida.
<?php if (is_home()) { ?>
<div id="page">
<?php } else if (is_category('noticias')) { ?>
<div id="page1">
<?php } else if (is_category('novidades')) { ?>
<div id="page2">
<?php } else if (is_category('geral')) { ?>
<div id="page3">
<?php } ?>
Interpretando o código: Se a página for a home faça id=”page” e por consequência o background exibirá a imagem header.jpg, caso a página seja da categoria notícias faça id=”page1″ e a imagem do background exibirá a imagem header1.jpg e assim por diante.
Simples não? Se você der uma olhada na página do Codex referente as Condicional Tags verá que existe dezenas de opções. Você poderá utilizar para os mais diversos fins, por exemplo, exibir anúncios de DVD’s apenas na categoria filmes, ocultar o menu lateral das páginas e posts, etc.
Pingback: ericooliveira
Pingback: PoolDigital
Pingback: marcelo_torres
Pingback: Dicas Blogger
Puts, Érico, parece que você leu meus pensamentos!
Estava precisando disto há um bom tempo para disponibilizar banners diferentes no topo de cada página de Categoria no blog de um cliente.
Certamente vai me ser muito útil a dica!
Muito obrigado por compartilhá-la conosco!
At last! Someone who udensrtands! Thanks for posting!
Pingback: Alan Niemies
Há um outro modo também que pode ser mais fácil (principalmente para quem tem várias categorias diferentes).
Ao invés de usar vários ifs, é só atribuir o nome da classe com a variante do ID da Categoria
<div id="categoria”>
Então é só preencher na css as classes correspondentes….. ou se quiser até evitar usar o css:
<div style="/wp-content/themes/NOMEDOTEMA/img/background.jpg”>
Não sei se escrevi tudo corretamente, mas a teoria é essa… Ao meu ver é uma forma que fica mais simples e flexível.
Valeu
Hmmm as tags do PHP nao foram renderizadas no meu comentario……
No primeiro exemplo me referia a:
<div id="categoria”> (sem os espaços nas tags do php)
No segundo
background: URL(../_img/bg.gif) repeat-y 50%;}
<div style="background-image: URL(/wp-content/themes/NOMEDOTEMA/img/background.jpg)”> (sem os espaços nas tags do php)
ok, desisto. Usa o “get_category_ID()”. =/
Pingback: Gustavo Henrique ?
Pingback: Michael Davis
Bom, não coloquei em prática (ainda!) mas acho que vai funcionar. Há tempos venho tentando personalizar por categoria e essa parece ser uma das soluções. Só que eu queria ir além: um CSS para cada lugar do site. O que vc acha? Será que dá pra fazer isso com as Conditional Tags utilizando o raciocício acima? Ou teria outro jeito? Ou vai via if convencional mesmo??
Pingback: ericooliveira
Pingback: Belenos Govannon
Olá,
parabéns pelo post amigo.
Pingback: João Eduardo
Pingback: Prazer! Marcus Silva
Pingback: Veridiana Serpa
RT @marcussilva omo ter um background por categoria no @wordpress http://1l.to/p24 #tuto #code #php
Pingback: Twitteiro Louco
é possivel carregar um novo estilo?
Demais esse post. Fiz no meu site e deu tudo certo. Coloquei uma nova imagem no fundo de um tipo de categoria e ele fica como um blog dentro do meu blog. Agora pergunto, como fazer com que os novos posts que criei apareça apenas nessa categoria e não no blog principal. Será que deu pra entender? Deixa eu explicar melhor. Meu blog principal é o http://www.fernandolima.fot.br/blog e criei uma categoria à parte junto com essa mudança do background pro endereço http://www.umpapo.com Como faço pra que os posts que faço dentro dessa categoria que o umpapo.com redireciona não entrar no fernandolima/blog que é o meu principal? tem como?
Resolveu meu problema, valeu!
Não funciona aplicando em <body>? tentei de todas as formas mas não deu.
<?php if (is_home()) { ?>
<body>
<?php } else if (is_category('categoria1')) { ?>
<body2>
<?php } else if (is_category('categoria2')) { ?>
<body3>
<?php } else if (is_category('categoria3')) { ?>
<body4>
<?php } else if (is_category('categoria4')) { ?>
<body5>
<?php } ?>
em vez de usar is_category usem in_category ai serve para o post tbm da categoria
Usando a chamada que o próprio wordpress dá, não precisa nem criar esses ids aí.
Por exemplo, no tema que eu tenho aqui, o body sai sempre com o nome da categoria <body class="category-nome-da-categoria">
Em php está assim body php body_class(); (para funcionar, lembre de acrescentar o código php certo, com os < > e ?)
Dessa maneira, é só ir para o css e fazer a chamada por herança
Mas alguém aí sabe de algum plugin que permita edição pelo admin?