O WordPress é um dos sistemas de conteúdo de Blogs mais usados na Internet. Sua comunidade de usuários é grande, e as possibilidades de personalização do Blog são gigantescas. Há tembém muita documentação sobre ele na Internet,e um codex, que serve de base de conhecimento, onde os usuários mais experientes documentam o WordPress. É uma boa fonte de consulta, mas é em inglês apenas, e a primeira vista pode parecer um tanto confufo, afinal não é um manual clássico. Os usuários brasileiros tem como ponto de encontro e informação uma lista de discussão e o wordpress.com.br, que, infelizmente, desde janeiro se encontra sem movimento.

Eu sou um usuário na média preguiçoso, mas me sinto impelido a escrever um pouco sobre como deixar o WordPress com a cara do usuário. Alerto desde já que não sou expert em nada, apenas um “escovador de bits”, que tem como hobby aprender a fazer coisas por conta própria. Vou tentar ser o mais didático possível, e corro o risco de ser chato ou de repetir as coisas, mas acho que assim, o artigo, apesar de ficar mais pesado, acaba por servir a mais gente. Os programas mostrados neste artigo serão todos Open Source, e os exemplos serão feitos em ambiente linux, mas no Windows ou Mac as diferenças ficam sempre no nível da forma, não do conteúdo.
Considero que você já tem o WordPress intalado e rodando direitinho, seja localmente, seja em um servidor externo. Há um bom tutorial sobre a instalação no blog do Rodrigo Muniz.

O WordPress vem por padrão com dois temas instalados o default e o classic. Existe no painel de controle do WordPress a aba Presentation, onde podemos escolher qual Tema iremos usar, clicando no nome do tema.

Existem centenas de temas disponíveis para download, basta procurar no Google as palavras “WordPress Themes” e voilá, há temas para todos os gostos.

Vamos aprender a instalar um tema… Procure um tema da sua escolha, só tenha o cuidado de verificar se este tema é feito para a versão do wordpress que você está usando. O arquivo geralmente virá compactado em formato zip. Caso tenha uma conta shell, dê upload do arquivo zipado e descompacte lá dentro, para ganhar tempo. Descompacte localmente e dê o upload da pasta inteira para a pasta wp-contents/themes. Abra o browser, vá em presentatione e escolha o tema. Veja a sua página! De cara nova!

E lá vai o passo a passo! Uma lista de temas pode ser encontrada na página de temas do codex do WordPress. Escolha o tema Connections, da Patrícia Muller, uma brasileira, madrinha da comunidade WordPress. Dê O download do tema e descompacte para uma pasta qualquer.

Para dar upload do tema para seu site, depende do sistema opracional e do programa que vocÊ vai usar. No Ubuntu, eu uso o gerenciador de arquivos Nautilus para mapear o FTP, e assim uso o servidor como uma pasta qualquer. No windows, eu recomendo o SmartFTP, gratuito para uso não-comercial e no Mac o CyberDuck, de código aberto. Acredito que no Mac e no Windows também seja possível fazer uma integração como no linux, mas nunca tentei.

No Ubuntu o passo a passo é fácil:

Vá no navegador de arquivos e na aba Arquivo, selecione Conectar ao servidor. A janela seguinte se abrirá:

Escolha em Tipo de Serviço a opçao ftp (com login) e complete os dados que a sua hospedagem lhe informou na inscrição. Um ícone se criará no seu desktp e ao clicar nele você estará dentro do servidor ftp do seu blog.

Encontre o diretório do wordpress e entre nos seguintes diretórios: wp-contents, themes. Lá você verá as pastas dos temas default e classic, que estão instaladas por padrão. Copie a pasta do tema Connections para dentro da pasta themes, de modo que agora teremos 3 pasta dentro dela: default, classic e connections. Vá até seu blog, e escolha a aba presentation. Voilá, agora é so clicar em connections e seu blog estará de roupagem nova, com o tema Connections da Patrícia.

Mas se você quiser mudar a cara do tema? Para que as cores de fundo, dos links, ou das fontes sejam outras? O WordPress te permite modificar tudo e criar seu tema personalizado. Não é um processo trivial, e primeiro é preciso entender um pouco o que é uma página da Web… Vamos tentar nivelar o conhecimento para que fique mais claro e mais fácil entender o que você vai precisar fazer. Vou incluir alguns links para a Wikipedia e outras fontes de conhecimento para quem quiser estudar um pouco mais a fundo os conceitos.
O seu navegador, simplifivando ao máximo, quando vai até uma página qualquer, procura um arquivo no formato HTML, e converte uma série de instruções (ou tags) HTML em letras grandes ou pequenas, no formato que estamos acostumados a ler. Quando você aponta para o site camelomanco.com, na verdade o navegador por padrão aponta para um arquivo de índice deste endereço, chamado geralmente de index.html ou index.htm, e o lê. Para ver a verdadeira cara do camelomanco, usando o Firefox, é só clicar Control-U, e você terá acesso ao código fonte HTML da página principal.
Ou seja, quando você lê o Título do seu blog, seu navegador leu alguma coisa como:

<h1>Camelo Manco<h1>
e traduz para você, automaticamente, em :

Camelo Manco

As primeiras páginas na Internet eram todas feitas assim, e quando era preciso escrever alguma coisa a mais, era preciso editar o arquivo index.php e colocar lá na unha mesmo. Era a época das páginas estáticas. Com o passar do tempo se criaram formas de criar páginas dinãmicas, que é exatamente o caso dos blogs de hoje. O wordpress usa uma linguagem chamada PHP para criar páginas dinãmicas. Se você reparar, não há no diretório principal do seu site WordPress um arquivo index.html, mas há um arquivo index.php. Quando o navegador procura o index.html, a máquina servidora, que hospeda o blog, executa o arquivo index.php. Ao executar este arquivo, a máquina gera um index.html, e envia para seu browser uma página fresquinha, dinamicamente criada. Cada vez que alguém entra no seu site, uma nova página é criada. Por isso, a cada post a página inicial muda, dinamicamente. No seu próprio blog você pode conferir com o uso de Control-U. O arquivo index.php do wordpress começa com o seguinte comando:

< ?php get_header(); ?>

uma função do wordpress que chama arquivo header.php, que por sua vez contem a função:

<h1 id="header" ><a xhref="< ?php bloginfo('url'); ?>/">< ?php bloginfo('name'); ></a><h1>

que diz ao servidor o seguinte:”Pegue no banco de dados do blog em wordpress o nome e o endereço deste blog, e mostre, como resultado final”:

Camelo Manco

Vai aí então um resumão do que se viu até aqui:

1) HTML -> A linguagem que seu navegador lê, e tranasforma naquilo que chamamos de página internet

2) PHP -> Linguagem de programação com capacidade de se comunicar com um banco de dados e que gera arquivos HTML.

Está certo, mas e o WordPress com isso, e a cara do meu blog com isso? Bem, o WordPress é escrito em PHP, e gera páginas HTML. O HTML, também no início da Internet, era usado para colocar conteúdo, ou seja seu post, e para definir a aparência deste conteúdo. Isso não era prático, pois cada vez que tinhamos que mudar uma cor ou uma fonte, por exemplo, era preciso mudar esta informação em vários pontos do arquivo html. Foi então desenvolvida linguagem CSS, cuja única função é definir os estilos que serão usados pelas páginas HTML.

Assim eu posso definir atributos diferentes para diferentes “objetos”. Eu declaro, por exemplo, que cada parágrafo de um novo post, terá um espaçamento de tantos pontos, as letras serão pretas, com fundo marron. Que minha barra lateral será sempre de um dado tamanho, ou que seu tamanho varia de acordo com a resolução do browser. Eu escrevo estas coisas uma vez, e daí em diante, o próprio navegador cuida de colocar cada coisa em seu lugar. Inteligente, não é?

O WordPress usa tão bem esta ferramenta, que, ao contrário de outros sistemas e páginas na Internet se você visualizar seu blog sem o uso do CSS (no firefox é bem fácil, é só ir em Exibir->Estilos de Página-> Nenhum estilo), tudo continua arrumadinho, tirando apenas a cosmética, e mantendo o conteúdo. O CSS pode estar presente na própria página HTML como pode ser definido através de um arquivo externo, com extensão css. No caso do WordPress, o arquivo se chama style.css, e geralmente se encontra na pasta do tema em uso pelo blog.

Agora vou tentar explicar alguns conceitos que muitas vezes confundem a cabeça do pessoal… Qua a diferença de estilo (style), tema (theme) e template?

1) O estilo é definido pelo arquivo style.css, que diz as cores, os espaçamentos, as fontes, entre outros atributos do seu blog. É escrito em linguagem CSS.
2) O template, é um arquivo PHP que serve para gerar uma página, ou parte de uma página, e aonde o estilo vai ser aplicado. O Template define que informações, por exemplo, vou publicar em cada post, e em que ordem: autor em cima ou abaixo do título do post, hora e data ou só data, haverá ou não um campo para comentários? Os templates são formados por comandos do wordpress e são escritos em linguagem PHP.
3) Um tema é um conjunto de templates, de estilos e de imagens (header, background, bullets, etc), empacotados juntinhos.

Nada melhor que ver isso tudo na prática não é? Então vá no menu presentation do WordPress e escolha a aba Theme Editor. Lá você poderá constatar ao lado direito o conjunto de arquivos que compõem um Tema, e nele estará contida uma série de arquivos .php e .css. Os arquivos .php são os templates, e os arquivos .css (na maior parte dos temas é um arquivo único) o estilo.

Tendo na cabeça estes conceitos bem claros, o próximo artigo será sobre como modificar efetivamente o estilo de um tema.