Front-end concluído, como começar no WordPress? Parte I

Andando pelo fórum do Tableless, me deparei com esta postagem, e pelo que eu vi, essa é uma grande dúvida para todos que estão iniciando no desenvolvimento com WordPress. O usuário Angelo Lucas do nosso fórum postou a seguinte resposta: Desenvolva o Front-End do tema (HTML, CSS e Javascript) Instale o PHP, Mysql na sua

Andando pelo fórum do Tableless, me deparei com esta postagem, e pelo que eu vi, essa é uma grande dúvida para todos que estão iniciando no desenvolvimento com WordPress.

O usuário Angelo Lucas do nosso fórum postou a seguinte resposta:

  1. Desenvolva o Front-End do tema (HTML, CSS e Javascript)
  2. Instale o PHP, Mysql na sua máquina. Baixe o WordPress e instale-o, ele vem com alguns temas incluso
  3. Duplique um tema do wordpress e começe a implementar seu HTML na programação já existente, não é difícil, não é chato.

Gostei bastante da resposta, mas o assunto é tão empolgante que merecia um conteúdo mais detalhado. E para melhorar o aprendizado e nos guiar, desenhei um layout bem simples. Não reparem, sou péssimo design.

Iniciando o desenvolvimento

Com o front-end concluído, duplique o tema padrão do WordPress e altere o nome da pasta duplicada para o nome do seu tema. Acho melhor duplicar, pois se perde um tempo criando os arquivos do zero. Se o seu WordPress for a partir da versão 3.2, terás dois temas padrões: o Twenty Ten e o Twenty Eleven. A diferença é que o Twenty Eleven vem programado nas tags do HTML5.

Depois disso, é importante entender a hierarquia de arquivos do WordPress e saber que sem os arquivos index.php e style.css o tema não funciona.

O arquivo style.css, além do estilo do tema, pode-se preencher informações do tema. Adicione no inicio do style.css esses comentários:

Personalize a partir das suas informações, mas não é necessário preencher todas elas, colocar o nome do tema e o nome do autor está ótimo.

Dois arquivos do tema possuem importância e servem para aumentar a nossa produtividade, que são: header.php e footer.php e essas páginas são incluidas nas páginas através das funções get_header() e get_footer(), respectivamente.

Vou mostrar um exemplo de meus arquivos header.php e footer.php para vocês terem noção.

header.php

Estudem essas funções: bloginfo(), wp_title(), wp_head() e wp_footer().

wp_nav_menu, WTF??? O que é isso, Paulo? Calma, é uma função para retornar menus, confira esse artigo de criação de menus no WordPress, que aí tenho certeza que vai entender tudo.

Personalize essas páginas através do seu front-end, tente explorar o máximo dessas páginas para não perder tempo nas páginas internas.

Finalizando esse inicio, o esqueleto do seu tema está pronto!

Trabalhando com a página inicial e páginas internas

Beleza, concluímos nosso “esqueleto”, e a partir daí vamos criar as páginas do tema. A página índex.php é a página inicial do tema, ela só não é a página inicial, quando adicionamos ao nosso tema a pagina home.php. Mas de inicio, vamos trabalhar com a página índex.php.

Já ouviram falar no Loop do WordPress? Confiram esse artigo pois vão entender para o que ela serve.

Vamos ao exemplo da página inicial:

Estude a função the_time() e a forma de customizar data e hora dessa função.

A função the_post_thumbnail serve para retornar os Posts Thumbnails, Caso não tenha interesse, pode remover a função, mas se tiver interesse, aprenda através desse artigo.

A função get_sidebar() serve para retornar o que está no arquivo sidebar.php, e esclareça suas dúvidas nesse artigo para criação de sidebars

Arquivo sidebar.php

Não se limite a esse artigo, aprofunde seu conhecimento através da documentação disponibilizada pelo WordPress. “Futuque” novas funções, pois é assim que se aprende, é quebrando a cara e arriscando. Basta somente ter interesse!

Esperem pelas próximas partes deste artigo, pois vou aprofundar mais esse assunto e pensar no WordPress como um poderoso CMS.

Quero deixar o espaço sempre aberto para quem tiver dúvidas, dar sugestões, criticas construtivas, ect. Podem comentar, enviar email e encher o fórum do Tableless, pois de lá nasceu a idéia para esse artigo e tenho certeza que nascerá os próximos também.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *