Como Criar Templates para Wordpress-Parte II

Clique no Título do Post para Começar á ver o Tuto!

CRIANDO A ESTRUTURA HTML DO TEMPLATE WORDPRESS

A estrutura HTML do seu Template WordPress é fundamental para o trabalho que iremos desenvolver ao longo das próximas sessões. Tendo em conta que consideramos que já tem o seu ambiente de trabalho criado e pronto a trabalhar, vamos iniciar-nos no desenvolvimento da estrutura HTML do Template WordPress.

OS OBJETIVOS DE QUALQUER ESTRUTURA HTML

Quando você pretende criar/codar um determinado website você deverá ter em mente 2 objetivos: pouco código e código significativo. Isso é, usando o mínimo de marcações (HTML tags) possível e ao mesmo tempo ter a certeza de que essas marcações são significativas, usando classes semânticas e nomes de ID que apontam para o conteúdo (class=”widget-area” ao invés de class=”sidebar-left”).
Agora, quando iniciarmos a programação do Template WordPress (ou qualquer outro template para outro CMS) é necessário existir um equilíbrio entre pouco código, com muito pouca estrutura, incluindo elementos div desnecessários, e código que seja significativo e importante.
Você provavelmente já viu a tag div no passado se por ventura olhou para o código de um site ou de um template WordPress. Pense nelas como recipientes para o código HTML — recipientes que são fáceis de manusear para manipular código HTML com CSS. Obviamente, iremos ter algumas também. Mas não queremos muitas ou que não façam sentido. E queremos estrutura suficiente — usando a tag div — de forma a podermos reutilizar o nosso código para múltiplos blogs e layouts. Nós queremos programar algo que nos possa ser útil no futuro também.

ESTRUTURA HTML PARA O SEU TEMPLATE WORDPRESS

Vamos dar uma vista de olhos à estrutura HTML que iremos utilizar para o corpo (body) do nosso Template WordPress.

<html>
<head>
</head>

<body>
<div id="wrapper" class="hfeed">
 <div id="header">
  <div id="masthead">

   <div id="branding">
   </div><!– #branding –>

   <div id="access">
   </div><!– #access –>

  </div><!– #masthead –>
 </div><!– #header –>

 <div id="main">
  <div id="container">

   <div id="content">
   </div><!– #content –>

  </div><!– #container –>

  <div id="primary" class="widget-area">
  </div><!– #primary .widget-area –>

  <div id="secondary" class="widget-area">
  </div><!– #secondary –>
 </div><!– #main –>

 <div id="footer">
  <div id="colophon">

   <div id="site-info">
   </div><!– #site-info –>

  </div><!– #colophon –>
 </div><!– #footer –>
 </div><!– #wrapper –>
</body>
</html>

Copie e cole este código para o seu editor de texto e guarde-o num local seguro e onde saiba que o volta a encontrar. Iremos utilizá-lo mais tarde quando construir o ficheiro de estrutura do nosso Template WordPress. Mas antes de o fazermos, existem algumas coisas importantes a analisar primeiro.

UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE WORDPRESS

Primeiro, o atributo de classe no wrapper (invólucro) intitulado hfeed. A classe hfeed faz parte do esquema de microformato. Em linguagem simples, isto significa que adicionando a classe hfeed à nossa página, ela irá dizer a qualquer máquina que leia o nosso site (como por exemplo os robots dos motores de busca ou outros serviços) que o nosso site publica conteúdo sindicado, como por exemplo artigos/postagens. Você irá ver uma série de classes deste género à medida que formos avançando.
Na área central do nosso HTML irá reparar que temos duas áreas para widgets que surgem depoisda nossa área de conteúdos. E provavelmente também reparou que o nosso conteúdo está envolvido numa div container (invólucro). Estes pontos são chave. Isto faz com que o nosso conteúdo seja carregado antes das barras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma técnica de CSS com margens negativas poderemos tornar este template num template de 1, 2, ou 3 colunas com pouco código CSS. Interessante?
Esta estrutura HTML poderá ser utilizada para os seus Templates WordPress futuros e dá-lhe a oportunidade de criar coisas bem interessantes com CSS. 


0 comentários:

Postar um comentário

ATENÇÃO ANTES DE COMENTAR LEIA AS REGRAS:

* É Proibido Fazer Propagandas de Sites/Blogs.
* Faça o comentario sobre o artigo em Quetão.
* Não ximgue , ou fale palavra de baixo calão.
* Respeite as opiniões de outros Usuarios.


Ao não respeitar as regras , seu comentario sera ignorado.