Publicado em 29/12/2009
Como customizar temas no Wordpress
Todos já devem saber o quanto é fácil ter um blog, seja com domínio próprio ou não. Diversas ferramentas são criadas e disponibilizadas gratuitamente na internet todos os dias. Dentre estas ferramentas as mais conhecidas são os Sistemas de Gerenciamento de Conteúdo.
Mas não basta apenas criar seu blog, a criação de um layout singular ajuda a destaca-lo perante os demais.
Observação: esse tutorial usa o Wordpress como exemplo, entretanto a maior parte das dicas usadas aqui servem para personalização de templates de outras ferramentas como Joomla e Drupal.
Para customizar temas no Wordpress é necessário:
- Noções básicas de HTML
- Noções básicas de CSS
- Noções básicas em algum programa gráfico (Photoshop, Fireworks, Illustrator, etc)
Índice do Tutorial
Download do Template
No site oficial do Wordpress você encontra centenas de temas gratuitos para baixar, acesse http://wordpress.org/extend/themes/ . Você deve clicar em download no tema escolhido. Após concluir acesse o ftp de seu site e envie para a pasta themes, dentro de wp-content.
Para esse tutorial eu escolhi o tema jQ.
Template Wordpress jQ
Agora ative seu tema no menu Appearance > Themes (Aparência > Temas) do administrador.
Ative o tema Wordpress no administrador
Inserindo imagem no Template
Muitos dos temas possuem uma boa área no seu topo para ser explorada. Com alguns conhecimentos gráficos, seja no Photoshop, Fireworks ou Illustrator você pode criar uma arte para usar no blog. Veja a imagem criada para este tutorial (assunto: os bizarros):
Arte Gráfica para inserir no topo do tema
Editando arquivos HTML e CSS
No wordpress o arquivo responsável pelo topo do blog é o header.php. Para fazer minha personalização apenas substitui o título do blog pela imagem criada. Veja:
Inserindo a imagem do topo (arquivo header.php)
Agora é a vez de mudar a cor do plano de fundo e dos links, para isso é necessário editar a folha de estilos (CSS). Caso não saiba do que se trata, recomendo estudar o básico pelo site do Maujor.
Para mudar as cores no seu arquivo CSS basta saber o código RGB dela. Para isso você precisará do auxílio de uma paleta de cores. Para quem não trabalha com programas gráficos recomendo o site Color Blender para encontrar o valor RGB da cor que deseja.
Veja como formatar as cores via CSS:
color:#RRGGBB; (para cor do texto)
background-color:#RRGGBB; (para cor do plano de fundo)
Para essa customização alterei o plano de fundo para a cor azul marinho escuro (background:#040116;) e a cor dos links para um tom de vermelho (color:#aa182b;). Veja:
Alterando o CSS do template (arquivo style.css)
Dica: se quiser alterar um plano de fundo já existente no seu template sem precisar editar o HTML ou CSS, basta salvar sua nova imagem com o mesmo nome e extensão (jpg, gif ou png) da imagem original e substitui-la.
Resultado
Veja abaixo a comparação do template original e do resultado:
Antes
Resultado da customização do template
Esse tutorial é de nível básico e envolve os elementos mais simples de um template. É um ótimo caminho para começar a desvendar a estrutura de outros templates até que possa se sentir confiante para criar o seu.
Esse post foi elaborado especialmente para Netto Silva e Italo Veloso, que fizeram o pedido através do RGB Magazine. Caso também queira fazer o seu pedido sobre algum tutorial clique aqui. O post ficou um pouco extenso, se tiver dúvidas envie seu comentário.
Social comments and analytics for this post…
This post was mentioned on Twitter by rgbmagazine: Tutorial: Como customizar temas no Wordpress – http://bit.ly/4wQZNW #tutorial #wordpress…
Ótimo post para iniciantes como eu, estou entrando nesse mundo de blogs agora, e precisava desse mesmo. Obrigado!
É difícil criar um post ensinando como customizar um blog.
Tudo varia de template para template, talvez a forma de fazer de um designer, não seja a mesma que a sua.
Por isso, eu acho que o essencial para poder ter um template bom, “feito em casa” é ter noções em html, saber usar os plugins como firebug e procurar aprender CSS.
Muito bom o seu post.
“É um ótimo caminho para começar a desvendar a estrutura de outros templates até que possa se sentir confiante para criar o seu.”
Olá, estou com uma duvida sobre este tema, o jQ, sei que você não é o responsável por ele, mas acredito que você possa me ajudar, neste tema existem itens em todas as sidebars, e eu não consigo retiralas, eu teria que retirar no código esses items?
Meu blog está hospedado em servidor pago. Utilizo o Wordpress.
Olá, amigo. Desculpe pelo número de mensagens. Achei a solução, e gostaria de compartilhar aqui no site para quem tiver a mesma dúvida. Para saber sobre Z-index e Absolute position, recomendo: http://pt-br.html.net/tutorials/CSS/lesson15.asp
Abraço!
Muito bom o tutorial. Mas como leigo, continuo com uma dúvida quanto a inserir imagem no template: como saberei o tamanho da imagem (altura e largura em pixels) que substituirá a imagem original do template. Se puderem ajudar, agradeço. Grande abraço.
Estou precisando de ajuda. Coloquei um post de vídeo do youtube e um outro post com foto, porém ficou irregular as três colunas do thema wp. Você poderia me ajudar a consertar??? Por favor…. Obg desde já pela atenção.