Como criar templates wordpress – Parte 02

Esse artigo é parte do Curso de criação de templates wordpress, caso ainda não esteja inscrito, por favor confirme sua assinatura agora mesmo, é grátis. Neste artigo iremos abordar como realizar a instalação de nosso ambiente de desenvolvimento, descrever os principais arquivos que compõem um template wordpress e também iremos falar sobre algumas tecnologias que iremos utilizar no desenvolvimento, então vamos lá.

Instalação do Wamp

Para realizar o desenvolvimento de aplicações utilizando PHP precisamos de algumas ferramentas, são elas: um interpretador de linguagem, um servidor web e um banco de dados que geralmente é o MySQL. Mesmo não desenvolvendo uma aplicação propriamente dito, vamos desenvolver um template e precisaremos testa-lo, de fato, e pra isso vamos precisar destas ferramentas.

Para facilitar a vida de quem está começando, e até dos experientes, existem alguns pacotes que já isntalam todas estas ferramentas. De todas elas a que mais gosto é o Wamp. Wamp é um pacotão completo que vai instalar tudo o que vamos precisar para testar nossos templates, para iniciar vá até a página do wamp, segue: http://www.wampserver.com/.

instalacao-wamp-1

Clique na aba download e escolha a versão mais atual que mais se adéqua a sua arquitetura do computador, escolha entre 32 e 64 bits.

Após a escolha de acordo com as configurações do seu Sistema operacional, vamos a instalação. Localize o instalador baixado e o execute, a seguinte tela deve aparecer:

Instalacao WampServer

Após clicar em NEXT, aparecerá uma janela informando os termos de licença de uso do programa, leia e depois marque a opção “I ACCEPT THE AGREEMENT” e deposi clique em NEXT.

Instalacao WampServer

Agora chegou a hora de escolher onde será instalado o WAMP, deixe o padrão que é “C:wamp”, para que todos possamos trabalhar de forma igual e assim o curso possa prosseguir de uma forma mais didática. Clique em NEXT.

Instalacao_WampServer5

Aparecerá uma tela perguntando se deseja colocar atalhos do Wamp na sua área de trabalho e também no menu iniciar, aconselho que selecione ambos para que seja fácil encontrar o link para iniciar o processo do Wamp. Faça suas escolhas e clique em NEXT mais uma vez.

Finalmente aparecerá a tela em que você pode clicar em INSTALL para iniciar a instalação do WAMP.

Instalacao WampServer

O progresso de instalação poderá ser acompanhado na tela, depois de tudo acabado, algumas perguntas serão feitas para que a configuração seja totalmente concretizada. Uma delas é localizar o explorer.exe, o instalador já vai deixar o padrão escolhido, não vejo razões para alterar. Depois será pedido para colocar o nome e e-mail do administrador do servidor, não é necessário preencher estes dados porque nosso servidor vai estar instalado em nossa máquina e não em um servidor na internet.

Após isso você terá a seguinte tela indicando que tudo foi instalado com sucesso.

Instalacao WampServer

Após isso, você terá em sua barra do windows um elemento semelhante ao mostrado na figura a seguir e poderá controlar seu servidor web, para finalizar clique em Put Online, como visto também na figura.

wamp-put-online

Agora que temos nosso servidor configurado, vamos dar uma olhada na estrutura básica de um template wordpress.

Estrutura de um template WordPress

 Antes de começarmos a discutir assuntos relativos a criação do template em si, quero lhe mostrar a estrutura de um template wordpress, com isso você vai ter uma percepção mais clara de qual arquivo faz o que no wordpress e tudo ficará um pouco mais claro para você.

estrutura template wordress

Vamos ao que cada arquivo e pasta faz nesse contexto:

  • pasta css: pasta que irá agrupar todos os css auxiliares de nosso template;
  • pasta images: pasta que irá agrupar todas as imagens de nosso template
  • pasta js: colocaremos aqui todas os arquivos javascript necessários, como jquery;
  • pasta option-tree: teremos um artigo inteiro falando sobre o option-tree. Ele irá nos ajudar a criar campos de configurações em nosso template;
  • 404.php: template da página de erro 404 (página não encontrada);
  • category.php: template da página de categorias;
  • comments.php: template de comentários;
  • footer.php: rodapé de nosso template;
  • functions.php: as principais funções de nosso template serão salvas neste arquivo;
  • header.php: cabeçalho do template, importado em todas as páginas;
  • index.php: template da página principal do template wordpress;
  • loop.php: arquivo importado em todos os arquivos que possuem listagem de artigos, como category.php e tag.php;
  • page.php: template para páginas;
  • screenshot.png: É a miniatura mostrada na página de configurações de template do wordpress;
  • search.php: template de resultados de pesquisa no wordpress;
  • sidebar.php: template da barra lateral do blog;
  • single.php: template de artigos;
  • style.css: arquivo principal de css;
  • tag.php: template para a página de tags.

Bootstrap – Hora de economizar tempo na criação de css

Sempre o que mais me deu trabalho na confecção de um template seja ele WordPress ou não é o CSS, é onde gastava a maior parte do tempo e ainda por cima muitas coisas não funcionavam muito bem como desejava. Quem já fez algum site ou mesmo sistema para web sabe como é difícil implementar um CSS que funcione corretamente em todos os navegadores.

O Bootstrap ajuda e muito neste aspecto, ele traz todo o CSS necessário para criar páginas totalmente compatíveis com todos os navegadores modernos, isso é simplesmente fantástico. Nada de gastar muito tempo na escrita do CSS, tudo o que temos de fazer é personalizar. O principal objetivo do Bootstrap é consumir o menor tempo possível no desenvolvimento de um website, seja ele uma página simples estática ou um grande portal dinâmico. Com o Bootstrap temos um site bonito e totalmente resposivo, ou seja, vai se adaptar a todo tamanho de tela.

Acesse o link da biblioteca (http://getbootstrap.com/) e pesquise o potencial da ferramenta. Ela é utilizada por grandes empresas como o Twitter e a Globo.com, que inclusive fez uma série de adaptações e ainda criou uma documentação própria, que pode ser melhor para se entender (http://globocom.github.io/bootstrap/).

Faça o download do Bootstrap e já deixe guardado, pois vamos utilizá-lo no próximo artigo (aula) do curso.

Comente – o curso é seu

Caso você esteja começando agora, você deve estar cheio de dúvidas e este espaço é o mais adequado para sanar todas as dúvidas, deixe sua dúvida nos comentários que vamos respondê-la.

Compartilhe e chame amigos

Esta iniciativa que tive de ensinar de forma totalmente gratuita a criar templates WordPress consome tempo e o que mais me compensaria seria ver o maior número de pessoas acompanhando o curso, já somos quase 200 pessoas, mas gostaria de muito mais, espero contar com seu apoio, compartilhe nas redes sociais e convide amigos para essa comunidade impar.

Até já!

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br