Busca

Boas práticas de Desenvolvimento com Padrões Web

WordPress – Uma pequena introdução

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 [...]

10/02/2008 por Diego Eis
32 Comentários

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*  
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:

1
2
3
4
5
6
7
8
9
10
11
12

<!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.

1
2
3

<?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.

1
2
3
4

<?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:

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.

1
2
3
4
5
6

<?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.

1
2
3
4
5
6
7
8

<?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:

1
2
3
4
5
6
7
8

<?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á:

1
2
3
4

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13

<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().

1

<? 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:

1
2
3

<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:

1
2

<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.

1
2

<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.

32 Comentários
Leia também:

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

32 Comentários

Diego fernandes da Silva 10/02/2008 às 02:23

Cara ótimo tutorial..simples e explica quase tudo…falta pouco pra ele ser completo mais pelo que parece e so fazer o curso da visie que em 2 ou tres dias vc estara fazendo Temas-WP a partir do zero deixando ele com a sua casa..tipo o tableless.com.br..Falo pra vc s galera a pior coisa e querer aprender a fazer temas a partir de um ja pronto…tem cara que complica tanto o codigo que o melhor mesmo e começar do zero!!!Parabens Galera por este excelente arquivo…

Emanuel Felipe 10/02/2008 às 08:42

Ótimo artigo, ficou uma boa referência para quem ainda não está muito familiarizado com o WordPress e deseja aprender um pouco.

Vale lembrar que onde é definido o charset do documento é possível inserir uma Template Tag, exibindo assim o charset escolhido no painel de administração.

Ao invés de:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Ficaria:

<meta http-equiv=”Content-Type” content=”text/html; charset=” />

Emanuel Felipe 10/02/2008 às 08:49

Corrigindo no comentário anterior, bugou o <?php bloginfo(‘charset’); ?>, o correto é:

<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo(‘charset’); ?>” />

(vamos ver se agora foi)

Rafael Marin 10/02/2008 às 09:30

Ah, como eu amo o WordPress!
Abraço!

raulpereira 10/02/2008 às 10:32

Olá Diego,

No tópico Autor e Data, tem um pequeno erro no código, o parâmetro que configura a formatação da data deve ser usado na Template Tag “the_time()” e não na “the_title()” como foi ilustrado, esse erro é recorrente mais a frente o artigo (um provável copy/paste). Segue logo abaixo a correção do código:

<p>por <? the_author_posts_link(); ?> em <? the_time(‘d/m/Y’); ?></p>

<h2><a href=”<? the_permalink(); ?>”><? the_title(); ?></a></h2>

obs.: Não testei o código ilustrado neste comentário, apenas segui a documentação mencionada no artigo – http://codex.wordpress.org/Template_Tags.

Abraço,
raulpereira.

Rodrigo van Kampen 10/02/2008 às 12:36

Uma coisa que acho que facilita muito para iniciantes no wordpress é não começar do zero, mas começar modificando o template padrão (Ou qualquer outro), e aos poucos ir entendendo como a coisa funciona.

No meu caso, eu procurei um que tinha a estrutura mais parecida com o que eu queria, e fui modificando.

Aliás, volta e meia aparecia aqui no Tableless para tirar uma dúvida ou outra. Falando nisso, no meu site, o http://www.PeixeFresco.net, não estou conseguindo deixar o botão “search” na mesma linha da caixa, havia conseguido no Firefox mas não no IE. Alguém poderia me ajudar com isso?

Obrigado!
Rodrigo

Cláudio 10/02/2008 às 12:46

Lá em cima, na parte onde você define o the_time. Você colocou the_title(d/M/Y). Esses parâmetros deveriam ter sido incluídos no the_time.

Maujor 11/02/2008 às 00:41

Houve uma distração e consequente engano no segundo bloco de códigos dos títulos *Autor e Data* e *BUSCA*.
A formatação da data foi inserida na template Tag *the_title()* e o correto é inserir a foirmatação em *the_time()*

RZamana 11/02/2008 às 10:10

Boa Diego…

E assim me dá mais vontade de fazer o curso. Pena que falta o cacique (le-se $$) pra isso.

Mas eu estou começando a mexer com a parte de Templates do WordPress e já estou me acostumando.

E como você disse, pra programador fica muito mais intuitivo.

Mais uma vez valeu…

Julio Fragoso 12/02/2008 às 09:05

Cara, uso o wordpress no meu site, e indico a quem está afim de fazer um site sem gastar dinheiro.

Muito bom esse teu tuto!

Parabéns

Daniele 12/02/2008 às 09:11

Oi moço, legal vcs disponibilizarem os arquivos, assim fica fácil pra gente relembrar coisas que foram conversadas lá :)
Abraços e até a próxima oficina

Samuel 13/02/2008 às 03:09

Ótimo post.
Será que da pra fazer isso também com o blogger. Dá umas dicas aí pra gente.

Abraço

Alessandro 13/02/2008 às 15:37

Como eu faço para pedir que seja feita uma lista de links mas apenas da categoria X?

Vou tentar explicar melor: nos templates que encontramos normalmente é feita uma lista dos links da categoria default “Blogroll”. Se eu criar mais categorias, como escrever no códiqo que quero criar uma lista apenas com os links de determinada categoria?

Abraços.

Diego fernandes da Silva 14/02/2008 às 03:49

acesse http://www.unaiempresas.com

Ton 14/02/2008 às 17:04

Ótimo post.
Aproveito para sugerir esta leitura.

http://www.cssdemostore.com/blog.asp?Category=40

Flavio Mendes 16/02/2008 às 11:59

Pessoal, não menosprezando o conteúdo deste post encontrei um material excelente em como como criar um tema para o WordPress em 5 partes.

Vale a pena conferir: http://www.pblog.com.br/2007/06/07/como-criar-um-tema-para-o-wordpress-parte-i/

Daniel 21/02/2008 às 12:07

Pessoal, o problema do Worpress é que na versão gratuita não permmite modificar o layout nem o CSS, tendo que aceitar os atuais temas.

Para ter esta implementação que é feita no post é necessário ter uma hospedagem a parte.

Ricardo Braz 25/02/2008 às 21:46

Diego, será que existe a possibilidade de usar o Blogger como um mini-Cms, da mesma forma que é feito com o WordPress???

Tainã 28/02/2008 às 13:28

Já que estão falando wordpress porque não darem uma introdução do Django ai pra galera??

diegoeis.com » Blog Archive » Wordpress 2.5 - Blog pessoal do Diego Eis 30/03/2008 às 21:23

[...] sobre WordPress. Se você está iniciando ou quer ter mais detalhes sobre Templates Tags, leia: WordPress – Uma pequena introdução. Posted by Diego Eis Filed in [...]

brasilportais 19/07/2008 às 13:00

Gostaria se não fosse pedir demais uma explanção mais ampla sobre Permanlink!Obrigado!

Juarez P. A. Filho 28/07/2008 às 12:49

Esse WordPress… Estou gostando muito das facilidades encontradas no WordPress.
Valeu Diego.

Duhh Vilela 26/01/2009 às 07:36

Interessante, é um sistema maraaaaaa! bom d+
Vlws pelo tuto, serviu para dar uma noção básica da potência do wordpress.

MENTALIDADE 17/02/2009 às 01:09

Um bom templante para o wordpress é uma boa idéia, já que possibilita uma originalidade maior em relação à concorrência.

Igor Flávio 18/05/2009 às 09:41

Excelente post! Ótima referência para quem está começaando com wp.

erik rocha de oliveira 25/06/2009 às 16:35

bom achei incrivel como vc fala de uma introduçao tao bem vc e mesmo fera en

Jean 26/06/2009 às 10:34

muito fera. esse post.

Acelio F 15/07/2009 às 16:38

Wordpress é demais…

Eu sempre desenvolvi sistemas de manutenção específicos para clientes e seus casos, mas a cri$e está pegando e a $obrinhagem também.

Ninguém quer pagar o preço de 1 mês de desenvolvimento de um sistema próprio. Site em HTML, o sobrinho faz de graça (o Dreamweaver faz pra ele)

Aqui no tableless que eu criei coragem para desvendar o WP.

Agora eu ofereço ele como “o” CMS para os sites que faço.

Atualmente todos os clientes querem “mexer” no conteúdo do site todo. Já ouviram falar que isto é possível e querem. Pra não “depender” de um desenvolvedor pra atualizar o site.
Às vezes nem usam, ou quando usam estragam toda a formatação… Mas está lá. Disponível e funcionando.

Fazer um tema próprio não é difícil. Lendo o codex do WP o tempo todo, pra saber qual solução usar para aquele caso específico.

Mas há um “defeito” no WP:
Ele só tem uma opção de mostrar o conteúdo completo de “posts”. Tem-se que fazer “gambiarras” manualmente e limitar um pouco a navegação para ter mais controle sobre como deve mostrar o conteúdo completo do post para cada categoria, distintamente.

Acho que isto será resolvido no futuro. Esta necessidade não é só minha.

———————–

@alessandro postei um comentário aqui, com uma solução para o que você quer.
Ela pode ser aplicada repetidas vezes dentro do template(uma pra cada categoria). Aplica fora do looping dos posts!.
http://www.tableless.com.br/mostrar-posts-recentes-no-wordpress

Implante Dentario 10/10/2009 às 15:20

Muito bom esse post

thanks

Fer

Rafael Costa 10/12/2009 às 15:35

Fantástico. Uso o WordPress e essas dicas são premordiais para um entendimento de temas para WordPress do ZERO.

Neemias 19/02/2010 às 10:13

Não creio que falte nada para que o wordpress seja um CMS. Afinal, ele tem um gerenciador de conteúdo e os temas e estrutura em geral podem ser alterados a qualquer gosto. Excelente para pequenos e grandes sites de conteúdo. Prova disso são o portal do MinC e um dos sites de esportes do Globo.com.