Como criar Páginas de categorias personalizadas no WordPress.org

Uma das grandes vantagens de se usar WordPress.org é que temos suporte para personalizar o que quiser em nossos blogs. Hoje vamos ver como personalizar as páginas de categorias. Existem várias maneiras de personalizar as páginas de categorias de seu blog, não existe o método mais eficiente ou o melhor, para cada caso é preciso usar uma das alternativas, então escolha qual vai ser a mais eficiente para você. Esta é uma ótima maneira de organizar o conteúdo do seu Blog e tornar a navegação e busca mais fácil para seu usuário.

Para entender melhor sobre as Categorias e marcadores de conteúdo do WordPress.org, recomendo que leia também:

• Qual a diferença entre Tags e Categorias no WordPress

É necessário algum conhecimento em HTML e CSS para usar este tutorial. Vou ensinar os “macetes” do WordPress.org, algumas coisas de PHP e um pouquinho de lógica de programação.

Antes de testar este tutorial lembre-se de realizar experimentos em um ambiente de testes, fora do seu blog de verdade. Desta maneira você evita que sua página fique fora do ar. Aprenda a testar seu blog dentro do seu computador:

• Simule que está migrando do Blogger para WordPress.org de graça em seu computador

Descubra o “ID” e o “Slug” de cada categoria de seu blog:

Antes de mais nada é necessário descobrir qual é o “ID” e 0 “Slug” das categorias que você deseja personalizar.

Cada categoria tem um “ID” e um “Slug” (que é uma versão amigável de URL da categoria). Estas duas informações são únicas em cada categoria, desta forma podemos usar elas para nomear novos arquivos ou programar com a finalidade de fazer com que o WordPress.org reconheça que aquela categoria tem um template diferente.

Para encontrar o ID ou o Slug da categoria é bem simples:

Faça o login em seu blog, vá para a sessão “Posts” e clique em “Categorias”. Nesta página podemos criar novas categorias ou consultar as existentes.

Slug: Logo que entramos no painel onde editamos e criamos as categorias é possível ver este campo.

ID: Clicando para editar a categoria teremos em nosso browser um link similar a este:

http://www.seublog.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=XX&post_type=post

Este numero que aparece é o ID da categoria.

Criar páginas “category-ID.php” ou “category-slug.php”:

Por padrão, vários temas já vem com uma página PHP chamada “category.php“, ela serve como template para abrir todas as categorias de seu blog.

Esta página não é essencial para o funcionamento do blog, então alguns temas podem vir sem ela, principalmente temas que tem a home exatamente igual as páginas de categorias, basta usar o “index.php” que ele abre as categorias, tags, resultados de busca e etc. Caso seu tema não tenha ela, podemos resolver isso copiando o arquivo “index.php” e dar o nome de “category.php” para o novo arquivo.

Estas páginas aceitam ter nomes diferentes para cada categoria, basta replicar a página “category.php” do seu tema e acrescentar no nome dela o “ID” ou o “Slug”.

Por exemplo, aqui no [Ferramentasblog] temos a categoria “WordPress“, desta forma como já vimos, podemos criar um arquivo com o nome de:

category-wordpress.php
ou
category-500.php

Assim quando abrir a  categoria “WordPress” teremos um template novo para ela.

Todas as categorias restantes usaram o “category.php” que é o padrão.

Lembrando que o Cabeçalho e o Rodapé da sua página vem dos arquivos “header.php” e “footer.php“, as modificações feitas no arquivo “category.php” são apenas para tudo que esta no “miolo” do blog.

Este método é muito usado quando queremos modificar uma infinidade de coisas em cada categoria, podendo realmente modificar este “miolo” do jeito que quiser, inserir novas sidebars, colocar banner em baixo do menu, usar cores e fontes diferentes etc.

Personalizar categorias com Tags Condicionais do WordPress (is_category)”:

Como o próprio nome já diz, uma tag condicional atribui uma condição para o elemento. Por exemplo: se a condição for a categoria “WordPress”, quando entramos na página desta categoria é exibido o resultado que foi programado para a condição “WordPress”.

A tag condicional para categorias chama-se “is_category“, traduzindo no pé da letra temos “é_a_categoria“, então quando for esta categoria teremos o resultado desejado. Pode parecer complicado porque faz parte de lógica de programação, porém na prática é simples de ser usado.

Aqui também vamos usar o “ID” ou o “Slug” da categoria, entretanto podemos usar isto em qualquer lugar do tema, não apenas dentro das páginas “category.php“.

Veja como funciona a condicional:

<?php if (is_category('ID OU SLUG DA PRIMEIRA CATEGORIA')) { ?>
Resultado da primeira categoria escolhida!
<?php } elseif (is_category('ID OU SLUG DA SEGUNDA CATEGORIA')) { ?>
Resultado da segunda categoria escolhida!
<?php } else { ?>
Esta condicional apresenta o resultado genérico que não se encaixa nos dois primeiros!
<?php } ?>

Podemos ter quantos “elseif” forem necessários para as categorias que necessitamos modificar.

Dentro do resultado ai podemos inserir HTML ou até mesmo CSS. Lembrando que lugar de estilo CSS é dentro do <head> de seu HTML.

• Algumas dicas de como validar e corrigir seu Blog no W3C

Por exemplo podemos usar este código dentro do “header.php” do tema para chamar atribudos CSS diferentes. No exemplo aqui vou mostrar como ter uma imagem de background diferente para cada categoria:

Em cima de </head> podemos colocar o seguinte código:

<?php if (is_category('wordpress')) { ?>
#body {
background-image:url(<?php bloginfo('template_url'); ?>/images/wordpress-bg.jpg);
}
<?php } elseif (is_category('blogger')) { ?>
#body {
background-image:url(<?php bloginfo('template_url'); ?>/images/blogger-bg.jpg);
}
<?php } else { ?>
#body {
background-image:url(<?php bloginfo('template_url'); ?>/images/background-padrao.jpg);
}
<?php } ?>

Adicionamos aqui CSS para uma imagem de background diferente para a categoria “WordPress”, outra para a categoria “Blogger” e por final indicamos a imagem que será o background das outras páginas do blog.

Podemos usar as Tags Condicionais do WordPress.org da maneira que acharmos melhor; são infinitas as possibilidades também para a utilização deste método.

Aproveitei a oportunidade para esclarecer a dúvida de nosso leitor Maycon Mazzo, que tinha perguntado como mudar o background das páginas de categorias.

Artigos relacionados a personalizar o WordPress.org:

• Personalize sua Admin Bar no WordPress.org
• Personalizar página de login e admin do WordPress.org
• Destacando resultados de busca no WordPress.org

Fonte e outros exemplos em inglês:

• Category Templates – WordPress.org Codex