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

FBlogHost - Hospede seu Blog

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:

É 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:

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.

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:

Fonte e outros exemplos em inglês:

FBlogHost - Hospede seu Blog

20 Comentários

  1. Velho, Foda!
    teve a manha demais, funcionou do jeitinho que eu queria e super simples!
    se ao menos tivéssemos mais tutoriais BONS pela net né?
    Vlw!!

    Responder

  2. Olá Cláudio
    Gostaria que me desse uma ajuda, pois comprei o livro do Marcos via internet, pois estou em Portugal, e não consegui fazer o que queria.
    Comprei no wordpress um domínio(?), que me custou 12 euros + 8 euros.
    Criei um blog que se chama despertarconsciencia.org, aliás o nome original despertarconsciencia.wordpress.com, mas como está pago o espaço até junho de 2012, poude colocar o .org.
    Contudo, e porque pretendia um blog/site com mais potencialidades (menus e submenus), comprei um tema no Themesforest, para wordpress, que se chama Karma 2.0.
    Mas agora não sei como hei-de colocar o tema no wordpress e começar a trabalhá-lo. Não encontro maneira.
    Não sei se tenho que comprar outro dominio e hospedagem para blog/site, ou se é suficiente o que tenho no WordPress.
    Se for necessário comprar, seguirei o conselho do Marco, e comprarei o GoDaddy.com. Se o do wordpress for suficiente diga-me o que fazer se faz favor, para colocar o Tema que comprei no ambiente do WordPress.
    O link do tema que comprei é o seguinte:
    http://themes.truethemes.net/Karma-HTML/index-jquery-2.html
    Agradeço-lhe encarecidamente a ajuda e, se for necessário, pagar-lhe-ei os honorários que julgar convenientes, para que me coloque o tema a funcionar no wordpress, ou noutra hospedagem, se fõr impossível ou não tiver interesse, ou fôr mais rentável em outro dominio, diga-me o que devo fazer.
    Antecipadamente grato.
    Luis Morais

    Responder

  3. Boa tarde, estou tentando criar as páginas category-slug para duas categorias mães diferentes….mas, nao estou conseguindo…Explicando melhor. Tenho duas categorias (produtos e parceiros) e cada uma possui sub-categorias. Preciso que essas sub-categorias fiquem listadas em um menu lateral, e sua informação especifica aparecendo no miolo do template. Mas, apenas se deixar a informação na Category.php que ela funciona! Como eu faço isso? Tenho que colocar algum codigo na category.php que chame os templates category-produtos.php e category-parceiros??? Alguém pode me ajudar? valeu

    Responder

  4. Sanches, excelente tutorial! Acabei de criar meu 1o blog no wordpress e meu segundo blog deve ser importado do blogger. Com certeza, será de muita ajuda aplicar essas orientações,pois quero personalizar bem meus blogs. Aliás, destaque também para os artigos sobre simulação do wordpress no pc e migração do blogger para wordpress. 100%!

    Responder

  5. Gostei muito do site cara… Parabéns…
    Você conseguiu em um simples tutorial solucionar um problemas
    que venho tentando resolver a meses 😀

    Parabéns… Vou compartilhar sua página…

    Responder

  6. Muito bom, porém queria saber de uma coisa, eu defini uma página para mostrar somente algumas categorias, e queria fazer com que a outra página exibisse todas as restantes, pois se futuramente criar uma nova categorias não precisar alterar o código. Obrigado

    Responder

  7. Boa noite Sanches, estou tentando aplicar um estilo específico para as páginas do meu blog, porém não estou conseguindo.

    Meu header.php está assim:

    Testando tema em WordPress
    <link rel="stylesheet" type="text/css" href="” />

    antes de fechar o eu acrescentei o código:

    #content{
    width: 965px;
    height: 1070px;
    margin: 20px auto auto auto;
    font-family: Arial;
    }

    ENTRE OUTRAS ESTILIZAÇÕES ESPECÍFICAS DESSA PÁGINA

    No entanto, tais especificações do CSS não estão sendo aplicadas, aparece meu código digitado na página ao invés de atribuir tais estilizações. Lembrando que quero estilizar PÁGINAS e não categorias. Já acrescentei a url da minha página como “biblioteca”. Aguardo resposta! Obrigado

    Responder

  8. Fiquei com uma dúvida em relação a esse bloco de código:

    Resultado da primeira categoria escolhida!

    Resultado da segunda categoria escolhida!

    Esta condicional apresenta o resultado genérico que não se encaixa nos dois primeiros!

    Que código eu devo inserir no lugar dos textos: “Resultado da primeira categoria escolhida!” e “Esta condicional apresenta o resultado genérico que não se encaixa nos dois primeiros!” para exibir os posts cadastrados nas respectivas categorias?

    Obrigado!

    Responder

  9. COMO CRIAR UMA PÁGINA DE UMA DETERMINADA CATEGORIA EM SEU MENU

    Só para ajudar, eu queria acrescentar uma alternativa simples apenas para quem quer criar um item no seu menu que linka para uma página que apareça posts de uma determinada categoria:

    Você vai em Painel/Aparência/Menu e adiciona um link personalizado no seu menu dessa forma:

    http:// seusite. com. br/?cat=ID DA CATEGORIA

    Sei que é um problema muito básico, mas tem muita gente que quer apenas isso e não sabe como fazer.

    Responder

  10. Cara vlw mesmo, estava procurando exatamente isso para o meu blog e finalmente achei, ufa vlw mesmo ja virei seu fã, irei concerteza passar muito tempo aqui no seu blog rss

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.