Templates WordPress – Tutorial para a criação de Templates – Parte 2

Hoje daremos continuidade a nossa missão de construir um Template WordPress completo, com todas as características necessárias. Hoje iremos aprender sobre a estrutura dos templates wordpress e criar alguns arquivos que começaram a dar corpo ao nosso template, a saber o style.css e o header.php. Havia considerado usar um template HTML para acelerar o processo, mas preferi criar tudo do zero para melhorar ainda mais o seu aprendizado.

Recomendo ler o primeiro artigo desta série: Templates WordPress – Tutorial para a criação de Templates – Parte 1

Estrutura de Templates WordPress

A ilustração assina mostra a estrutura de um template wordpress, e agora explicarei o que cada arquivo faz assim como a função dos diretórios.

  • Diretório images: guardará todas as imagens usadas em nosso template, icones e tudo o mais
  • Diretório includes: guardará algumas funções usadas em várias páginas, widgets e outras coisas.
  • Diretório js: guardará todos os arquivos javascritpts que usaremos, jQuery e etc.
  • Diretório languages: usaremos para guardar traduções de nosso template para outras linguas, se houver.
  • Diretório scripts: guardará alguns scripts PHP que podem ser utilizados, como o timThumb que faz o redimensionamento de imagens.
  • 404.php: template utilizado para a pagina 404, ou seja, quando não achar a URL desejada.
  • archive.php: template utilizado para página de arquivos, ou seja, página que lista arquivos por dia, mês e ano.
  • author.php: template para a exibição de informações sobre o autor.
  • category.php: template utilizado para a listagem de arquivos por categoria.
  • comments.php: arquivo que gerencia a parte de comentários em nosso template, listagem de comentários e o fomulário em si.
  • footer.php: template do rodapé, tudo que aparecerá nele.
  • functions.php: Arquivo que guarda todas as funções e definições de nosso template.
  • header.php: Template do cabeçalho, arquivo muito importante, pois fazemos diversas definições nele.
  • index.php: Nossa página principal, arquivo super importante.
  • page.php: Template das páginas, pois você precisará delas, seja para criar um form de contato, seja para criar uma página de políticas de privacidade.
  • screenshot.png: Arquivo PNG que guarda um screen de nosso template
  • search.php: Template de pesquisa em nossa site.
  • searchform.php: Formulário de pesquisa, aquele que aparece geralmente na sidebar, ou no cabeçalho.
  • sidebar.php: Arquivo que guarda o template de nossa sidebar, certamente teremos uma.
  • single.php: Template de artigos, certamente será a mais usada pelos visitantes.
  • style.css: Arquivo CSS que define toda a aparência de nosso site.

Style.css

No início não vamos aprender a estilizar nosso site, ainda, isso irá ficar um pouco mais para frente, quando formos criando os templates, hoje apenas vamos fazer a definição de nosso template que fica no Style.css. Segue Abaixo o código:

[code type=csss]

/*
Theme Name: EscolaSites
Theme URI: http://www.7desenvolvimento.com
Description: Community Magazine & Industry News WordPress Theme
Version: 1.0
Author: Jair Rebello
Author URI: http://softam.info
Tags: community, portal, clean, news, magazine

—————————————————*/

[/code]

Header.php

Hoje iremos mostrar todo o arquivo header.php, talvez algumas coisas ainda não fiquem tão claras, pois precisamos ir a fundo em alguns aspectos, caso tenha alguma dúvida que precise ser tirada imediatamente, fique a vontade para perguntar nos comentários. Não irei explicar cada um dos passos, o que tornaria o artigo imenso. Pergunte nos comentário que aí explicarei apenas as dúvidas.

[code type=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”pt-BR”>

<head profile=”http://gmpg.org/xfn/11″>

<!– Meta & Title –>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title><?php if (is_home()) { ?><?php bloginfo(‘name’); ?> – <?php bloginfo(‘description’); ?><?php } else { ?><?php wp_title($sep = ”); ?> – <?php bloginfo(‘name’); ?><?php } ?></title>

<!– CSS –>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />

<link rel=”shortcut icon” href=”<?php echo site_url(); ?>/favicon.ico” />
<!– Feed & Pingbacks –>
<link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”<?php echo site_url(); ?>/feed/” />
<link rel=”pingback” href=”<?php site_url(); ?>/xmlrpc.php” />

<!– Hooks –>
<?php
if (is_single()) wp_enqueue_script( ‘comment-reply’ );
wp_head();
?>
</head>
<?php flush(); ?>
<body>
<div id=”header”>
<div class=”wrapper”>
<h1>
<a href=”<?php echo site_url(); ?>”>
<img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png” alt=”<?php bloginfo(‘name’); ?>” />
</a>
</h1>
<div id=”back-banner”></div>

<div class=”banner”>
<?php dynamic_sidebar(‘banner-header’); ?>
</div>

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

<div id=”main-menu”>
<div class=”wrapper”>
<?php wp_nav_menu( array(‘container’ => false, ‘theme_location’ => ‘main-menu’ ) ); ?>
</div><!–#wrapper–>
</div><!–#main-menu–>

[/code]

A estrutura do header.php é basicamente HTML, quase não usando PHP, com excessão das chamadas de caminho e para montar o menu.

Download dos arquivos do template

Com certeza há dúvidas a tirar, peço que realize as perguntas nos comentários para que todos os visitantes possam ter suas dúvidas esclarecidas.

Receba as melhores dicas para criar um negócio digital lucrativo

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