Há algum tempo que desejávamos iniciar esta série de artigos, a partir da qual esperamos ajudá-lo a aprender como criar um template WordPress. Esta série irá analisar passo-a-passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para que você consiga analisar e implementar todas elas, decidimos partir esta ideia em vários artigos mais simples de assimilar e explorar. No final da série, certamente conseguirá criar seu template WordPress!
Os templates wordpress são hoje em dia cada vez mais procurados e podem ser facilmente criados com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress, pode posteriormente comercializá-los nesses mercados e começar a ganhar dinheiro produzindo templates de qualidade.
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Vejamos algumas das competências do template que vamos desenvolver ao longo dos próximos artigos:
- Otimização para motores de busca
- Marcação com suporte Microformato da Google
- Semântica da estrutura de marcação válida e lógica que pode ser usada em qualquer template
- Layouts de CSS inteligentes
- Classes dinâmicas para o corpo, postagens e comentários
- Trackbacks e comentários em árvore separados
- 2 áreas para widgets que desaparecem quando não estão ocupadas
- Tudo o resto que é normal num template WordPress
No final desta série de tutoriais, com o código feito e pronto a ser implementado, você poderá fazer praticamente tudo aquilo que desejar com ele. Você pode inclusive olhar para o resultado final como a sua framework WordPress de trabalho.
COMO CRIAR O CSS DO TEMPLATE
A programação CSS pode ser bastante complicado, como também pode ser bastante simples. Uma das melhores formas de conseguir aprender bem sobre CSS é pedindo ajuda a outros usuários que já dominem a linguagem, bem como procurando tutoriais na internet que o ajudem a melhorar as suas competências técnicas com a linguagem.
Para lhe facilitar um pouco o trabalho, trazemos até si um arsenal de folhas de estilo CSS para que possa moldar corretamente o seu template às suas necessidades:
- Uma folha de estilos que reinicia o CSS padrão em todos os web browsers e que cria um standard com o qual podemos trabalhar mais facilmente
- Uma folha de estilos que recria as nossas fundações tipográficas de uma forma simples
- Uma folha de estilos apenas para as classes do WordPress
- Uma série de 6 folhas de estilo que irão criar todos os layouts do blog ou site que você deseja.
Antes de começarmos com a estilização, você deverá criar uma diretoria “style” na pasta do seu template. É lá que iremos colocar todas as nossas folhas de estilo.
REINICIAR O CSS
A nossa folha de estilos Reset CSS é adaptada a partir de uma folha de estilo do Eric Meyer com pequenas alterações. Basicamente o que ela faz é criar um standard com o qual possamos trabalhar de conveniente. Usar esta folha de estilo é muito simples. Adicione as seguintes linhas ao seu ficheiro style.css, no topo, e antes da secção de comentários.
/* Reset default browser styles */
@import url('styles/reset.css');
No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro reset.css, com o código que temos para si. Copie e cole esse código para criar o seu ficheiro:
/* --------------------------------------------------------------
Reset default browser CSS.
Based on work by Eric Meyer:
http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img { border: none; }
RECRIAR O CSS
O nosso ficheiro Rebuild CSS é um ficheiro que trabalha toda a tipografia do nosso template de uma forma inteligente e prática. O que esta folha de estilos faz é criar uma relação ritmada entre a tipografia utilizada no template e todos os elementos do mesmo, de forma a que você possa alterar convenientemente a dimensão das fontes e todo o layout mantenha uma estrutura equilibrada e funcional.
Usar o ficheiro rebuild.css é muito simples. Adicione as seguintes linhas de código imediatamente depois da importação do seu ficheiro reset.css no seu style.css.
/* Rebuild default browser styles */
@import url('styles/rebuild.css');
No entanto, para que tudo funcione corretamente, você deverá criar um ficheiro rebuild.css, com o código que temos para si. Copie e cole esse código para criar o seu ficheiro:
/* --------------------------------------------------------------
Rebuild the default browser styles
Based on work by Blueprint CSS
http://code.google.com/p/blueprintcss/
-------------------------------------------------------------- */
body {
background: #fff;
}
body, input, textarea {
color: #111;
font: 12px Arial,sans-serif;
line-height: 1.5;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
clear: both;
}
hr {
background-color: #999;
border:0;
height: 1px;
margin-bottom: 1.5em;
}
/* Text elements
-------------------------------------------------------------- */
p {
margin-bottom: 1.5em;
}
ul {
margin: 0 0 1.5em 2.5em;
}
ol {
margin: 0 0 1.5em 2.5em;
}
ul {
list-style:disc;
}
ol {
list-style-type: decimal;
}
ol ol {
list-style:upper-alpha;
}
ol ol ol {
list-style:lower-roman;
}
ol ol ol ol {
list-style:lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
margin-bottom:0;
}
dl {
margin:0 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1.5em;
}
strong {
font-weight: bold;
}
cite, em, i {
font-style: italic;
}
blockquote {
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
font-style: normal;
}
pre {
font: 11px Monaco, monospace;
line-height: 1.5;
margin-bottom: 1.5em;
}
code {
font: 11px Monaco, monospace;
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
text-decoration: none;
}
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
/*
Adapt the following for use in your Child Themes when using
different font-sizes and line-heights
body, input, textarea {
font: --px Arial,sans-serif;
line-height:--;
}
p, ul, ol, dd, pre {
margin-bottom:--em;
}
pre, code {
font:--px Monaco, monospace;
line-height:--;
}
All other styles can be overridden--or ignored!--in Child Theme stylesheets
*/
ESTILOS BÁSICOS DO WORDPRESS
Existem alguns elementos no WordPress para os quais você terá de ter um estilo. O que fizemos com esta folha de estilos foi usar esses mesmos estilos e colocá-los todos num ficheiro chamado wp.css. Neste momento, esse ficheiro inclui estilos para fluatações de imagens — incluindo captações manuais e galerias de imagens. E ainda estilos para citações.
Usar o ficheiro wp.css é muito simples. Adicione as seguintes linhas de código no seu style.css.
/* Basic WordPress Styles */
@import url('styles/wp.css');
TODOS OS LAYOUTS QUE VOCÊ IRÁ NECESSITAR
Para o seu novo template, criámos alguns layouts que podem ser facilmente adaptados à estrutura HTML do seu template. No total são 6 layouts diferentes. Cada layout é fluído (estica ou encolhe conforme a dimensão do seu browser) mas todos eles são fáceis de adaptar a uma largura fixa.
Usar qualquer um destes layouts é muito simples. Depois da importação dos estilos básicos do WordPress, importe um desses layouts. Veja um exemplo do código que deverá usar:
/* Import a basic layout */
@import url('styles/3c-b.css');
LAYOUT DE UMA COLUNA
Para usar um layout de uma coluna, crie um ficheiro com o nome 1c-b.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: One-Column
DESCRIPTION: One-column fluid layout with sidebars stacked in two columns below content
*/
#primary, #secondary {
float: left;
overflow: hidden;
padding: 10px 1.9%;
width: 46%;
}
#primary {
clear: both;
}
#footer {
clear: left;
width: 100%;
}
LAYOUT DE DUAS COLUNAS (ESQUERDA)
Para usar um layout de duas colunas com uma delas à esquerda, crie um ficheiro com o nome 2c-l.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: Two-Column (Left)
DESCRIPTION: Two-column fluid layout with one sidebars left of content
*/
#container {
float: right;
margin: 0 0 0 -200px;
width: 100%;
}
#content {
margin: 0 0 0 200px;
}
#primary, #secondary {
float: left;
overflow: hidden;
width: 180px;
}
#secondary {
clear: left;
}
#footer {
clear: both;
width: 100%;
}
LAYOUT DE DUAS COLUNAS (DIREITA)
Para usar um layout de duas colunas com uma delas àdireita, crie um ficheiro com o nome 2c-r.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: Two-Column (Right)
DESCRIPTION: Two-column fluid layout with one sidebars right of content
*/
#container {
float: left;
margin: 0 -200px 0 0;
width: 100%;
}
#content {
margin: 0 200px 0 0;
}
#primary, #secondary {
float: right;
overflow: hidden;
width: 180px;
}
#secondary {
clear: right;
}
#footer {
clear: both;
width: 100%;
}
LAYOUT DE TRÊS COLUNAS
Para usar um layout de três colunas, crie um ficheiro com o nome 3c-b.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: Three-Column
DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
*/
#container {
float: left;
width: 100%;
}
#content {
margin: 0 200px;
}
#primary, #secondary {
float: left;
overflow: hidden;
width: 180px;
}
#primary {
margin: 0 0 0 -100%;
}
* html #primary {
left: 20px;
position: relative;
}
#secondary {
margin: 0 0 0 -180px;
}
#footer {
clear: left;
width: 100%;
}
LAYOUT DE TRÊS COLUNAS (ESQUERDA)
Para usar um layout de três colunas com uma delas à esquerda, crie um ficheiro com o nome 3c-l.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: Three-Column (Left)
DESCRIPTION: Three-column fluid layout with two sidebars left of content
*/
#container {
float: right;
margin: 0 0 0 -400px;
width: 100%;
}
#content {
margin: 0 0 0 400px;
}
#primary, #secondary {
float: left;
overflow: hidden;
width: 180px;
}
#primary {
margin: 0 20px 0 0;
}
#footer {
clear: both;
width: 100%;
}
LAYOUT DE TRÊS COLUNAS (DIREITA)
Para usar um layout de três colunas com uma delas à direita, crie um ficheiro com o nome 3c-r.css e copie lá para dentro o seguinte código de CSS:
/*
LAYOUT: Three-Column (Right)
DESCRIPTION: Three-column fluid layout with two sidebars right of content
*/
#container {
float: left;
width: 100%;
}
#content {
margin: 0 400px 0 0;
}
#primary, #secondary {
float: left;
overflow: hidden;
width: 180px;
}
#primary {
margin: 0 0 0 -380px;
}
#secondary {
margin: 0 0 0 -180px;
}
#footer {
clear: left;
width: 100%;
}
ESTILIZAR O MENU
Se por ventura nunca estilizou um menu com items desordenados provavelmente irá sentir uma grande frustração quando o tentar fazer. Como bónus, eis o CSS que usamos para criar menus em templates wordpress:
#access {
margin: 0 0 1.5em 0;
overflow: auto;
}
.skip-link {
position:absolute;
left:-9000px;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul ul {
display: none;
}
.menu li {
display: inline;
}
.menu a {
display: block;
float: left;
}
É muito simples de usar e bastante prático até!
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este décimo primeiro artigo teve como base a programação do estilo do nosso template. O mais importante neste momento é que você compreenda os passos que vamos dando e caso tenha dúvidas, poderá colocá-las sem problema. Contamos com a sua participação e as suas dúvidas. Está gostado? Participe com seus comentários!
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Até já!
