por Diego Eis Fevereiro 10th, 2008
Wordpress - Uma pequena introdução
Este artigo é uma prévia do que passamos na Oficina de Wordpress da Visie. As aulas são bem mais detalhadas por conta de ter um professor explicando e trocando experiências. Mas este artigo mostra o quanto é fácil criar um template para Wordpress.
O Wordpress não foi feito para ser um CMS. Ainda falta algumas características interessantes para que ele possa ser realmente um CMS. Mesmo assim, para sites pequenos e de conteúdo, o Wordpress é perfeito como CMS. Tem um Admin fácil de utilizar e seu código bem feito e flexível para mudanças no layout e implementações de programação. E o melhor, é tudo de graça.
Criando o index.php e o style.css
Para fazer um tema de Wordpress, você precisa apenas de dois arquivos: index.php e o style.css.
O style.css tem uma pequena sintaxe no começo do arquivo com informações do autor do Template. Essas informações serão utilizadas pelo Wordpress na tela de Templates.
A sintaxe que está escrita no meu style.css é este:
/* Theme Name: Oficina Wordpress da Visie Theme URI: http://visie.com.br/wordpress Description: O layout da Visie Version: 1.0 Author: Diego Eis Author URI: http://tableless.com.br/ Visie'08 http://tableless.com.br This theme was designed and built by Diego Eis, whose blog you will find at http://tableless.com.br/ */
Você pode utilizar esse código e modificar para ficar com suas informações. Não precisa decorar, isso é coisa de maluco. 
Crie um style.css com este código dentro. Não iremos utilizar o CSS neste artigo.
Crie também um index.php com a estrutura básica de HTML. Eu utilizo sempre assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html>
Daqui para frente, irei colocar apenas o código que irá dentro do BODY do documento. Portanto, tudo que iremos ver agora, insira dentro do BODY do seu documento.
As Template Tags
O segredo do Wordpress são as Template Tags. Você pode conferir todas aqui: http://codex.wordpress.org/Template_Tags
Os templates do wordpress são escritos em PHP. Isso torna pro designer um pouco complicado, mas não muito. Se você souber um pouco de PHP, fazer um template é muito fácil, porque PHP é uma linguagem que todo mundo usa. Para facilitar, o Wordpress chama as funções do PHP que são utilizadas pelo seu sistema de Template Tags. As Template Tags não passam de funções PHP que recuperam do banco, informações que você precisará para compor o conteúdo do site. Para o programador isso não muda nada. Mas para o pessoal que não é tão íntimo assim com a linguagem PHP, a forma que usamos essas “funções” (Template Tags) facilita demais.
O Loop - Listando os posts na página
O Loop é o responsável pelo trecho de código que será repetido para cada post impresso na tela.
<?php while ( have_posts() ) : the_post (); ?> <?php endwhile; ?>
Pra você chamar os posts do blog é muito simples. Você começará utilizando duas Template Tags dentro deste código de Loop.
<?php while ( have_posts() ) : the_post (); ?> <h2><? the_title(); ?></h2> <? the_content(); ?> <?php endwhile; ?>
A primeira Template Tag que coloquei foi a the_title(). Ela chama os títulos dos posts do site.
A segunda, the_content() chama o conteúdo dos posts. O Conteúdo vem escrito da forma que você criou no Wordpress.
Apenas com esse código acima, você não faz um blog completo. Um blog tem outras características importantes. E são elas que iremos ver agora.
Características de um Blog
Há algumas características que compõem um blog. Essas características são encontradas geralmente em blogs, isso não quer dizer que em sites de notícias não podem contem essas características:
- Comentários
- Categorias
- Data, autor
- Feed
- Arquivo (histórico)
- Busca
- Permalink
Não iremos mostrar em nosso código como se faz Comentários nem Categorias. O Artigo iria ficar muito mais complicado. Portanto, se estiver interessado, faça a Oficina de Wordpress da Visie.
Vamos agora melhorar um bocado esse código para que o site se pareça mais com um blog.
Primeiro, vamos colocar Permalinks nos títulos dos posts.
<?php while ( have_posts() ) : the_post (); ?> <h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2> <? the_content(); ?> <?php endwhile; ?>
Autor e Data
A Template Tag que iremos utilizar é a the_author_posts_link() para Autor, que colocará a o nome do Autor com o link para seus posts. E a the_time() para colocar a data.
<?php while ( have_posts() ) : the_post (); ?> <p>por <? the_author_posts_link(); ?> em <? the_time(); ?></p> <h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2> <? the_content(); ?> <?php endwhile; ?>
Você pode deixar a Template Tag the_time do jeito que você quiser. Ela usa aquela tabela de formatação padrão de data do PHP, você pode encontrar essa tabela aqui: http://php.net/date/
Iremos formatar nossa data aqui:
<?php while ( have_posts() ) : the_post (); ?> <p>por <? the_author_posts_link(); ?> em <? the_time(d/m/Y); ?></p> <h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2> <? the_content(); ?> <?php endwhile; ?>
BUSCA
Para colocar um formulário de busca é muito simples. O código do formulário será:
<form action="<? bloginfo('home'); ?>">
<input name="s" type="text" id="busca" value="<? =$_GET['s'] ?>" />
<input type="submit" value="Procurar" />
</form>
A Template Tag bloginfo() tráz do banco informações sobre o site. Neste caso, ele vai trazer a URL da home do site.
Os inputs do formulário de busca do Wordpress já vem com nomes pré-definidos, o input de busca, por exemplo, chama-se s.
Nosso código está assim agora.
<form action="<? bloginfo('home'); ?>">
<input name="s" type="text" id="busca" value="<? =$_GET['s'] ?>" />
<input type="submit" value="Procurar" />
</form>
<?php while ( have_posts() ) : the_post (); ?>
<p>por <? the_author_posts_link(); ?> em <? the_time(d/m/Y); ?></p>
<h2><a href="<? the_permalink(); ?>"><? the_title(); ?></a></h2>
<? the_content(); ?>
<?php endwhile; ?>
Arquivo e Histórico
Para criar os arquivos, ou histórico, iremos utilizar a Template Tag: wp_get_archives().
<? wp_get_archives(); ?>
Por padrão, essa Template Tag irá gerar uma lista de links dos meses que há posts. Preste bem atenção no código HTML que ele retorna. Ele cria uma lista de LI sem UL ou OL envolta.
Por tanto, temos que escrever dessa forma:
<ul> <? wp_get_archives(); ?> </ul>
Ele faz deste modo caso você queira colocar uma CLASS ou ID para nomear a lista.
Linkando o FEED o arquivo CSS
O Wordpress já cria os Feeds automaticamente. O trabalho que temos é colocar um link para o que o visitante consiga copiar o endereço do RSS e cadastrar no leitor de Feeds preferido dele. Podemos oferecer em RSS, RSS 2 ou ATOM. Existem pessoas que oferecem os três formatos. Vamos oferecer apenas um formato: o RSS2.
A tag link tem um atributo ‘rel’. O atributo rel é mandatório, ele vai dizer qual será o resto da tag. Se você por exemplo colocar o valor rel=”stylesheet”, você está dizendo ao navegador que essa tag link é relativo a uma folha de estilo.
O valor ‘alternate’ diz ao navegador que estamos diponibilizando o conteúdo de nosso site em um meio alternativo:
<link rel="alternate" ... <link rel="stylesheet" ...
A tag type serve para indicar o tipo de arquivo que será carregada. No caso da folha de estillo, existem dois tipos que são utilizados hoje: o XSLT, que é utilizado para formatar código XML. E o tipo CSS, que é para formatar código HTML.
<link rel="alternate" type="application/rss+xml" href="<? bloginfo('rss_url'); ?>" />
<link rel="stylesheet" type="text/css" href="<? bloginfo('stylesheet_url'); ?>" />
Novamente iremos utilizar a tag boginfo(). Agora ela irá buscar o endereço do RSS e do CSS.
Perceba que utilizamos neste exemplo apenas um arquivo, o index.php para listar o conteúdo. O Wordpress tem uma maneira eficaz de hierarquia de arquivos. Por exemplo: nós precisamos de um arquivo chamado archives.php para criar a lista de histórico. Na falta deste arquivo, o Wordpress utiliza o index.php para criar a lista. Se tivéssemos feito o archives.php e colocado o código que utlizamos acima que cria a lista de histórico, o Wordpress não utilizará o index.php.
