Post escrito por Yeltsin Lima
Pelo bem da compatibilidade geral, resolvi fazer uma alteração. Ao invés de utilizarmos o HTML 5, usaremos apenas o XHTML 1.1 e com alguns recursos de CSS3. Isso vai garantir uma melhor compatibilidade com todos os navegadores, visto que, utilizaremos pouco da novidade. Quando o HTML 5 estiver mais completo, farei questão de atualizar essa série de tutorial com a nova versão do HTML.
O código que iremos usar por padrão é o seguinte. Lembrando que estou iniciando o tema do zero e não mais utilizando uma versão modificada do Twenty Ten (que foi feito em HTML 5).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="banner">
</div>
<div id="nav">
</div>
</div>
<div id="page">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Como pode ser percebido, temos um espaço para o logo (vamos utilizar um H1 e um H2 mas, também, vou dar a alternativa de uso de uma imagem), o banner que será em tamanho 728×90 (a inserção será manual, em um tutorial avançado ensinarei a fazer a inserção de uma página de “Opções” que pode ser alterada dinamicamente através do painel de administração. Temos o conteúdo e uma barra lateral na esquerda e um rodapé.
Vamos criar todo o HTML inicialmente e depois passaremos para a adaptação para os códigos do WordPress. Ajuda a explicar todas as tags e complementa o raciocínio. A barra lateral (sidebar) será deixada em branco, já que vamos inserir todo conteúdo de forma dinâmica pelo painel administrativo. Resumindo tudo. Abaixo, explicando tudo o que fizemos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Corporações ACME</h1>
<h2>O serviço certo para você</h2>
</div>
<div id="banner">
<img src="http://placehold.it/728x90" width="728" height="90" />
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Galeria de Fotos</a></li>
<li><a href="#">Depoimentos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
</body>
</html>
Resolvi inserir um H1 e um H2 para o logo, visto que, na página inicial teremos a exibição de vários artigos diferentes. Que ficarão com a tag H3. O banner está sendo linkado para o “placehold.it”. Esse site é muito útil na criação de sites, pois ele insere uma imagem no local, sem precisar criar e de uma forma bastante simples.
Sim. Para inserir uma imagem através do site, basta editar o endereço da imagem. Ao invés de usar uma extensão .jpg ou .png, ele é criado em um formato de link permamente. Exemplo.:
http://placehold.it/728×90
Alterando o 728×90 para o seu tamanho desejado, ele automaticamente altera o tamanho da imagem. Sem precisar salvar arquivos extras ou poluir seu site com um monte de imagem.
Voltando. A navegação ficou com um <ul> que serve para exibir listas. Se você colocar para exibir um preview do site, perceberá um formato de lista ordenadas e na vertical.
Nossa meta é fazer com que essa exibição seja horizontal, como um menu de cabeçalho. E não como um menu de barra lateral. Essa alteração será feita em CSS, e será dada futuramente (nesse artigo mas, futuramente).
Percebam que eu criei uma <ul> direto com o id #nav. Ao invés de criar uma div e colocar uma ul dentro. Isso é por uma questão de semântica. Não precisa criar uma infinidade de divs para cada função do WordPress. Além de feio, sobrecarrega o site e termina deixando o lento e poluído.
A página será definida em várias partes. Entre elas: sidebar e content (respectivamente barra lateral e conteúdo). O código usado para demonstração foi o Lorem Ipsum. Criei dois artigos seguidos para testar a exibição na página inicial. Afinal, você não vai querer que o site fique mal-formatado, quando colocarmos o CSS, não é?
<div id="page">
<div id="content">
<div class="artigo" id="numerodopost">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<p><small>20 de janeiro de 2030 às 20:00 por <a href="#">Yeltsin Lima</a> na categoria <a href="#">Geral</a></small></p>
<img src="http://placehold.it/500x250" width="500" height="250" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tortor enim, sed pulvinar turpis. Nam posuere orci at lectus pharetra vehicula. Pellentesque sit amet felis urna. Etiam nibh magna, tincidunt id blandit non, viverra et urna. Integer rutrum, turpis ac pulvinar ornare, ipsum lorem aliquet risus, vitae fermentum metus massa eget elit. Ut erat enim, sodales eget congue eu, convallis non metus. Duis scelerisque pharetra tincidunt. Ut dui eros, congue et adipiscing at, auctor eleifend lectus. Duis sit amet dolor nunc, sed egestas leo. Vestibulum lacus odio, consectetur eu lacinia ac, faucibus vel erat. Curabitur feugiat sollicitudin neque eget malesuada. Etiam condimentum sollicitudin volutpat. Nam neque sem, pellentesque eget consequat id, mattis ac risus.</p>
<p>Integer ut porttitor magna. Vestibulum placerat aliquam metus sed feugiat. Nullam eget leo dolor. Etiam non magna non justo consequat rutrum. Quisque dignissim eros odio. Proin tincidunt, erat congue cursus gravida, felis erat facilisis enim, suscipit vehicula ante dolor scelerisque arcu. Suspendisse varius venenatis diam vel ullamcorper. Cras posuere erat eu nisl tincidunt auctor. Curabitur venenatis, nulla sed posuere pulvinar, lorem odio tincidunt sapien, in scelerisque justo urna id nibh. Curabitur nisl purus, fringilla eget sagittis quis, varius rutrum nisi.</p>
<div class="meta">
<div class="sharing">
</div>
<div class="comentarios">
</div>
</div>
</div>
<div class="artigo" id="numerodopost">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<p><small>20 de janeiro de 2030 às 20:00 por <a href="#">Yeltsin Lima</a> na categoria <a href="#">Geral</a></small></p>
<img src="http://placehold.it/500x250" width="500" height="250" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tortor enim, sed pulvinar turpis. Nam posuere orci at lectus pharetra vehicula. Pellentesque sit amet felis urna. Etiam nibh magna, tincidunt id blandit non, viverra et urna. Integer rutrum, turpis ac pulvinar ornare, ipsum lorem aliquet risus, vitae fermentum metus massa eget elit. Ut erat enim, sodales eget congue eu, convallis non metus. Duis scelerisque pharetra tincidunt. Ut dui eros, congue et adipiscing at, auctor eleifend lectus. Duis sit amet dolor nunc, sed egestas leo. Vestibulum lacus odio, consectetur eu lacinia ac, faucibus vel erat. Curabitur feugiat sollicitudin neque eget malesuada. Etiam condimentum sollicitudin volutpat. Nam neque sem, pellentesque eget consequat id, mattis ac risus.</p>
<p>Integer ut porttitor magna. Vestibulum placerat aliquam metus sed feugiat. Nullam eget leo dolor. Etiam non magna non justo consequat rutrum. Quisque dignissim eros odio. Proin tincidunt, erat congue cursus gravida, felis erat facilisis enim, suscipit vehicula ante dolor scelerisque arcu. Suspendisse varius venenatis diam vel ullamcorper. Cras posuere erat eu nisl tincidunt auctor. Curabitur venenatis, nulla sed posuere pulvinar, lorem odio tincidunt sapien, in scelerisque justo urna id nibh. Curabitur nisl purus, fringilla eget sagittis quis, varius rutrum nisi.</p>
<div class="meta">
<div class="sharing">
</div>
<div class="comentarios">
</div>
</div>
</div>
</div>
<div id="sidebar">
</div>
</div>
Percebam que eu criei uma classe para os artigos e uma ID com o nome: “numerodopost”. Esse ID será alterado automaticamente com o número do post, visto que, pelas regras da W3C só podemos ter um ID por página. Foi criada também a classe “meta” onde ficará os botões de compartilhamento e de comentários.
A sidebar está vazia já que todo conteúdo que será gerado ali, será inserido automaticamente através do painel Widgets localizado na área de administração no WordPress.
E por último vem o rodapé, que por enquanto está completamente vazio.
<div id="footer">
</div>
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.
Loading ...