MUITAS, MUITAS pessoas me perguntam como fazer um theme para WordPress. E é isso que eu vou ensinar hoje.
EM BREVE eu vou começar a fazer videotutoriais, e, mesmo com minha voz terrível, essa é uma maneira de vocês aprenderem muito.
Enfim, vamos ao tutorial.
1. Você vai fazer que nem eu: fazer o download de um tema-base da Tamara Dantas. Você entra aqui e baixa um theme. QUER UMA DICA MESMO? Baixe um dos “temas antigos“, eles são fáceis de trabalhar e tem como colocar background com imagens repetidas neles… eles são bem mais fáceis de editar… é a minha opinião.
2. Após fazer o download do theme, você vai dezipar ele. É simples, clique com o botão direito sobre a pasta zipada do theme que você acabou de fazer o download e clique em Extrair, Dezipar, ou qualquer coisa parecida que aparecer.
3. Pronto, agora vamos começar a editar o theme. Primeiro, vamos editar o CSS. Clique com o botão direito em cima do arquivo style.css que está na pasta já dezipada e clique em: Abrir com… e depois em Bloco de Notas. Você vai fazer isso em todas as vezes que for editar todos os arquivos que eu vou falar aqui.
editando o css
Editando as cores
Primeiro, você vai editar as cores, beleza? Mas vamos editar de um jeito MUITO mais simples do que editar cor por cor. Mas você tem que ter Photoshop ou Photofiltre… enfim, acho que qualquer editor de imagens tem essa opção.
Você vai lá no site da Tamara de novo e vai printar a preview (pré-visualização) do theme base que você fez o download. O link da preview fica do lado do link do download do theme.
Depois, você vai abrir um novo documento no Photoshop tamanho 1024×768 e colar no Photoshop a imagem que você printou.
Com a ferramenta conta-gotas (que realmente é um conta-gotas), você vai selecionar uma cor do theme que quer mudar. Vamos selecionar um rosa qualquer que está no theme, tipo o rosa #fde2ec. Depois de selecionar, você vai abrir a caixa de cores do Photoshop e lá vai aparecer a cor que você acabou de selecionar no formato #numeros. Copie essa cor e depois, siga este tutorial que está aqui no blog.
Abaixo, uma imagem do que eu acabei de falar:
clique na imagem para visualizá-la melhor
Vamos editar as imagens do blog!
Toda imagem que você fizer para colocar no theme, tipo o header, que é o cabeçalho (a imagem principal), você vai colocar dentro da pasta images que está dentro da pasta do theme. Então, quando você for colocar uma imagem, como a imagem de fundo do blog por exemplo, é só fazer isso aqui:
/* BODY */
body, html {
height: 100%;
color: #000000;
background: url(‘/images/fundo.png‘) fixed;
font-family : arial;
font-size: 12px;
margin:0px;
text-align: justify;}
Edite com o nome e o formato da imagem. Se a sua imagem de fundo se chamar background.jpg, você vai editar a parte em negrito com: /images/background.jpg (: E o .jpg, .png, .gif entre outros são todos os formatos da imagem.
Ou faça o que eu acho melhor: você hospeda a imagem em algum site de hospedagem de imagens, como o photobucket.com, o imageshack.us, o tinyurl.com, etc.
O resultado ficaria assim:
/* BODY */
body, html {
height: 100%;
color: #000000;
background: url('http://imageshack.us/endereçodaimagem.png') fixed;
font-family : arial;
font-size: 12px;
margin:0px;
text-align: justify;}
Lembrando que quando você for colar o link, cole sempre o “link direto” que a hospedagem de imagens oferecer. É o chamado “direct link“, como mostra na imagem abaixo, que é do site tinypic.com:
clique na imagem para visualizá-la melhor
Quais os sites que eu recomendo para hospedagem de imagens? O TinyPic ou o Photobucket (necessita de cadastro, mas é gratuito). Vale a pena! O imageshack é muito bom também, mas não tem como hospedar gifs animados nele, porque para isso, necessita-se de registro pago.
Depois de editar todas as cores e todas as imagens (footer, linha, o background e header, que são as únicas realmente necessárias), você vai salvar e fechar o arquivo.
editando a sidebar
Eu vou ensinar a fazer um theme BÁSICO aqui. Então, eu não vou ensinar você a editar tudo, só o suficiente pra ter um theme bem bacana. Então vou ensinar a editar os arquivos principais.
Tem um arquivo na pasta chamado “sidebar.php“, você vai fazer o mesmo com o CSS: abrir ele no Bloco de Notas.
Após abrir no Bloco de Notas, você vai editar as suas informações básicas, que são: seu nome, sobre o seu blog, etc. Lembrando que, para editar menus, é assim:
Menu
Pronto, editou tudo? Sua sidebar tem que ficar tipo essa:
Menu
Blog
O meu blog foi criado dia tal com o objetivo tal.Perfil
Olá, meu nome é Fulana, eu tenho tantos anos e moro em tal lugar. Gosto disso, disso e disso. Meu cantor favorito é Fulano e minha banda favorita é a banda da Ciclana. Etcetera.Últimos Posts
Como fazer um theme para WordPress
12 de dezembro | Nenhum comentário
Como fazer um theme para WordPress
12 de dezembro | Nenhum comentário
Como fazer um theme para WordPress
12 de dezembro | Nenhum comentário
Calendário de Posts
aqui fica a tag php do calendário wordpress
Para pular uma linha no HTML, use <br> <br>.
Salve e feche o arquivo. Vamos para o último arquivo base antes de mandar para o WordPress de uma forma bem fácil!
editando o header
Vamos editar o header da seguinte forma: se o tema-base que você fez o download é aqueles que tem menu no header, eu vou ensinar a editar aqui. E vou ensinar a colocar o código de imagem mapeada também.
Menu no header
Para editar o menu do header (se o seu tema-base tiver), é só achar em header.php o seguinte código e editar:
Lembrando que você vai abrir o arquivo header.php no Bloco de Notas.
Agora, vou ensinar a colocar header mapeado no header do seu blog.
Header mapeado
Após seguir este tutorial de mapeamento de imagens ou este tutorial de mapeamento de imagens no ImageReady você vai pegar o código que foi formulado, que é algo parecido com isto:
Você vai colar este código entre a tag <div id=”header”>. O header vai ficar algo parecido com isso:
[aqui ficariam um monte de códigos wordpress que eu estou ocultando]E para aumentar o tamanho da imagem do header, é só ir no style.css novamente e editar o que está em negrito:
/* LINHA DO LAYOUT */
#page {
width: 645px;
background-image: url(‘images/linha.png’);
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
}Width é a largura da imagem. Não tem porque colocar a altura, já que isso vai se auto-ajustar de acordo com a largura da sua imagem.
enviando o theme via wordpress
Essa é a parte mais chatinha. Você vai clicar com o botão direito em cima da pasta do seu theme (que deve se chamar baseantigo(algum número)) e clicar em Enviar para… e depois em Pasta Compactada.
Feito isso, você vai seguir este tutorial.
Atenção: o theme deve estar zipado em formato .zip, e não formato .rar.
Se isso não der certo…
Você pode seguir este outro tutorial. Nesse caso, não precisa nem zipar a pasta, pode mandar ela “normal” direto.
Os seus dados FTP são informados por email pela hospedagem quando você cria ela.
É isso! Tutorial longo, porém eficaz. Qualquer dúvida, me enviem pelo meu ask-me.