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

  • Carlos

    Show de bola!
    Estou acompanhando e ansioso pela próxima aula.

    Abraço!

    • Jair Rebello

      Carlos, que bom que esta acompanhando. Divulgue para amigos para a gente ter uma comunidade cada vez maior.

      Abraços.

      • Carlos

        Mais do que divulgado. Alguma previsão para disponibilidade da próxima aula?
        Abraço!

  • Miguel Alexandre

    Olá Jair,
    Há alguma problema em usar o EasyPhP? É que já tenho ele instalado aqui e conheço um pouco do programa…
    Obrigado!

    • Jair Rebello

      Miguel, nenhum problema.

      Abraços.

  • Parabéns pela iniciativa. Estou acompanhando. Vai ser muito legal!

    • Jair Rebello

      Que bom que gostou, espero que acompanhe até o fim e aprenda muito.

      Abraços.

  • Cleusa Sanches

    Jair,
    Já tenho o WP instalado na minha maquina e tb hospedado.
    Mesmo assim, precisaria instalar este que você está indicando?
    Aguardo sua resposta e obrigada pela oportunidade.
    Bjus, Cleusa Sanches

    • Jair Rebello

      Cleusa, caso já tenha um servidor local, com o WordPress instalado não há necessidade de instalar novamente.

      Abraços.

  • modularx01

    A princípio tive problemas na instalação do WampServer. Conferi os dados da pasta C:apache2conf.reiniciei o pc e o apache subiu

    • Jair Rebello

      Que bom que conseguiu resolver assim podemos dar prosseguimento ao curso.

      Abraços.

  • Marcelo Cardoso

    Estou gostando muito, bem explicado passo a passo muito bom mesmo. Abraços.

    • Jair Rebello

      Marcelo, fico muito feliz que esteja gostando. Divulgue o curso. Abraços.

  • Eduardo Araujo

    Opa tudo bem? estou querendo aprender sobre o wordpress, vi muitos vídeos, mas nenhum tão bem explicado quanto o seu, já me mataram a duvida de como é a estrutura do wordpress.
    Gostaria de saber se vocês estão vendendo essa aula?
    Abraço.

    • Jair Rebello

      Eduardo, as aulas (artigos) não serão pagos. Estamos disponibilizando gratuitamente, só estamos pedindo o apoio na divulgação do material.

      abraços.

  • Meu primeiro site utilizando o Worpress eu contratei a hospedagem da Uol ( sei que teve problemas com ela conforme consta no artigo http://www.escolasites.com/uol-host-nunca-contrate/ mas agora já era! Já estou usando, se tivesse lido este artigo antes …) e não sabia que poderia ter no meu computador o WordPress “para teste” usando o WampServer .

    Mas tenho uma dúvida … toda e qualquer função funciona no WampServer ?

    Qualquer plugin que instale vai realizar a função como na “real” na internet ?

    E parabéns pela iniciativa de criar este curso, nem é preciso pedir , vou divulgar e propagar o seu curso, afinal , é o minimo que posso fazer pelo seu empenho em passar este tipo de conhecimento.

    Wagner Guimarães

    • Jair Rebello

      Wagner, ficamos agradecidos. Esperamos que esteja gostando do curso.

      Abraços.

  • Ansioso aqui pelas próximas aulas. É dessa vez que aprendo a criar templates WP ehheeh, com sua ajuda é claro! Obrigado, as ferramentas estão prontas para começar a programar… aguardando as próximas aulas. deus te abençoe te dê sabedoria… abraço

    • Jair Rebello

      Isaias, vamos juntos.

      Abraços.

  • Olá Jair! Muito bacana sua iniciativa, quero aprender o máximo que eu poder e vou espalhar para muitos. Valeu…

    • Jair Rebello

      Francesco, acredito que se seguir o curso, vais ter sucesso.

      Abraços.

  • ESTOU ATENTO NA EXPECTATIVA DE MAIS INFORMAÇÕES, PRA MIM É ALGO NOVO E INTERESSANTE…VALEU JAIR E PARABENS POR PASSAR SEU CONHECIMENTO DESTA FORMA, SUCESSO!…

  • Roger Ferreira

    Olá Jair, sou o Roger, estou escrevendo para vocè de Portugal. A minha dúvida é esta, tal como muitos aqui eu estou começando agora a criar sites, no entanto não entendo quase nada de linguagem HTML ou CSS, e tenho sempre uma montanha de problemas pela frente quando tento fazer algo personalizado. Encontrei você aqui e estou tentando perceber como construir um template, mas ao instalar o Wamp meu pc ficou super lento. Contudo vou prosseguir o seu curso pois é uma dádiva que vocè nos está concedendo, ao partilhar com todos nós a sua sabedoria.
    Que Deus abençoe você em dobro por aquilo que você nos dá. Obrigado.

  • Muito bom o artigo, concerteza irei acompanhar o restante do material disponibilizado.

    Gostaria de fazer apenas uma resalva, as imagens inclusas no artigo eu não estou conseguindo vizualizar.

    Obrigado pelo material, pois vejo muitas vantagens no uso do WordPress, inclusive, terei de a missão de passar o site da empresa para esta plataforma, e não gostaria de usar temas já prontos, pelo fato de existir muitas coisas que não serão necessárias para o nosso site, o que prejudicaria o mesmo com tempo a mais para seu carregamento.

    Um forte abraço e sucesso!