Você não tem conhecimento de programação? Não tem habilidade com codificação? Quer transformar seus designs em páginas incríveis?

Parabéns, neste artigo, você irá aprender de forma simples em como converter sua arte PSD num fantástico tema WordPress.

O arquivo do tipo PSD é um formato gerado pelo programa Adobe Photoshop. “exatamente, aquele que serve para tratamento de imagens, muitas vezes fotografias”. Nele você consegue salvar e editar partes da imagem em arquivos jpeg ou png separadamente.

Para quem está começando, temas WordPress são modelos de sites feitos para ter um norte na criação, são como uma planta de um site, uma estrutura com as marcações e posições de todo conteúdo contido nele, resumindo o tema WordPress é o layout de design do site a ser criado.

Convertendo PSD para tema WordPress

Existe uma infinidade de temas pré-construídos que podem ser utilizados em suas páginas da web com facilidade. Mas nada melhor do que ter um design único não é mesmo? Para isto é necessário converter suas imagens para o site, parece complexo, mas seguindo estes passos você vai ver que é beeem fácil.

Etapa 1

– Cortando o seu PSD

O primeiro passo da conversão do arquivo PSD para um tema WordPress é o corte, dividindo seu arquivo em vários, formando os componentes de design salvos em arquivos separados. Qualquer software de edição de imagens pode ser utilizado para fazer estes cortes, na minha opinião o Adobe Photoshop é o indicado para este trabalho. Vamos lá, primeiro tenha em mente a otimização de velocidade, quanto maior o numero de imagens, mais lenta ou mais pesada sua página web ficará, neste momento você deve decidir o que será criado estática ou dinamicamente no site.

A forma mais fácil de cortar seu arquivo PSD é encontrar cada uma dessas partes:

  • Fundo
  • Cabeçalho
  • Separador
  • Rodapé
  • Outros componentes

Observação: Tenha cuidado ao cortar cada um dos componentes, qualquer diferença nos tamanhos pode fazer com que sua página fique confusa.

Etapa 2

– Criando arquivos index.html e Style.css

Nesta etapa iremos do design à programação, não se preocupe, pois é bem simples. A partir do modelo PSD criado no Adobe Photoshop, crie um modelo HTML e CSS estático, nomeando cada um como index.html e Style.css para facilitar mais a diante.

Existem vários softwares que podem te ajudar nesta etapa com muita facilidade como o Dreamweaver ou mesmo o Fireworks, mas meu conselho é que você aprenda um pouco de HTML e CSS mesmo que utilize desses softwares para futuros cortes. Para isso acesse alguma comunidade de desenvolvedores ou mesmo o site da w3c que tem tudo muito bem explicado em português por lá.

Agora posicione suas imagens e componentes fatiados utilizando o arquivo index.html e seu arquivo Style.css correspondente seguindo um design responsivo para garantir boa visualização em todas as resoluções de tela.

Segue exemplo do uso de DIV.

Etapa 3

– Dividindo o arquivo index.html na estrutura de arquivos de tema do WordPress

A partir do modelo básico criado na etapa 2 você precisa porta-lo para o ambiente WordPress, onde as coisas são organizadas de uma forma específica que você precisa seguir para que não existam problemas de incompatibilidade com plugins e funcionalidades adicionais WordPress que podem vir a ser utilizados mais a diante.

Além desses dois arquivos criados anteriormente, index.html e Style.css, um típico tema WordPress consiste em diversos arquivos PHP para os recursos básicos como header.php, archive.php, e por aí vai portanto agora devemos quebrar o index.html de acordo com os arquivos .php necessarios. Para quem tem um conhecimento básico e está entrando neste mundo agora existem vários tutoriais online que irão transformar esta tarefa em algo muito simples, fique tranquilo.

Arquivos básicos de um tema WordPress:

  • Index.php
  • Header.php
  • Sidebar.php
  • Footer.php

Arquivos mais relacionados WordPress e seus objetivos

Style.css: Este arquivo deve ser anexado ao tema, contém informações de cabeçalho do mesmo e é a folha de estilo principal.

rtl.css: Este arquivo será incluído automaticamente.

index.php: Arquivo principal do modelo.

comments.php: Arquivo que define o modelo de comentários.

front-page.php: Utilizado apenas para uma página frontal estática.

home.php: A primeira página por padrão.

single.php: Utilizado quando uma única postagem é consultada. Para este e todos os modelos de consulta, index.php é usado se o modelo de consulta não estiver presente.

page.php: Usado para modelos de páginas individuais.

category.php: Página utilizada para mostrar as categorias.

tag.php: Utilizada quando a tag é necessária.

date.php: Modelo para exibir a data e hora.

archive.php: Usado quando uma categoria autor ou data é consultada. Este modelo será substituído por category, author e date.php para seus respectivos tipos de consulta.

search.php: Precisamos deste arquivo dentro do modelo para realizar uma pesquisa.

attachment.php: Este arquivo é necessario para ver um unico anexo.

image.php: O modelo de anexo de imagem é usado para visualizar um arquivo único de imagem.

404.php: Exibe a mensagem de erro 404 Not Found quando a postagem não é encontrada.

Etapa 4

– Adicionando tags do WordPress

É neste momento que vamos importar todas as funcionalidades incríveis que o WordPress oferece aos seus arquivos de tema utilizando tags. Após adicionar essas tags, você terá criado um tema WordPress próprio. No link a seguir estão apresentadas as tags disponíveis de um modelo WordPress.

Neste link você vai aprender a melhor maneira de usar as tags em seus arquivos .php e conhecer cada detalhe de cada uma delas.

Aqui você irá conhecer mais algumas funcionalidades fornecidas pelo WordPress. Estas funcionalidades estão explicadas em detalhes e com exemplos.

Este material te ajudará a entender mais a fundo para a criação de seus temas.

Após as tags e funções necessárias serem adicionadas, você deve colocar todos os arquivos em uma única pasta com um nome a sua escolha. Esta pasta será adicionada dentro deste endereço — /wp-content/themes/ encontrada em sua instalação do WordPress.

Exemplo: Se seu WordPress estiver instalado em uma pasta com nome WordPress-testing, o nome do tema será theme-test e seus arquivos irão para o local:

WordPress-testing/wp-content/themes/theme-test/.

Se até esta etapa você fez tudo certo, agora poderá ativar seu novo tema no painel do WordPress e exibir seu site com design personalizado e exclusivo.

Etapa 5

– Melhorias e Funcionalidades

No passo anterior criamos com sucesso um novo tema personalizado WordPress a partir de um arquivo do Adobe Photoshop .psd. Agora o que você deve fazer é aplicar melhorias e adicionar funcionalidades a ele. Para isso, se possível tente aprender alguns conceitos e linguagens técnicas mais profundas como o JavaScript para adicionar recursos interessantes ao seu tema.

O processo de conversão de um PSD em um tema é bem simples porém se tudo aqui lhe pareceu muito complicado (o que muitas vezes acontece para não codificadores), a melhor opção é estudar mais a fundo ou mesmo contratar um desenvolvedor especialista em WordPress, que além de experiencia e qualificação, trará muitos recursos mais avançados, benefícios e também um grande impacto no desempenho do seu site!

Analista programador C++ e designer de games. Aficionado por carros, musica eletrônica, tecnologia e repórter de fim de semana para este blog!

Responder