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.
