Depois do primeiro artigo onde fizemos uma introdução sobre como criar templates para wordpress, começamos a trabalhar nos ficheiros individuais que fazem parte do tema. Seguindo a ordem definida no inicio, na segunda parte desta série de artigos vamos falar nos ficheiros style.css e header.php.

Se esta informação é do seu interesse, subscreva a nossa newsletter para receber os artigos no seu email e ainda participar no nosso passatempo mensal onde oferecemos vários prémios. Escreva o seu email e clique em "subscrever":

[subscribeform]

style.css

No ficheiro style.css fica todo o código css que é responsável pela a aparência dos elementos que estão na página/tema. Neste ficheiro você pode definir tamanhos, cores, margens, etc, sempre usando css.

Se quer aprender css ou melhorar os seus conhecimentos, um dos melhores sites é o W3Schools que tem uma categoria destinada ao CSS: www.w3schools.com/css/.

Como fazer

Primeiro começamos por criar um novo ficheiro e guardamos na pasta do tema com o nome style.css. Depois começamos a definir os atributos de cada elemento da página.

Nós criamos um com uma personalização muito simples e básica e que funciona com os ficheiros que criamos na primeira parte do tutorial. Repare que adicionamos um comentário no inicio do ficheiro, a informação que você escrever nesta parte será usada na página de ativação do tema:

Este é o nosso CSS, se quiser pode usa-lo. Copie e cole no seu style.css:

/*
Theme Name: WPTotal
Theme URI: https://www.wptotal.com/
Description: WPTotal
Author: WPTotal
Author URI: https://www.wptotal.com/
*/

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,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
i,em{font-style:italic;}
b,strong{font-weight:bold;}
small{font-size:10px;}
big{font-size:16px;}
a img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;}
a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;}
body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-serif;color:#363636;}

#corpo{
margin:20px auto;
width:960px;
background:#fff;
}

#header{
width:940px;
margin:10px;
float:left;
}

#header h1{
font-size:24px;
margin-bottom:10px;
}

#header h2{
font-size:18px;
margin-bottom:20px;
}

#nav{
width:940px;
}

#nav li{
display:inline;
margin-right:30px;
}

#conteudo{
width:940px;
margin:10px;
float:left;
}

#artigos{
width:630px;
float:left;
}

.artigo{
width:630px;
margin-bottom:30px;
float:left;
}

.artigo h1{
font-size:20px;
margin-bottom:10px;
}

.artigo h2{
font-size:16px;
margin-bottom:10px;
}

.artigo p{
margin-bottom:10px;
}

#sidebar{
width:300px;
float:right;
}

.widget{
width:300px;
margin-bottom:20px;
}

.widget h3{
font-size:14px;
margin-bottom:10px;
}

#footer{
width:940px;
margin:10px;
font-size:11px;
text-align:center;
}

Este será o resultado:

Wordpress Theme

header.php

Com o style.css já pronto, vamos abrir o ficheiro header.php que criamos na primeira parte deste tutorial.

Neste ficheiro ficam algumas tags que são importantes para o tema e alguns plugins funcionarem. Estas linhas de código devem de ser adicionadas entre as tags <head> e </head> (apague as duas linhas de código que estão lá):

<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

Cada linha de código faz uma coisa diferente, aqui está a explicação de cada linha:

  • linha 1: indica ao browser como o  mark-up deve de ser usado;
  • linha 2: indica o tipo de conteúdo e o conjunto de caracteres que está a ser usado;
  • linha 3: a tag wp_title vai gerar um título diferente para cada página. Esta tag pode ser mais trabalhada, mas falamos nisso noutro artigo;
  • linha 4: insere automaticamente o stylesheet criado anteriormente (style.css). O wordpress deteta a sua localização e insere o url do ficheiro;
  • linha 5: gera o url de pingback, não é obrigatório mas convém usar;
  • linha 6: ativa o suporte a comentários com vários níveis e também tem a tag wp_head que serve para inserir outras linhas de código nesta zona do tema (é uma tag muito usada pelos plugins)

Ainda no header.php, umas linhas mais a baixo, temos já o "corpo" da página onde podemos adicionar 3 outras tags: uma para o título (nome do site), uma para a descrição e outra tag para listar as categorias no menu.

Aqui é opcional: você pode escrever manualmente, pode usar tags php do wordpress ou usar uma imagem para o logotipo. Nós vamos usar as tags do wordpress para o título e descrição do blog (o texto que aparece aqui pode ser alterado em Opções > Geral).

As tags para mostrar o nome e descrição são estas:

<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>

Só tem que copiar cada uma e substituir dentro das tags <h1> e <h2> que estão na div "header":

<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>

Mais em baixo temos o menu e mais uma vez é uma escolha sua. Pode criar o menu manualmente usado html, usar alguma tag do wordpress para listar as categorias (o mais usado) ou usar os menus personalizados do wordpress que permitem adicionar ou remover links do menu através do painel de administração.

Nós optamos por mostrar as categorias, por isso vamos usar o seguinte código:

	<?php wp_list_cats('sort_column=name'); ?>

Se você preferir mostrar as páginas em vez das categorias, use a seguinte tag:

	<?php wp_list_pages('title_li='); ?>

No fim destas alterações todas temos o seguinte código no nosso header.php:

<!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" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1><?php bloginfo('name'); ?></h1>
		<h2><?php bloginfo('description'); ?></h2>

		<ul id="nav">
			<?php wp_list_cats('sort_column=name'); ?>
		</ul>
	</div>

Depois de guardar todas as alterações, o seu header.php está pronto e podemos passar para as outras partes do tema.

Download dos ficheiros

Conclusão

Nesta segunda parte da série de artigos onde ensinamos a criar wordpress themes, começamos já a trabalhar nos ficheiros individuais que fazem parte de um tema. Já temos a aparência "desenhada" (no style.css) e as tags mais importantes no cabeçalho (header.php).

No próximo artigo vamos falar em dois ficheiros que são responsáveis por mostrarem os artigos na página inicial e nas páginas de arquivo (categorias, tags, etc). Se não quer perder nenhum artigo, passe pela página de subscrição e esteja sempre atualizado sobre o que publicamos aqui no wptotal.

Qualquer dúvida deixem um comentário! 🙂

Este post faz parte de uma série de artigos sobre a criação de wordpress themes: