Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

Themes WP

Como fazer Themes WordPress 2

No artigo anterior da série Como fazer Themes WordPress vimos algumas das ferramentas necessárias para que se possa fazer um theme wordpress...

Como Fazer Themes WordPressNo artigo anterior da série Como fazer Themes WordPress vimos algumas das ferramentas necessárias para que se possa fazer um theme wordpress, como o Xampp e o notepad++, hoje começaremos a dar uma olhada nos códigos. Caso ainda não tenha visto o artigo anterior, não perca tempo e de uma conferida:

1 – Como fazer Themes WordPress

Vamos montar a estrutura

Toda página desenvolvida para web precisa necessariamente ser feita, ou estar contida em uma estrutura HTML, com themes wordpress não é diferente, olhe o código de qualquer theme que certamente encontrará tags HTML.

Para se criar qualquer site de qualidade precisamos inicialmente seguir dois princípios, que tornarão nosso código “limpo” e fácil de ser trabalhado com CSS posteriormente.

1 – Pouco código: devemos buscar por utilizar a menor quantidade de código possível, isto é, quanto menos marcação melhor. Mas claro que não deixaremos de fazer nada que seja necessário.

2 – A marcação deve ser significativa, através de uma classificação semântica, nomes de ID, que servirão muito para nos orientar durante todo o processo, entre outras coisas. Por exemplo (class=”conteudo” ao invés de class=”div-centro”). Repare em qual das duas fica mais fácil de saber quem é quem rsrsr

Algo especialmente útil para se montar um theme wordpress é a tag “div”, que você provavelmente já deve ter visto. Esta tag serve como recipiente para outros conteúdos, portanto nos ajuda não apenas a organizar nosso código, mas é especialmente importante na hora de aplicar CSS.

Então temos em mente que queremos pouco código, que seja significativo e com estrutura o suficiente para nos servir em outros projetos também, assim algo que estará sendo programado hoje nos será útil no futuro também.

Estrutura HTML

Este é o código html que iremos utilizar para fazer nosso theme wordpress. Repare que ele está comentado mostrando onde está o fechamento de cada div, e isto é importante, pois devemos seguir a ordem correta de o que está dentro do que, para que não tenhamos problemas depois.

Copie e cole este código, pode o salvar como arquivo txt mesmo, pois ainda faremos mais alterações nele até obtermos nossas primeiras páginas do theme wordpress.

Comentários sobre o código

Repare que nossa primeira div, com id=”wrapper” (que é nosso invólucro) possui uma classe “hfeed”. O que é isso? A classe “hfeed” faz parte do esquema de microformato, portanto ela irá dizer para máquinas (incluindo robots do Google) que acessam nosso site que publicamos conteúdo como artigos/postagens. Isso é bastante interessante a nível de indexação.

Você deve ter reparado que as área para widgets surgem no código em separado do conteúdo e depois dele. Isso faz com que nosso conteúdo seja carregado e lido antes que nossa barra lateral, tanto pelos robots como pelos leitores também.

Com apenas este código, adicionando a ele algumas linhas de CSS poderemos fazer coisas bastante interessantes, como você poderá ver nos artigos futuros da série Como fazer Themes WordPress.

Até mais!

Sobre o autor | Website

Olá! Sou Vinicius Horta e tenho 37 anos, trabalho com Marketing Digital a 6 anos (quase 7 já). Aqui você aprenderá como construir negócios rentáveis online trabalhando no conforto de sua casa, exatamente como eu faço a 6 anos. Sou Web Designer com formação pelo SENAC e apaixonado por Copywriting e análise de dados de campanhas de Marketing Digital.

Treinamento Online Grátis

Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.