Como ter um background diferente em cada categoria

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.

Personalizando o Prologue

O tema Prologue é totalmente baseado no modelo do Twitter. Desenvolvido pela Automattic, traz o look and feel do mais famoso serviço de microblogging da atualidade para o WordPress de maneira exemplar.

Recentemente, precisei utilizar o Prologue num projeto pessoal, e ao por a mão na massa, senti falta de alguns detalhes. Com um pouco de pesquisa, e alguns plugins e códigos, consegui deixá-lo do jeito que eu queria. E como WordPress é compartilhamento de informações, este post explicará, em detalhes, como turbinar o Prologue.

Minha primeira necessidade era restringir o acesso a pouquíssimas pessoas, todas com poder de publicação. Num primeiro momento, pensei em tascar uma senha no diretório em que o WordPress foi instalado, via servidor. Mas depois, pesquisando um pouco, descobri o plugin Login Configurator. Além de permitir personalizar o formulário de login do sistema, ele consegue restringir a leitura do blog inteiro (ou de partes dele) a membros, ou seja, pessoas cadastradas no WordPress. Exatamente o que eu precisava. O Juarez gravou uma vídeoaula sobre esse plugin; vale a pena assisti-la.

Diretório protegido, chegou a hora de instalar o Prologue. Nesse ponto, nenhuma novidade: a instalação é exatamente idêntica à de qualquer outro tema, e graças à forma como esse tema foi escrito, ele é ready to use, dispensa quaisquer configurações/edições posteriores. Só que, novamente, faltam alguns detalhes relacionados às categorias. Dois, para ser mais exato:

  • Seletor de categorias de posts no formulário da home;
  • Indicação das categorias às quais os posts pertencem, nos mesmos.

O primeiro ponto demanda algum trabalho, pois é preciso editar dois arquivos do tema: index.php. post-form.php e style.css. Felizmente, uma alma caridosa fez o “serviço sujo” de fazer essas modificações e compartilhar o caminho das pedras com o mundo (“WordPress é compartilhamento de informações”, lembrem-se sempre). Para quem manja inglês, a receita de bolo está aqui. Para quem prefere o bom e velho novo português, siga os passos abaixo:

Abra o arquivo post-form.php, e acrescente o código abaixo no local onde deseja inserir o menu dropdown das categorias:


Agora, abra o index.php, vamos trabalhar nele. Identifique a seguinte linha:

$tags = $_POST['tags'];

Imediatamente abaixo dessa, copie a seguinte linha:

$category = $_POST['post_category'];

Ainda no mesmo arquivo, encontre essa linha:

'post_content' => $post_content,

E imediatamente após ela, copie essa:

'post_category' => $category,

Por fim, abra o style.css. No final do arquivo, copie isso:

#postbox select {
font-size: 1.2em;
padding: 2px;
border: 1px solid #c6d9e9;
margin-left: 70px;
}

Pronto, agora temos categorias no formulário da home page. Aproveite que está com o style.css aberto, e aumente um pouquinho a altura da textarea do post. Para tal, basta editar o valor height: 50px; do ID #postbox textarea#posttext. Particularmente, uso 150px nessa área. O resultado final é esse:

Prologue (com categoria).

Prologue (com categoria).

Falta ainda a questão da indicação das categorias nos posts. Por padrão, o Prologue só trabalha com tags, mas não é nada que possa ser mudado.

As alterações abaixo devem ser feitas nos arquivos index.php e single.php. Localize essa parte em ambos:

Substitua-a por essa linha:

Categoria: .

Muito bem! Agora temos categorias e tags indicadas em cada post.

Para finalizar, dois plugins que considero muito úteis nesse tipo de blog/microblog: um que mostra usuários ativos no momento, e outro que lista os últimos comentários.

O plugin que mostra os usuários online no momento é o WP-UserOnline, do Lester Chan. Após ativá-lo e traduzi-lo na área administrativa, o código invocatório que utilizo é o seguinte:

:

Ele retorna a quantidade de membros online, e dá os nomes de cada um.

O outro plugin é o Simple Recent Comments, que mostra os últimos comentários de maneira bem simples, numa lista. Após a ativação, o código invocatório é o seguinte:

Ultimos Comentarios

','

'); } ?>

Traduzindo-o: o número 7 é a quantidade de comentários que aparecerá; o 120, o limite de caracteres de cada comentário; o trecho longo que inclui o título (“Últimos Comentários”), é o que vem antes da lista de comentários, que por sua vez é gerada automaticamente, e depois disso, vem o fechamento do bloco.

Essas dicas deixam o Prologue mais esperto e completo, mas não é nada que chegue perto do P2, nova versão do Prologue em desenvolvimento (veja a demo em ação). Em poucas palavras? Está ficando fenomenal. Dê uma olhada no vídeo demonstrativo liberado pela Automattic:

O anúncio foi feito no início de março, mas até agora o novo tema não foi lançado. Caso queira aguardá-lo, é uma boa pedida. Se a utilização do Prologue é urgente, as modificações mostradas neste post ajudarão bastante.

WordPress usado para fins nãotradicionais (sugestões e exemplos)

Que o WordPress é versátil, não há dúvidas. Mas até onde o poder de adaptação do sistema pode ir? Dois bloggers gringos fizeram sessões pesadas de pesquisa e brainstorms, e compilaram listas interessantíssimas com exemplos, sugestões e dicas de sites nãotradicionais baseados em WordPress:

muita coisa boa, ideias inusitadas e úteis, as quais nem com muito esforço conseguira imaginar. Exemplos? Log de bugs de software, catalogador de CDs, DVDs e outras coisas do tipo, clone do Delicious, só para citar alguns. Há, também, usos nãotradicionais mas, por outro lado, mais ortodoxos, como lista de contatos, wiki e quadro de empregos.

Ótimas listas para iniciar novos projetos ou turbinar os já existentes.

Tema para WordPress baseado no Plurk

Conhece o Plurk? É, talvez, o concorrente mais forte do Twitter na briga dos microblogs. Surgiu na metade do ano (mais ou menos), ganhou alguns users do Twitter, e se consolidou como uma alternativa real e viável. O grande diferencial do Plurk é a apresentação dos updates, numa linha do tempo, e a possibilidade de criar threads, como uma entrada de blog convencional, com respostas diretas dos seus contatos.

Um maluco cara, cujo apelido no Plurk é @kupy, deicidiu que queria o mesmo visual do serviço de microblog em seu blog. Detalhe: blog este movido a WordPress. Mostrando (mais uma vez) o quão nosso sistema de blogs favorito é versátil, ele puxou as mangas pra cima e fez um tema rigorosamente igual ao Plurk, inclusive com a linha do tempo, que no caso, exibe os posts. Muito JavaScript e CSS, e no final, ficou bastante parecido. Confira:

Tema do Plurk para WordPress.

Tema do Plurk para WordPress.

Três detalhes:

  • Fonte azul em fundo preto? Vou te contar…;
  • Momento FAIL! do tema: o box que deveria exibir a última “plurkada” do autor está com problemas técnicos nesse momento;
  • Não, o tema não está disponível para download (ainda).

Via Microblink.

Tela de edição personalizável no WordPress 2.7

Às vésperas do lançamento da versão final do WordPress 2.7, já é hora de comentar as novidades. Não as evidentes, como o novo design do painel administrativo, mas as menores, que às vezes passam batidas, mas que, quando descobertas, fazem toda a diferença.

Uma novidade muito legal é a possibilidade de personalizar a área de edição do sistema, aquela na qual escrevemos nossos posts. No passado, tínhamos a área do post propriamente dito, e na lateral direita, as opções complementares. A partir da versão 2.5, muitas dessas opções foram jogadas para a parte inferior da tela. Agora, na 2.7, cabe ao usuário escolher o melhor posicionamento.

Os boxes, ou seja, as caixas de opções, podem ser movimentadas livremente agora. O esquema lembra o funcionamento dos widgets dos temas, e é bastante prático. Basta clicar no título de um box segurar o botão, e então arrastá-lo para onde quiser. Tanto a lateral direita, quanto a parte inferior da área de digitação do post, aceitam os boxes.

Exemplo de box sendo arrastado.

Exemplo de box sendo arrastado.

Na parte superior da janela, há outra feature que ajuda a organizar e deixar a área de publicação adequada aos seus hábitos. Trata-se de um “selo”, chamado Screen Options.

Clicando no “selo” Screen Options, várias caixas de seleção aparecem. Cada uma delas refere-se a um box existente embaixo, e, por padrão, todas vêm marcadas. Desmarcando-as, os boxes correspondentes somem, como mágica!

Screen Options: remova o que você não usa.

Screen Options: remova o que você não usa.

Muita gente não usa todos esses boxes, e as Screen Options são destinadas justamente a essas pessoas. Eliminando caixas desnecessárias, a tela fica menos abarrotada, e as opções restantes ficam mais acessíveis, diretas. As Screen Options aparecem em outros locais do painel administrativo, como no Dashboard (que também conta com movimentação livre de boxes) e adição de links.

O vídeo abaixo, feito por Mark Jaquith, da Automattic, mostra na prática o que escrevi acima:

Essas são apenas algumas das novidades do WordPress 2.7. Há muito mais, e na medida do possível, eu e o Érico as mostraremos a vocês.