Como desenvolver um tema wordpress de A a Z

Parte 1

FERRAMENTAS DE DESENVOLVIMENTO

Antes de começar a construir nosso template WordPress, é necessário que tenhamos todas as nossas ferramentas à mão. Neste primeiro artigo, iremos analisar e recomendar as melhores ferramentas para construir um ambiente de trabalho e de testes do qual você ficará orgulhoso.

SERVIDOR DE TESTES LOCAIS: XAMP OU MAMP

A melhor forma de desenvolver seu novo template WordPress é fora da internet, a partir do seu próprio computador. No entanto, para o fazer você precisa tornar seu computador num “servidor local”, aproximando-o ao máximo a um servidor de internet (Apache, MySQL e PHP). Isto significa que você poderá instalar o WordPress em seu próprio computador.

Instalar estes softwares de servidor pode ser uma tarefa relativamente complicada, mas felizmente existem alguns softwares automáticos que realizam essas tarefas automaticamente por nós. Se você tiver um computador com Windows, instale o XAMP. Se por ventura tiver um computador Mac instale o MAMP.

WORDPRESS

Obviamente, iremos necessitar de descarregar a última versão do WordPress e instalá-la corretamente em nosso servidor de testes. Se instalou o XAMP e por ventura tiver dúvidas a instalar o WordPress localmente, siga estas instruções. Se estiver a usar o MAMP siga estas instruções.

CONTEÚDO DE TESTES

A sua instalação do WordPress irá necessitar de conteúdo para testes. No seu painel de administração, vá no menu Ferramentas > Importar e escolha a opção WordPress da listagem. Agora apenas iremos necessitar de informação em formato WXR.

Eis algumas opções do mercado:

The Theme Development Checklist test data

The Sandbox Dummy Content

Obviamente que estas opções de conteúdo de testes têm os seus prós e contras. Obviamente que quanto mais conteúdo você conseguir importar melhor. Dessa forma você garante que nenhuma das funcionalidades é esquecida. Se desejar, poderá também criar o seu próprio conteúdo de testes. Quando achar que está tudo OK, use a navegação por postagens para pesquisar através de cada um dos posts que acabou de importar/criar. Verifique também os arquivos mensais e anuais, bem como os arquivos de categoria. Se faltar alguma coisa, poderá sempre tentar adicionar.

UM EDITOR DE TEXTO

Você não necessita de nenhum software visualmente atrativo e com gráficos para criar um template WordPress. Você precisa apenas de um Editor de Texto. Mas como em tudo na vida, uns são melhores que os outros. Para Windows, você pode experimentar o Notepad++. É grátis e open-source. Para Mac, recomendo vivamente o Text Wrangler que é o editor que uso, embora o Smultron seja muito bom também. Se necessitar de um cliente de FTP de qualidade, tem à escolha entre o FileZilla e o Cyberduck.

http://www.apachefriends.org/en/xampp-windows.html

http://www.mamp.info/en/index.html

http://wordpress.org/download/

http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/

http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP

http://codex.wordpress.org/Theme_Development_Checklist#.22Theme_Unit_Tests.22

http://sndbx.org/wp-content/uploads/sndbx-dummy-content.zip

http://notepad-plus.sourceforge.net/uk/site.htm

http://www.barebones.com/products/textwrangler/download.html

http://www.tuppis.com/smultron/

http://filezilla-project.org/download.php

http://cyberduck.ch/

FIREFOX

Obviamente, você pode usar qualquer browser para desenvolvimento web, mas aquele que recomendamos vivamente é sem dúvida o Firefox. Especial com dois plugins que tornam a sua vida bem mais fácil quando se pretende desenvolver templates WordPress. O plugin Web Developer adiciona uma toolbar que lhe oferece uma série de funcionalidades para inspeccionar e remover erros de código do seu template, desde desabilitar todos os estilos CSS à validação local do HTML. O plugin Firebug é também ele indispensável. Com o Firebug ligado você pode clicar em qualquer elemento da janela de seu browser e ver como ele se parece ao nível de código fonte e a forma como está sendo afectado pelo CSS.

HTML E CSS

Se você dominar relativamente bem ou pelo menos tiver conhecimentos de HTML e CSS, tanto melhor. Recomendo-lhe também a leitura deste tutorial para aprender HTML5. Embora o Tutorial não lhe ensine tudo aquilo que irá precisar, tanto a nível de HTML como de CSS, é sempre uma boa primeira abordagem

PHP

Relativamente ao PHP, é também ele importante no desenvolvimento de um template wordpress. No entanto iremos criando a nossa série de artigos de forma didática para que não tenha qualquer tipo de problema no desenvolvimento de seu template WordPress. Para conseguir realizar esta série de artigos com eficiência, você apenas necessita do básico do PHP, embora estejamos cá para ajudá-lo em tudo o que for necessário.

Parte 2

CRIANDO A ESTRUTURA HTML DO TEMPLATE WORDPRESS

A estrutura HTML do seu Template WordPress é fundamental para o trabalho que iremos desenvolver ao longo das próximas sessões. Tendo em conta que consideramos que já tem o seu ambiente de trabalho criado e pronto a trabalhar, vamos iniciar-nos no desenvolvimento da estrutura HTML do Template WordPress.

OS OBJETIVOS DE QUALQUER ESTRUTURA HTML

Quando você pretende criar/codar um determinado website você deverá ter em mente 2 objetivos: pouco código e código significativo. Isso é, usando o mínimo de marcações (HTML tags) possível e ao mesmo tempo ter a certeza de que essas marcações são significativas, usando classes semânticas e nomes de ID que apontam para o conteúdo (class=”widget-area” ao invés de class=”sidebar-left”).

Agora, quando iniciarmos a programação do Template WordPress (ou qualquer outro template para outro CMS) é necessário existir um equilíbrio entre pouco código, com muito pouca estrutura, incluindo elementos div desnecessários, e código que seja significativo e importante.

Você provavelmente já viu a tag div no passado se por ventura olhou para o código de um site ou de um template WordPress. Pense nelas como recipientes para o código HTML — recipientes que são fáceis de manusear para manipular código HTML com CSS. Obviamente, iremos ter algumas também. Mas não queremos muitas ou que não façam sentido. E queremos estrutura suficiente — usando a tag div — de forma a podermos reutilizar o nosso código para múltiplos blogs e layouts. Nós queremos programar algo que nos possa ser útil no futuro também.

http://www.mozilla.com/en-US/firefox/firefox.html

https://addons.mozilla.org/en-US/firefox/addon/60

https://addons.mozilla.org/en-US/firefox/addon/1843

http://www.escolacriatividade.com/aprender-html5/

ESTRUTURA HTML PARA O SEU TEMPLATE WORDPRESS

Vamos dar uma vista de olhos à estrutura HTML que iremos utilizar para o corpo (body) do nosso Template WordPress.

<html>

<head>

</head>

<body>

<div id="wrapper" class="hfeed">

<div id="header">

<div id="masthead">

<div id="branding"> </div>

<!– #branding –>

<div id="access"> </div>

<!– #access –>

</div>

<!– #masthead –>

</div>

<!– #header –>

<div id="main">

<div id="container">

<div id="content"> </div>

<!– #content –>

</div>

<!– #container –>

<div id="primary" class="widget-area"> </div>

<!– #primary .widget-area –>

<div id="secondary" class="widget-area"> </div>

<!– #secondary –>

</div>

<!– #main –>

<div id="footer">

<div id="colophon">

<div id="site-info"> </div>

<!– #site-info –>

</div>

<!– #colophon –>

</div>

<!– #footer –>

</div>

<!– #wrapper –>

</body>

</html>

Copie e cole este código para o seu editor de texto e guarde-o num local seguro e onde saiba que o volta a encontrar. Iremos utilizá-lo mais tarde quando construir o ficheiro de estrutura do nosso Template WordPress. Mas antes de o fazermos, existem algumas coisas importantes a analisar primeiro.

UM PEQUENO GUIA SOBRE O HTML DO SEU TEMPLATE WORDPRESS

Primeiro, o atributo de classe no wrapper (invólucro) intitulado hfeed. A classe hfeed faz parte do esquema de microformato. Em linguagem simples, isto significa que adicionando a classe hfeed à nossa página, ela irá dizer a qualquer máquina que leia o nosso site (como por exemplo os robots dos motores de busca ou outros serviços) que o nosso site publica conteúdo sindicado, como por exemplo artigos/postagens. Você irá ver uma série de classes deste género à medida que formos avançando.

Na área central do nosso HTML irá reparar que temos duas áreas para widgets que surgem depois da nossa área de conteúdos. E provavelmente também reparou que o nosso conteúdo está envolvido numa div container (invólucro). Estes pontos são chave. Isto faz com que o nosso conteúdo seja carregado antes das barras laterais aos olhos dos motores de busca (e dos leitores) mas usando uma técnica de CSS com margens negativas poderemos tornar este template num template de 1, 2, ou 3 colunas com pouco código CSS. Interessante?

Esta estrutura HTML poderá ser utilizada para os seus Templates WordPress futuros e dá-lhe a oportunidade de criar coisas bem interessantes com CSS.

Parte 3

ESTRUTURA DO TEMPLATE E DIRETÓRIO

Enquanto a grande maioria dos templates minimalistas para WordPress apenas necessitam de um ficheiro index.php e um ficheiro style.css, a grande maioria dos Templates WordPress necessitam de algo um pouco mais sólido.

O nosso template minimalista irá incluir um total de 6 ficheiros. Comece por criar uma pasta do tipo wp-content/themes/ para o seu template — neste tutorial iremos utilizar a nomenclatura “seu-template” mas ele pode tomar o nome que você desejar — e crie também os seguintes ficheiros no seu diretório (não se preocupe que eles ficarão em branco até aos próximos passos).

• index.php

• header.php

• sidebar.php

• footer.php

• functions.php

• style.css

Agora, vamos abrir o último ficheiro que criámos, o style.css, num editor de texto. A primeira coisa que necessitamos fazer é adicionar uma secção no topo do ficheiro na qual iremos colocar os comentários do CSS (algo do tipo: /* e */). É aqui que necessitamos de colocar a informação que diz ao WordPress onde está seu ficheiro de estilos do seu template. Sem isso, seu template também não irá aparecer no painel de administração do seu blog WordPress.

/*

Theme Name: Seu Template

Theme URI: http://exemplo.com/exemplo/

Description: Um Template WordPress otimizado para buscadores.

Author: Escola WordPress

Author URI: http://www.escolawp.com/

Version: 1.0

Tags: separadas por vírgulas para identificar seu template

.

Your theme can be your copyrighted work.

Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.

*/

Algo a notar: uma grande parte disto é opcional. Sério, você precisa apenas do nome do Template. Mas se alguma vez tiver como intenção lançar seu template ao público, ou está a desenvolver um template para alguém, você provavelmente irá desejar ter toda a informação. Assim que tiver isso realizado, poderá ativar seu template e começar a correr a versão de testes. E tcharam, um template branquinho! Agora é que as coisas vão começar a aquecer!

CONSTRUINDO A SUA ESTRUTURA HTML

Agora é a altura em que vamos utilizar a nossa estrutura HTML criada na segunda parte deste tutorial. Mas primeiro uma mini-lição sobre WordPress e Templates. O WordPress necessita apenas de 1 ficheiro de template, o index.php. Nós podemos, e iremos adicionar uma série de templates que podem ser usadas além do index.php em determinadas situações (artigos singulares, páginas de categorias, etc.), mas no início, o index.php é tudo o que precisamos.

Agora, o index.php e todas as suas irmãs e irmãos (que iremos usar também) criam as páginas que vemos em nosso browser. Estes são ficheiros com HTML e PHP mas no final de contas servem para criar páginas visuais.

Vamos imaginar as páginas web como histórias, algo com um princípio, um meio, e um fim. Quando escrevemos o nosso ficheiro index.php (e mais tarde o single.php, category.php, etc.) iremos concentrar-nos apenas no meio. Mas! Iremos chamá-lo tanto no princípio como no fim. É provável que estejamos constantemente refazendo o nosso meio mas ao mesmo tempo estaremos criando o princípio e fim em simultâneo.

HEADER.PHP E FOOTER.PHP

Agarre na estrutura HTML que construímos na aula anterior e copie tudo incluindo a div <div id="main"> no seu header.php e guarde-o. No final deverá ficar algo deste tipo:

<html>

<head>

</head>

<body>


<div id="header">

<div id="masthead">

http://www.escolawp.com/2010/11/criando-estrutura-html-do-template-wordpress/

<div id="branding"> </div>

<!– #branding –>

<div id="access"> </div>

<!– #access –>

</div>

<!– #masthead –>

</div>

<!– #header –>

<div id="main">

Agora, copie tudo o que está depois, incluindo a div </div> para o seu ficheiro footer.php. Ele deverá ficar algo deste género:

</div>

<!– #main –>

<div id="footer">

<div id="colophon">

<div id="site-info"> </div>

<!– #site-info –>

</div>

<!– #colophon –>

</div>

<!– #footer –>

</div>

<!– #wrapper –>

</body></html>

INDEX.PHP

Aposto que entretanto já sabe o que vamos fazer de seguida. Copie toda a estrutura HTML do meio onde está incluída a div #main para o seu ficheiro index.php. Ele deverá ficar algo deste género:


<div id="content"> </div>

<!– #content –>

</div>

<!– #container –>

<div id="primary" class="widget-area"> </div>

<!– #primary .widget-area –>

<div id="secondary" class="widget-area"> </div>

<!– #secondary –>

Com apenas duas adições pequenas teremos um Template WordPress perfeitamente inválido mas estamos certamente no bom caminho. Temos também de chamar o cabeçalho (header.php) e o rodapé (footer.php) no nosso template.

No topo do ficheiro index.php, antes de todo o código lá existente, adiciona a seguinte tag de template.

<?php get_header(); ?>

Parece-nos perfeitamente óbvio o que esta tag faz. Ela puxa e carrega o cabeçalho do site. Mas já que estamos aqui, aproveite para olhar melhor para esta tag PHP. Gostava que percebesse algumas coisas. Primeiro, a nossa função PHP é a chamada — get_header()— e começa com <?php e termina com ?>. Segundo, embora a nossa chamada seja muito curta (apenas uma linha) ela termina com um ponto e vírgula. Pequeno, mas muito importante.

Quer adivinhar qual a função que vamos colocar agora no fundo do nosso ficheiro index.php?

<?php get_footer(); ?>

Isso mesmo! Agora temos o nosso ficheiro principal que o WordPress estava procurando, o nosso index.php. Ele contém todos miolos do meio, e também um princípio e um fim. Recarregue sua página no browser e verifique o código fonte (Ver > Código-Fonte da Página, no Firefox). Aí está o seu código!

Estamos cada vez mais próximos de criar nosso Template WordPress! Fique connosco e participe!

Parte 4

CONSTRUINDO O CABEÇALHO (HEADER.PHP) DO TEMPLATE WORDPRESS

Nesta lição iremos abordar a construção de nosso ficheiro header.php e encontrar a forma correta de validar nosso template com um Doctype HTML. Esta lição está recheada de código PHP mas não se assuste que iremos explicar tudo passo-a-passo para que possa compreender todas as funcionalidades. Iremos introduzir também dois truques de otimização para buscadores ao mesmo tempo que vamos procurando construir e melhor nosso ficheiro functions.php.

A SECÇÃO “HEAD”

Neste momento seu template WordPress em branco é inválido. Isso acontece porque ele não tem um Doctype definido, dizendo ao browser como interpretar o HTML que ele está lendo. Iremos usar um XHTML Transitional Doctype para validar nosso template. Existem outras opções disponíveis, mas um XHTML transitional é certamente o melhor para um template WordPress.

Abra seu ficheiro header.php criado na lição anterior e cole lá dentro o seguinte código, antes de todo o código que já lá se encontra.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Vamos adicionar também alguns atributos à nossa tag HTML que irão tornar o nosso tipo de página mais aparente e concreto para os browsers. Troque a tag <html> no seu ficheiro header.php com a seguinte linha de código.

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Agora vamos avançar para dentro da nossa secção <head> de nosso template WordPress. A secção <head> contém a meta-informação sobre nossa página web. Informação típica como o título do documento que se consegue ver e ler no cabeçalho de nosso browser (e nos resultados de buscadores), e ainda links para folhas de estilos e RSS feeds.

Mas primeiro abra seu ficheiro functions.php. Vamos-lhe adicionar uma função para nos ajudar em alguns aspectos, especialmente quando estivermos para criar nosso título de documento. Ela vai-nos dar um número de página que poderemos adicionar ao título.

Inicie seu ficheiro functions.php com:

<?php

e 2 linhas abaixo (gostamos de deixar algumas linhas de separação nas funções) cole as seguintes 2 funções PHP:

// Tornar o template disponível para tradução

// A tradução pode ser feita em /languages/

load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );

$locale = get_locale();

$locale_file = TEMPLATEPATH . "/languages/$locale.php";

if ( is_readable($locale_file) )

require_once($locale_file);

// Puxar o número de página

function get_page_number() {

if ( get_query_var('paged') ) {

print ' | ' . __( 'Page ' , 'seu-template') . get_query_var('paged');

}

} // end get_page_number

A primeira função diz ao WordPress que queremos que nosso template esteja disponível para tradução e que os ficheiros de tradução podem ser encontrados na diretoria do template, na pasta “languages”. Se você vai criar um template WordPress, é importante que você torne seu template aberto a traduções. Você nunca sabe quando é que alguém irá necessitar de traduzir seu template para outra linguagem.

Na nossa função seguinte, get_the_page_number(), você irá ver algum texto que pode ser traduzido. Algo deste género:

__( 'Page ' , 'your-theme')

O texto preparado para tradução é o “Page “ seguido do nome de diretório do nosso template; neste caso, “seu-template”. Esta opção de tradução é relativamente simples de implementar, mas existem muitas outras formas de o fazer. Iremos analisar isso mais à frente nesta série de artigos.

Consegue adivinhar o que a função get_page_number() está ali fazendo? Se você analisar bem essa função, você irá perceber que estamos a usar um “if” para verificar se estamos numa página numerada ou não. Isso acontece quando clicamos em “older posts” ou postagens mais antigas, em templates WordPress. Se estivermos numa página numerada, esta função mostra uma barra separadora e o número de página.

Se você está começando a tentar compreender PHP pelas primeiras vezes, então queremos chamá-lo à atenção para um outro aspecto importante. Tudo aquilo que está depois do duplo travessão “//” é ignorado no código e usado apenas como comentário, ou seja, usando dois travessões desse tipo, você pode deixar imensos comentários em seu código para perceber o que está programando e o que faz cada função. Você irá ver isso muitas vezes.

Bem, voltando à nossa secção <head> de nosso ficheiro header.php. Troque as tags <head></head> pelo seguinte código:

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

<title><?php

if ( is_single() ) { single_post_title(); }

elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }

elseif ( is_page() ) { single_post_title(''); }

elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }

elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }

else { bloginfo('name'); wp_title('|'); get_page_number(); }

?></title>

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

</head>

Neste código realizamos uma série de tarefas, nomeadamente meta-informação sobre o conteúdo de nossa página, seguido de um link para a nossa folha de estilos, depois uma chamada de um script para usarmos comentários em forma de árvore quando criarmos o nosso sistemas de comentários, um truque para plugins e outras coisas relacionadas com o WordPress e por fim um link para nossos RSS feeds e pingbacks.

Incluímos também uma title tag otimizada para motores de busca que mostra apenas o título da postagem em postagens simples e páginas.

A SECÇÃO “HEADER”

Agora iremos acrescentar informação sobre o título de nosso blog, que irá funcionar como um link para a nossa homepage, uma descrição de nosso blog, e por fim um menu.

No ficheiro header.php desça até à div #branding. É aqui que iremos acrescentar nosso título e descrição do blog. Mas iremos fazer algo um pouco diferente da maioria dos templates wordpress.

Você encontra em muitos templates wordpress código que diz aos buscadores que o mais importante de tudo é o título do blog em cada uma das páginas e postagens desse mesmo blog. Essas templates fazem isso usando tags h1; uma tag que diz “isto é o que esta página tem de importante”. No entanto, aquilo que é mais importante nesta página de nosso blog, por exemplo, não é “Escola WordPress” mas sim “Como criar um Template WordPress – Parte IV”. Esta é a razão desta postagem e o que ela realmente trata.

Iremos usar as tags condicionais do WordPress e algum código HTML para criar nosso título e descrição do blog, com o intuito de fazermos aquilo que são as boas práticas. Vejamos então como esse código se apresenta:

<div id="branding">

<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>

<?php if ( is_home() || is_front_page() ) { ?>

<h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>

<?php } else { ?>

<div id="blog-description"><?php bloginfo( 'description' ) ?></div>

<?php } ?>

</div><!– #branding –>

Portanto, o texto âncora do título de nosso blog é definido usando uma tag div. A descrição de nosso blog é criada usando uma declaração “if” em PHP e algumas tags condicionais do WordPress.

Para iniciantes, esta é uma boa altura para olhar um pouco para trás e tentar compreender como as coisas estão sendo criadas e funcionando. No código anterior, estamos usando uma tag WordPress chamada bloginfo(). Poderá ver que a estamos usando para puxar o URL de nosso blog WordPress, o nome de nosso blog, e a descrição do mesmo. Ele puxa essa informação e a mostra em seu template. Compreendendo isto, você compreende todos os templates WordPress. Nós pegamos uma estrutura HTML e chamamos uma tag WordPress com PHP para realizar essa tarefa. Simples. É tudo uma questão de você se habituar a ver tags de templates WordPress juntamente com declarações “if” e alguns ciclos de PHP.

Agora desça para sua div #access. Iremos colocar um link para pular para que os usuários não tenha de estar visualizando o nosso menu ou cabeçalho e possam pular diretamente para os conteúdos.

<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'seu-template' ) ?>"><?php _e( 'Skip to content', 'seu-template' ) ?></a></div>

e iremos adicionar o nosso menu de página, usando apenas uma tag wordpress, com apenas 1 argumento:

<?php wp_page_menu( 'sort_column=menu_order' ); ?>

Fácil, correto? Portanto, sua div #access deverá parecer-se com isto:

<div id="access">

<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'seu-template' ) ?>"><?php _e( 'Skip to content', 'seu-template' ) ?></a></div>


</div><!– #access –>

Está feito! O seu template de cabeçalho WordPress está programado e otimizado corretamente para buscadores!

Parte 5

CONSTRUINDO O INDEX (INDEX.PHP) DO TEMPLATE WORDPRESS

O ficheiro Index.php é provavelmente o ficheiro mais crucial de todo o seu template WordPress. Não apenas porque o WordPress necessita dele no caso de você não estar usando nenhuma página irmã (como as páginas, category.php ou tag.php) mas porque tendo em conta o trabalho que estamos desenvolvendo, conseguir criar este ficheiro da forma mais correta, irá ajudar-nos a construir todos os outros ficheiros mais rapidamente (excepto o ficheiro de comentários que é sempre muito complicado de programar).

O CICLO

Embora o ciclo esteja a meio do seu ficheiro, de uma forma metafórica, o index.php inicia e termina com O Ciclo. Sem ele você não tem nada. Vejamos como ele se parece.

<?php while ( have_posts() ) : the_post() ?>

<?php endwhile; ?>

Muito simples mesmo. Embora você tenha postagens em seu banco de dados, o seu template irá correr um ciclo por entre eles e por cada um, realizar uma determinada tarefa. A parte do “realizar uma tarefa” é sem dúvida a mais complexa de todas. Mas ainda assim, poderemos torná-la simples e acessível.

Experimente este ciclo para começar e ao longo dos artigos iremos trabalhar em cima dele. Coloque esse código dentro da sua div #content em seu ficheiro index.php.


<?php the_content(); ?>

<?php endwhile; ?>

O que é que você obtém com esse código? Todas as suas postagens numa grande pilha. Mas poderemos tornar isso diferente.

<ul>


<li>

<?php the_excerpt(); ?>

</li>

<?php endwhile; ?>

</ul>

Conseguiu perceber o que fizemos aqui? Agora você ficou com uma lista não ordenada de todos os excertos de suas postagens. (Agora também já consegue perceber o que as funções the_content() e the_excerpt() fazem!)

Basicamente, você cria um ciclo (inicia com while e termina com endwhile) e coloca algumas coisas dentro dele — coisas como por exemplo tags de template WordPress que puxam informação de suas postagens que se encontram dentro do ciclo, tal como a tag de template bloginfo() puxa a informação das suas opções do WordPress, como vimos no último artigo.

Agora, vamos criar um ciclo realmente fantástico! Vamos iniciar com a nossa versão básica. Mas iremos fazer com que ela seja compatível com a Tag More e a Tag Next Page. Iremos colocá-lo também numa Div própria e fazer com que o browser saiba que isso é o conteúdo de suas postagens usando a classe de micro-formato “entry-content”.

<div class="entry-content">

<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>

</div><!– .entry-content –>

E o título da postagem? Isso é muito simples também. Iremos usar a tag the_title() para puxar o título da postagem e envolvê-lo numa tag <a> que linke diretamente para o the_permalink() (esse é o link permanente para qualquer postagem). Iremos adicionar também um atributo para títulos e outro micro-formato (bookmark) que diz ao browser ou ao buscador (ex.: Google) que isto é um link permanente para um artigo. Tente colocar este código por baixo de sua div .entry-content.

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Agora é necessário puxar a informação adicional sobre a sua postagem: quem escreveu o artigo, a data em que foi publicado, a categoria onde foi inserido, tags, links para comentários, etc. Gostaria de quebrar esta fase em duas fases: as coisas relacionadas com meta dados (autor e data de publicação) que colocamos antes do conteúdo da postagem, e as coisas relacionadas com utilidade (categorias, tags e link para comentários) que colocamos depois do conteúdo. E ambas as fases irão colocar a sua postagem dentro de sua própria div junto com o título.

Vamos dar uma olhada a todo o ciclo já programado. Inseri alguns comentários no PHP para o ajudar a compreender melhor o código.

<?php /* O Ciclo — com comentários! */ ?>


<?php /* Criando uma div com um ID único graças ao the_ID() e classes semânticas com o post_class() */ ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php /* um título h2 */ ?>


http://codex.wordpress.org/Customizing_the_Read_More

http://codex.wordpress.org/Template_Tags/wp_link_pages

<?php /* Meta dados da postagem com possibilidade de tradução */ ?>

<div class="entry-meta">

<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>

<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>

<span class="meta-sep"> | </span>

<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>

<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>

</div><!– .entry-meta –>

<?php /* O conteúdo da postagem */ ?>





<?php /* Categoria micro-formatada e links para tags junto com link para comentários */ ?>

<div class="entry-utility">

<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>


<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>

<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>

</div><!– #entry-utility –>

</div><!– #post-<?php the_ID(); ?> –>

<?php /* Encerrar a div e terminar o ciclo com endwhile */ ?>

<?php endwhile; ?>

NAVEGAÇÃO

Agora necessitamos de criar uma forma de navegarmos para outras postagens. Iremos criar isto usando 2 tags do WordPress: next_posts_link() e previous_posts_link(). Estas duas funções … não fazem aquilo que você julga que fazem.

Tal como tudo o que está no index.php, a navegação de postagens tem de ser criada com alguns cuidados porque é um código que iremos usar em praticamente todas as páginas de nosso template.

Uma coisa que também gostamos, é colocar a navegação no topo e no final de cada postagem.

Uma coisa que queremos fazer também é esconder a navegação caso não existam outros conteúdos para navegar. Ou seja, se você não tiver postagens antigas em seu blog, nós não queremos enviar o código de navegação para o browser. Para o fazer, envolvemos o nosso código da seguinte forma:

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>

<?php } ?>

O que estamos fazendo é indicando que queremos verificar num dado ciclo, se o número de postagens é superior a 1. Caso seja afirmativo, a navegação aparece em seu blog.

Eis o código final que você irá necessitar na sua navegação, para o topo e fundo da postagem, ou seja, antes e depois do ciclo.

<?php /* Navegação para o Topo */ ?>


<div id="nav-above" class="navigation">

<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>

<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>

</div><!– #nav-above –>

<?php } ?>

<?php /* Navegação para o Fundo */ ?>


<div id="nav-below" class="navigation">



</div><!– #nav-below –>

<?php } ?>

E agora uma última coisa que vamos fazer em nosso index.php. Nas próximas postagens iremos analisar como trabalhar com ele, mas para já vamos apenas colocar esta nova função antes da nossa get_footer().

<?php get_sidebar(); ?>

Parte 6

CONSTRUINDO O SINGLE POST, ANEXOS E PÁGINA DE ERRO 404

Depois de termos criado um template para nosso index.php onde aparecem todas as postagens de nosso blog, é altura de começarmos a criar as páginas individuais para cada tipo de conteúdo. O index é apenas a homepage de seu blog, pelo que é necessário criarmos também as páginas individuais das postagens (single post), os anexos de postagens (post attachments) e também a página de erro 404 que surge quando seus usuários não encontram os seus conteúdos.

O TEMPLATE PARA OS TEMPLATES

A estrutura do ficheiro single.php (e praticamente todos os outros templates de páginas que iremos criar) é muito parecido com o ficheiro index.php. De facto, você poderá olhar para ele como o template para os templates.



<div id="content">







</div><!– #content –>

</div><!– #container –>



No entanto irão existir diferenças bastante notáveis. Começando com as funções the_post() e comments_template().

Iremos chamar a função the_post() perto do topo de nossa página logo após a abertura da “div content” e antes da navegação. Não iremos necessitar de um ciclo neste template, uma vez que o WordPress sabe qual a postagem que estamos procurando através da função the_permalink().

E tendo em consideração que este é um single post, iremos necessitar também da função comments_template(). E porque iremos separar nossos comentários dos trackbacks quando programarmos nosso ficheiro comments.php, iremos necessitar do seguinte código:

<?php comments_template('', true); ?>

A função comments_template() deverá ficar antes de encerrarmos nossa div #content logo depois da navegação.

NAVEGAÇÃO DO SINGLE POST

Ao invés de usarmos as funções next_posts_link() e previous_posts_link() iremos usar as funções previous_post_link() e next_post_link(). Elas fazem precisamente aquilo que você está pensando que fazem.


<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">«</span> %title' ) ?></div>

<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">»</span>' ) ?></div>






TÍTULO DO SINGLE POST

Se por ventura se lembrar de nossa aula de programação do ficheiro header.php, nós usámos uma declaração IF para termos caminho livre para definirmos o título de nossos Single Posts. Para tirarmos vantagem disso neste template e em todos os templates de páginas que iremos criar, vamos envolver nosso título em tags h1.

<h1 class="entry-title"><?php the_title(); ?></h1>

Você provavelmente reparou que o código de nossos títulos é também ele muito simples. Isso é o benefício de não termos de linkar para nada ainda.

LINKS ÚTEIS DE ENTRADA DO SINGLE POST

Os links úteis de entrada são…complicados. Antes de darmos uma vista de olhos no código, deveremos começar por pensar porque razão são complicados. Por causa da forma como os comentários funcionam no WordPress iremos necessitar de ter em conta diversos cenários: comentários e trackbacks ligados; apenas os trackbacks ligados; apenas os comentários ligados; comentários e trackbacks encerrados. E isso significa…uma verdadeira confusão de declarações IF.

O código está documentado mas lembre-se de olhar para os blocos de declarações IF e ELSEIF e certamente que não será complicado para si compreendê-lo.

Da mesma forma, desejamos mostrar o link permanente de nossa postagem aqui para propósitos de bookmarking e também o RSS Feed para esta postagem singular (single post) — ideal para seus usuários seguirem conversas específicas.


<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'seu-template' ),

get_the_category_list(', '),

get_the_tag_list( __( ' and tagged ', 'seu-template' ), ', ', '' ),

get_permalink(),

the_title_attribute('echo=0'),

comments_rss() ) ?>

<?php if ( ('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Comments and trackbacks open ?>

<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'seu-template' ), get_trackback_url() ) ?>

<?php elseif ( !('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Only trackbacks open ?>

<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'seu-template' ), get_trackback_url() ) ?>

<?php elseif ( ('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Only comments open ?>

<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'seu-template' ) ?>

<?php elseif ( !('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Comments and trackbacks closed ?>

<?php _e( 'Both comments and trackbacks are currently closed.', 'seu-template' ) ?>

<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'seu-template' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>

</div><!– .entry-utility –>

Não foi assim tão difícil, foi?

CONTEÚDO DO SINGLE POST

Ao contrário do que acontece com o ficheiro index.php, o conteúdo do seu ficheiro single.php é muito simples de obter. Apenas necessitamos de chamar uma função seguida da função wp_link_pages().



ANEXOS DA POSTAGEM

Nem todos os blogueiros usam os anexos de postagem, mas eles são na verdade muito interessantes. Quando você adiciona uma imagem a um artigo seu, você está na verdade a anexá-la ao seu artigo. E, obviamente, você pode anexar muito mais do que apenas imagens. Iremos agora criar um template attachment.php, mas se você desejar, poderá customizá-lo para suportar vídeos, audio, e aplicações, criando os templates video.php, audio.php, e application.php por exemplo. Existem muitas formas de você levar sua criatividade a seus anexos com WordPress.

A forma mais rápida de procedermos aqui é copiando o seu ficheiro single.php, renomeá-lo de attachment.php, e realizando as seguintes alterações.

Primeiro que tudo, elimine a navegação de topo. Não iremos necessitar dela. Substitua-a pelo título da página que linka diretamente para o seu artigo parente.

<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'seu-template' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">« </span><?php echo get_the_title($post->post_parent) ?></a></h1>

Agora que nosso título de página está envolvido em tags h1, isso significa que o título de nossa postagem deverá estar envolvido em tags h2.


Agora, porque o nosso template de anexos precisa mesmo de mostrar esses anexos, nosso conteúdo deverá reflectir isso mesmo. E dado que a maioria dos anexos serão imagens, teremos de verificar isso e garantir que usamos uma declaração IF para esse cenário.


<div class="entry-attachment">

<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>

<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>

</p>

<?php else : ?>

<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>

<?php endif; ?>

</div>

<div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>

<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'seu-template' ) ); ?>

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'seu-template' ) . '&after=</div>') ?>


Elimine a navegação do fundo que se encontrava no código que você copiou de seu ficheiro single.php, e seu template attachment.php está pronto!

O TEMPLATE DE ERRO 404

O erro 404 é o código de servidor para “Não consigo encontrar essa página” e é algo que você não deverá descurar em seu template WordPress. O que acontece quando um link para o seu blog foi mal copiado e envia usuários para uma página que não existe em seu blog? Isso dá origem a um erro 404. Existem formas muito criativas de lidar com páginas de erro 404. Se desejar apimentar sua página, veja essas incríveis 45 páginas de erro 404 incríveis e criativas.

Felizmente, o WordPress tem um template para gerir esse erro também. Ele chama-se 404.php. A técnica que usamos em templates de páginas de erro 404 é muito simples e funcional. Ela simplesmente pede desculpa e deixa uma caixa de pesquisa para seus usuários poderem procurar por conteúdo em seu blog. Se desejar um pouco mais de criatividade, veja o exemplo que deixámos em cima.

Agora volte para o seu template dos templates, elimine a navegação e adicione algo como isto ao conteúdo.

<div id="post-0" class="post error404 not-found">

<h1 class="entry-title"><?php _e( 'Not Found', 'seu-template' ); ?></h1>

http://www.escolawp.com/2010/09/45-paginas-de-erro-404-incriveis-e-criativas/

http://www.escolawp.com/2010/09/45-paginas-de-erro-404-incriveis-e-criativas/


<p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'seu-template' ); ?></p>

<?php get_search_form(); ?>


</div><!– #post-0 –>

Parte 7

CONSTRUINDO O FICHEIRO COMMENTS.PHP

Qualquer desenvolvedor que se preze odeia programar o template de comentários do WordPress. Na verdade ele poderá tornar-se uma verdadeira confusão. Na versão 2.7, o WordPress introduziu felizmente uma forma mais fácil de criar templates para comentários — o que na verdade não foi grande ajuda se você desejar separar seus comentários e trackbacks ou desejar introduzir algumas funcionalidades customizadas. Continua sendo confuso.

Felizmente para você, tentámos recriar um template de forma mais fácil. Continua confuso, mas ainda assim mais simples, presumo. Para este tutorial sobre o desenvolvimento do template de comentários, vamos tentar guiá-lo sobre o que vai acontecer, mostrar-lhe algumas porções de código interessantes e que você vai necessitar de adicionar ao ficheiro functions.php, e depois então apresentar o código completo e final. Se tudo correr bem, no final fará sentido.

Vejamos o que irá acontecer neste template.

Prevenir o carregamento de páginas por robots

Verificar se há comentários

Contar o número de comentários e trackbacks (ou pings)

Se existirem comentários, mostrar esses comentários — com navegação para paginação de comentários

Se existirem trackbacks, mostrar os trackbacks

Se os comentários estiverem ligados, mostrar o formulário de “resposta”

Na verdade é muita coisa para um template só, mas penso que conseguiremos explicar-lhe como tudo isso funciona.

CHAMANDO OS COMENTÁRIOS E TRACKBACKS DE FORMA CUSTOMIZADA

Agora, com o WordPress 2.7 foi lançada a função wp_list_comments() que apresenta uma lista desordenada de comentários e trackbacks para os seus artigos (em árvore também). Pode ser conveniente se você assim o desejar. Mas para nós não. Nós queremos comentários em árvore separados dos trackbacks, e customizados à nossa maneira.

Para criar o código do template de comentários vamos dar-lhe algum trabalho. Você irá necessitar de criar chamadas customizadas para a sua lista de Comentários e Trackbacks. Adicione as seguintes 2 funções ao seu ficheiro functions.php.

// Chamada customizada de comentários

function custom_comments($comment, $args, $depth) {

$GLOBALS['comment'] = $comment;

$GLOBALS['comment_depth'] = $depth;

?>

<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>

<div class="comment-author vcard"><?php commenter_link() ?></div>

<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'seu-template'),

get_comment_date(),

get_comment_time(),

'#comment-' . get_comment_ID() );

edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'seu-template') ?>

<div class="comment-content">

<?php comment_text() ?>

</div>

<?php // echo the comment reply link

if($args['type'] == 'all' || get_comment_type() == 'comment') :

comment_reply_link(array_merge($args, array(

'reply_text' => __('Reply','seu-template'),

'login_text' => __('Log in to reply.','seu-template'),

'depth' => $depth,

'before' => '<div class="comment-reply-link">',

'after' => '</div>'

)));

endif;

?>

<?php } // end custom_comments

// Chamada customizada para listar trackbacks

function custom_pings($comment, $args, $depth) {


?>


<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'seu-template'),

get_comment_author_link(),

get_comment_date(),

get_comment_time() );

edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e('\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n', 'seu-template') ?>



</div>

<?php } // end custom_pings

Iremos necessitar também de uma função customizada que o custom_comments() está chamando. Esta função irá fazer a marcação do gravatar que estamos a usar, mas que ele se enquadre no esquema de microformato para hcard.

// Produz um avatar compatível com hCard

function commenter_link() {

$commenter = get_comment_author_link();

if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {

$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );

} else {

$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );

}

$avatar_email = get_comment_author_email();

$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );

echo $avatar . ' <span class="fn n">' . $commenter . '</span>';

} // end commenter_link

Se você pretende mudar a dimensão original do seu gravatar, troque o valor de 80 na função get_avatar( $avatar_email, 80 ) ). O valor 80 é a dimensão em pixeis para o seu gravatar.

O TEMPLATE DE COMENTÁRIOS

Vejamos então o template de comentários com algums comentários PHP que o vão ajudar a compreender melhor as funcionalidades presentes no template.

<?php /* O template de comentários! */ ?>

<div id="comments">

<?php /* Correr algumas verificações para robots artigos protegidos com password */ ?>

<?php

$req = get_option('require_name_email'); // Verifica se os campos são obrigatórios.

if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )

die ( 'Please do not load this page directly. Thanks!' );

if ( ! empty($post->post_password) ) :

if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :

?>

<div class="nopassword"><?php _e('This post is password protected. Enter the password to view any comments.', 'seu-template') ?></div>

</div><!– .comments –>

<?php

return;

endif;

endif;

?>

<?php /* Verificar se há comentários e fazer coisas! */ ?>

<?php if ( have_comments() ) : ?>

<?php /* Contar o número de comentários e trackbacks (ou pings) */

$ping_count = $comment_count = 0;

foreach ( $comments as $comment )

get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;

?>

<?php /* Se existire comentários, mostrar os comentários */ ?>

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

<div id="comments-list" class="comments">

<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'seu-template') : __('<span>One</span> Comment', 'seu-template'), $comment_count) ?></h3>

<?php /* Se existirem comentários suficientes, construir a paginação de comentários */ ?>

<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>

<div id="comments-nav-above" class="comments-navigation">

<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>

</div><!– #comments-nav-above –>

<?php endif; ?>

<?php /* Uma lista ordenada de comentários, custom_comments(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=comment&callback=custom_comments'); ?>

</ol>

<?php /* Se existirem comentários suficientes, construir a navegação */ ?>


<div id="comments-nav-below" class="comments-navigation">


</div><!– #comments-nav-below –>

<?php endif; ?>

</div><!– #comments-list .comments –>

<?php endif; /* if ( $comment_count ) */ ?>

<?php /* Se existirem trackbacks(pings), mostrar os trackbacks */ ?>

<?php if ( ! empty($comments_by_type['pings']) ) : ?>

<div id="trackbacks-list" class="comments">

<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'seu-template') : __('<span>One</span> Trackback', 'seu-template'), $ping_count) ?></h3>

<?php /* Uma lista ordenada de trackbacks, custom_pings(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=pings&callback=custom_pings'); ?>

</ol>

</div><!– #trackbacks-list .comments –>

<?php endif /* if ( $ping_count ) */ ?>

<?php endif /* if ( $comments ) */ ?>

<?php /* Se os comentários estiverem ligados, criar o formulário de resposta */ ?>

<?php if ( 'open' == $post->comment_status ) : ?>

<div id="respond">

<h3><?php comment_form_title( __('Post a Comment', 'seu-template'), __('Post a Reply to %s', 'your-theme') ); ?></h3>

<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'seu-template'),

get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>

<?php else : ?>

<div class="formcontainer">

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

<?php if ( $user_ID ) : ?>

<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Log out?</a></span>', 'seu-template'),

get_option('siteurl') . '/wp-admin/profile.php',

wp_specialchars($user_identity, true),

wp_logout_url(get_permalink()) ) ?></p>

<?php else : ?>

<p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'seu-template') ?></p>

<div id="form-section-author" class="form-section">

<div class="form-label"><label for="author"><?php _e('Name', 'seu-template') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'seu-template') ?></div>

<div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>

</div><!– #form-section-author .form-section –>

<div id="form-section-email" class="form-section">

<div class="form-label"><label for="email"><?php _e('Email', 'seu-template') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'seu-template') ?></div>

<div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>

</div><!– #form-section-email .form-section –>

<div id="form-section-url" class="form-section">

<div class="form-label"><label for="url"><?php _e('Website', 'seu-template') ?></label></div>

<div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>

</div><!– #form-section-url .form-section –>

<?php endif /* if ( $user_ID ) */ ?>

<div id="form-section-comment" class="form-section">

<div class="form-label"><label for="comment"><?php _e('Comment', 'seu-template') ?></label></div>

<div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>

</div><!– #form-section-comment .form-section –>

<div id="form-allowed-tags" class="form-section">

<p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'seu-template') ?></span> <code><?php echo allowed_tags(); ?></code></p>

</div>

<?php do_action('comment_form', $post->ID); ?>

<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'seu-template') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>

<?php comment_id_fields(); ?>

<?php /* O código termina aqui. Está feito. Vamos encerrá-lo. */ ?>

</form><!– #commentform –>

</div><!– .formcontainer –>

<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>

</div><!– #respond –>

<?php endif /* if ( 'open' == $post->comment_status ) */ ?>

</div><!– #comments –>

E está feito! Acaba de criar o seu template de comentários com estilo e alguns pormenores bem interessantes.

Parte 8

CONSTRUINDO O FICHEIRO DE PESQUISA E DE PÁGINA ESTÁTICA

Os ficheiros de pesquisa e de páginas estáticas são fundamentais em qualquer Template WordPress. E o melhor de tudo é que são ambos bastante simples de programar. Para ambos estes Templates iremos começar de novo usando novo template para templates (pode ir buscá-lo a nosso artigo da parte 6).



<div id="content">



http://www.escolawp.com/2010/12/criando-single-post-anexos-e-pagina-de-erro-404/









Mas obviamente, cada um dos ficheiros irá tomar um caminho diferente.

O TEMPLATE DE PESQUISA

No ficheiro search.php iremos reintroduzir o ciclo novamente no nosso Template. Desta vez com uma declaração IF — para o caso de não termos nenhuma postagem para puxar a partir do ciclo.

Vejamos como este ficheiro irá trabalhar: Se tivermos artigos (IF), ou por outras palavras, se existem artigos que correspondem ao termo pesquisado, então corremos o ciclo, algo parecido com o que acontece no index.php, mas se não tivermos artigos (IF) para correr o ciclo, ou, se não tivermos artigos que correspondam aos termos pesquisados, iremos dar a possibilidade ao usuário de voltar a pesquisar novamente.

Em termos de código, será algo deste tipo:



<div id="content">

<?php if ( have_posts() ) : ?>


<!– this is our loop –>

<?php endwhile; ?>

<?php else : ?>

<!– aqui iremos colocar uma caixa de pesquisa caso não existam artigos –>

<?php endif; ?>





Muito simples e direto, certo? Praticamente.

Gostamos de colocar todos os ficheiros indexáveis mais ou menos com a mesma estrutura: Título do Artigo, Meta, Conteúdo (ou excerto), Links Úteis. Mas quando o WordPress pesquisa por artigos ele também pesquisa por Páginas, que não necessitam de informações de meta ou links úteis. Portanto, no nosso ciclo, iremos verificar se estamos a lidar com um artigo ou uma página.

<?php if ( $post->post_type == 'post' ) { ?>

<?php } ?>

Envolva o código nessa declaração IF e ele apenas mostrará conteúdo se estivermos a lidar com um artigo. Agora que já compreendemos como tudo funciona, aqui está a div #content do nosso template de pesquisa:


<h1 class="page-title"><?php _e( 'Search Results for: ', 'seu-template' ); ?><span><?php the_search_query(); ?></span></h1>



<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'seu-template' )) ?></div>

<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'seu-template' )) ?></div>


<?php } ?>






<span class="meta-prep meta-prep-author"><?php _e('By ', 'seu-template'); ?></span>

<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'seu-

template' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>


<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'seu-template'); ?></span>


<?php edit_post_link( __( 'Edit', 'seu-template' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>


<?php } ?>

<div class="entry-summary">

<?php the_excerpt( __( 'Continue reading <span class="meta-nav">»</span>', 'seu-template' ) ); ?>


</div><!– .entry-summary –>



<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'seu-template' ); ?></span><?php echo get_the_category_list(', '); ?></span>


<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'seu-template' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>

<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'seu-template' ), __( '1 Comment', 'seu-template' ), __( '% Comments', 'seu-template' ) ) ?></span>

<?php edit_post_link( __( 'Edit', 'seu-template' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>


<?php } ?>


<?php endwhile; ?>






<?php } ?>

<?php else : ?>

<div id="post-0" class="post no-results not-found">

<h2 class="entry-title"><?php _e( 'Nothing Found', 'seu-template' ) ?></h2>


<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>



</div>

<?php endif; ?>

O TEMPLATE DE PÁGINA

Você certamente sabe para que serve um template de página. O WordPress olha para ele como um artigo não organizado de forma cronológica. E nós pensamos nele como uma página, simples. Mas maioritariamente, é definido pelas coisas que não tem: todas as tralhas e panóplias que um artigo normalmente tem (links úteis, meta, etc.).

Exceptuando os comentários. Por vezes certas páginas têm comentários. Nós não gostamos de comentários em páginas. Se quiser colocar comentários numa página, pode adicionar um campo personalizado (custom field) com nome e valor “comments”. Muito simples mesmo.

Eis o que você precisa para criar um template de página perfeito:



<div id="content">

<?php the_post(); ?>






<?php edit_post_link( __( 'Edit', 'seu-template' ), '<span class="edit-link">', '</span>' ) ?>



<?php if ( get_post_custom_values('comments') ) comments_template() // Adiciona um custom field com Nome e Valor "comments" para que possa usar comentários numa página ?>


</div>

</div>

</div>

</div>



ARCHIVE.PHP



<div id="content">


<?php if ( is_day() ) : ?>

<h1 class="page-title"><?php printf( __( 'Daily Archives: <span>%s</span>', 'your-theme' ), get_the_time(get_option('date_format')) ) ?></h1>

<?php elseif ( is_month() ) : ?>

<h1 class="page-title"><?php printf( __( 'Monthly Archives: <span>%s</span>', 'your-theme' ), get_the_time('F Y') ) ?></h1>

<?php elseif ( is_year() ) : ?>

<h1 class="page-title"><?php printf( __( 'Yearly Archives: <span>%s</span>', 'your-theme' ), get_the_time('Y') ) ?></h1>

<?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?>

<h1 class="page-title"><?php _e( 'Blog Archives', 'your-theme' ) ?></h1>

<?php endif; ?>






</div>

<?php } ?>






<span class="author vcard"><a class="url fn n" href="<?php echo

get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>





</div>


<?php the_excerpt( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>

</div>







</div>

</div>

<?php endwhile; ?>





</div>

<?php } ?>





ATTACHMENT.PHP



<div id="content">


<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'your-theme' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">« </span><?php echo get_the_title($post->post_parent) ?></a></h1>









<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-

sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>



<div class="entry-attachment">

<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>

<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>

</p>

<?php else : ?>

<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>

<?php endif; ?>

</div>

<div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>





<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'your-theme' ),


get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),

get_permalink(),


comments_rss() ) ?>


<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>


<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>


<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>


<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>

<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>

</div>


<?php comments_template(); ?>





AUTHOR.PHP



<div id="content">


<h1 class="page-title author"><?php printf( __( 'Author Archives: <span class="vcard">%s</span>', 'your-theme' ), "<a class='url fn n' href='$authordata->user_url' title='$authordata->display_name' rel='me'>$authordata->display_name</a>" ) ?></h1>

<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters( 'archive_meta', '<div class="archive-meta">' . $authordesc . '</div>' ); ?>







<?php } ?>










<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-

sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>













<?php endwhile; ?>






<?php } ?>





CATEGORY.PHP



<div id="content">


<h1 class="page-title"><?php _e( 'Category Archives:', 'your-theme' ) ?> <span><?php single_cat_title() ?></span></span></h1>

<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( 'archive_meta', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>







<?php } ?>
















<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>

<span class="cat-links"><?php printf( __( 'Also posted in %s', 'your-theme' ), $cats_meow ) ?></span>


<?php endif ?>






<?php endwhile; ?>




<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span

class="meta-nav">»</span>', 'your-theme' )) ?></div>


<?php } ?>


</div>

<?php

return;

endif;

endif;

?>

<?php /* See IF there are comments and do the comments stuff! */ ?>

<?php if ( have_comments() ) : ?>

<?php /* Count the number of comments and trackbacks (or pings) */

$ping_count = $comment_count = 0;

foreach ( $comments as $comment )

get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;

?>

<?php /* IF there are comments, show the comments */ ?>

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

<div id="comments-list" class="comments">

<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'your-theme') : __('<span>One</span> Comment', 'your-theme'), $comment_count) ?></h3>

<?php /* If there are enough comments, build the comment navigation */ ?>


<div id="comments-nav-above" class="comments-navigation">


</div>

<?php endif; ?>

<?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=comment&callback=custom_comments'); ?>

</ol>

<?php /* If there are enough comments, build the comment navigation */ ?>


<div id="comments-nav-below" class="comments-navigation">


</div>

<?php endif; ?>

</div>

<?php endif; /* if ( $comment_count ) */ ?>

<?php /* If there are trackbacks(pings), show the trackbacks */ ?>

<?php if ( ! empty($comments_by_type['pings']) ) : ?>

<div id="trackbacks-list" class="comments">

<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'your-theme') : __('<span>One</span> Trackback', 'your-theme'), $ping_count) ?></h3>

<?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php */ ?>

<ol>

<?php wp_list_comments('type=pings&callback=custom_pings'); ?>

</ol>

</div>

<?php endif /* if ( $ping_count ) */ ?>

<?php endif /* if ( $comments ) */ ?>

<?php /* If comments are open, build the respond form */ ?>

<?php if ( 'open' == $post->comment_status ) : ?>

<div id="respond">

<h3><?php comment_form_title( __('Post a Comment', 'your-theme'), __('Post a Reply to %s', 'your-theme') ); ?></h3>

<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'your-theme'),

get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>

<?php else : ?>

<div class="formcontainer">

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

<?php if ( $user_ID ) : ?>

<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s"

title="Log out of this account">Log out?</a></span>', 'your-theme'),

get_option('siteurl') . '/wp-admin/profile.php',

wp_specialchars($user_identity, true),

wp_logout_url(get_permalink()) ) ?></p>

<?php else : ?>

<p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'your-theme') ?></p>

<div id="form-section-author" class="form-section">

<div class="form-label"><label for="author"><?php _e('Name', 'your-theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>

<div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>

</div>

<div id="form-section-email" class="form-section">

<div class="form-label"><label for="email"><?php _e('Email', 'your-theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>

<div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>

</div>

<div id="form-section-url" class="form-section">

<div class="form-label"><label for="url"><?php _e('Website', 'your-theme') ?></label></div>

<div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>

</div>

<?php endif /* if ( $user_ID ) */ ?>

<div id="form-section-comment" class="form-section">

<div class="form-label"><label for="comment"><?php _e('Comment', 'your-theme') ?></label></div>

<div class="form-textarea"><textarea id="comment"

name="comment" cols="45" rows="8" tabindex="6"></textarea></div>

</div>

<div id="form-allowed-tags" class="form-section">

<p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'your-theme') ?></span> <code><?php echo allowed_tags(); ?></code></p>

</div>

<?php do_action('comment_form', $post->ID); ?>

<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'your-theme') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>

<?php comment_id_fields(); ?>

<?php /* Just … end everything. We're done here. Close it up. */ ?>

</form>

</div>

<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>

</div>

<?php endif /* if ( 'open' == $post->comment_status ) */ ?>

</div>

FOOTER.PHP

</div>

<div id="footer">

<div id="colophon">

<div id="site-info">

<p>Powered by <span id="generator-link"><a href="http://wordpress.org/" title="<?php _e( 'WordPress', 'your-theme' ) ?>" rel="generator"><?php _e( 'WordPress', 'your-theme' ) ?></a></span> and <span id="theme-link"><a href="http://example.com/" title="<?php _e( 'Your Theme for WordPress', 'your-theme' ) ?>" rel="designer"><?php _e( 'Your Theme', 'your-theme' ) ?></a></span>.</p>

</div>

</div>

</div>

</div>

<?php wp_footer(); ?>

</body>

</html>

FUNCTIONS.PHP

<?php

// Make theme available for translation

// Translations can be filed in the /languages/ directory

load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );

$locale = get_locale();

$locale_file = TEMPLATEPATH . "/languages/$locale.php";

if ( is_readable($locale_file) )

require_once($locale_file);

// Get the page number

function get_page_number() {

if (get_query_var('paged')) {

print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');

}

} // end get_page_number

// For category lists on category archives: Returns other categories except the current one (redundant)

function cats_meow($glue) {

$current_cat = single_cat_title( '', false );

$separator = "\n";

$cats = explode( $separator, get_the_category_list($separator) );

foreach ( $cats as $i => $str ) {

if ( strstr( $str, ">$current_cat<" ) ) {

unset($cats[$i]);

break;

}

}

if ( empty($cats) )

return false;

return trim(join( $glue, $cats ));

} // end cats_meow

// For tag lists on tag archives: Returns other tags except the current one (redundant)

function tag_ur_it($glue) {

$current_tag = single_tag_title( '', '', false );

$separator = "\n";

$tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) );

foreach ( $tags as $i => $str ) {

if ( strstr( $str, ">$current_tag<" ) ) {

unset($tags[$i]);

break;

}

}

if ( empty($tags) )

return false;

return trim(join( $glue, $tags ));

} // end tag_ur_it

// Register widgetized areas

function theme_widgets_init() {

// Area 1


'name' => 'Primary Widget Area',

'id' => 'primary_widget_area',





) );

// Area 2


'name' => 'Secondary Widget Area',

'id' => 'secondary_widget_area',





) );

} // end theme_widgets_init

add_action( 'init', 'theme_widgets_init' );

// Pre-set Widgets

$preset_widgets = array (

'primary_widget_area' => array( 'search', 'pages', 'categories', 'archives' ),

'secondary_widget_area' => array( 'links', 'meta' )

);

if ( !isset( $_GET['activated'] ) ) {

update_option( 'sidebars_widgets', $preset_widgets );

}

// update_option( 'sidebars_widgets', NULL );

// Check for static widgets in widget-ready areas

function is_sidebar_active( $index ){

global $wp_registered_sidebars;

$widgetcolums = wp_get_sidebars_widgets();

if ($widgetcolums[$index]) return true;

return false;

} // end is_sidebar_active

// Produces an avatar image with the hCard-compliant photo class

function commenter_link() {

$commenter = get_comment_author_link();

if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {

$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );

} else {

$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );

}

$avatar_email = get_comment_author_email();

$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );

echo $avatar . ' <span class="fn n">' . $commenter . '</span>';

} // end commenter_link

// Custom callback to list comments in the your-theme style

function custom_comments($comment, $args, $depth) {


$GLOBALS['comment_depth'] = $depth;

?>


<div class="comment-author vcard"><?php commenter_link() ?></div>

<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'your-theme'),

get_comment_date(),

get_comment_time(),

'#comment-' . get_comment_ID() );

edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'your-theme') ?>



</div>

<?php // echo the comment reply link

if($args['type'] == 'all' || get_comment_type() == 'comment') :

comment_reply_link(array_merge($args, array(

'reply_text' => __('Reply','your-theme'),

'login_text' => __('Log in to reply.','your-theme'),

'depth' => $depth,

'before' => '<div class="comment-reply-link">',

'after' => '</div>'

)));

endif;

?>

<?php } // end custom_comments

// Custom callback to list pings

function custom_pings($comment, $args, $depth) {


?>


<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'your-theme'),

get_comment_author_link(),

get_comment_date(),

get_comment_time() );

edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span>

<span class="edit-link">', '</span>'); ?></div>

<?php if ($comment->comment_approved == '0') _e('\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n', 'your-theme') ?>



</div>

<?php } // end custom_pings

HEADER.PHP

<!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" <?php language_attributes(); ?>>

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

<title><?php

if ( is_single() ) { single_post_title(); }

elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }

elseif ( is_page() ) { single_post_title(''); }

elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }

elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }

else { bloginfo('name'); wp_title('|'); get_page_number(); }

?></title>

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 )

); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

</head>

<body <?php body_class(); ?>>


<div id="header">

<div id="masthead">

<div id="branding">

<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>

<?php if ( is_home() || is_front_page() ) { ?>

<h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>

<?php } else { ?>

<div id="blog-description"><?php bloginfo( 'description' ) ?></div>

<?php } ?>

</div>

<div id="access">

<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>


</div>

</div>

</div>

<div id="main">

INDEX.PHP



<div id="content">






<?php } ?>

<?php /* The Loop — with comments! */ ?>


<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>


<?php /* an h2 title */ ?>


<?php /* Microformatted, translatable post meta */ ?>









<?php /* The entry content */ ?>





<?php /* Microformatted category and tag links along with a comments link */ ?>









<?php /* Close up the post div */ ?>

<?php endwhile; ?>






<?php } ?>





PAGE.PHP



<div id="content">







<?php edit_post_link( __( 'Edit', 'your-theme' ), '<span class="edit-link">', '</span>' ) ?>



<?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with Name and Value of "comments" to enable comments on this page ?>





SEARCH.PHP



<div id="content">


<h1 class="page-title"><?php _e( 'Search Results for: ', 'your-theme' ); ?><span><?php the_search_query(); ?></span></h1>






<?php } ?>













<?php } ?>













<?php } ?>


<?php endwhile; ?>






<?php } ?>

<?php else : ?>

<div id="post-0" class="post no-results not-found">

<h2 class="entry-title"><?php _e( 'Nothing Found', 'your-theme' ) ?></h2>


<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>



</div>

<?php endif; ?>





SIDEBAR.PHP

<?php if ( is_sidebar_active('primary_widget_area') ) : ?>

<div id="primary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('primary_widget_area'); ?>

</ul>

</div>

<?php endif; ?>

<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>

<div id="secondary" class="widget-area">

<ul class="xoxo">

<?php dynamic_sidebar('secondary_widget_area'); ?>

</ul>

</div>

<?php endif; ?>

SINGLE.PHP



<div id="content">





















<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'your-theme' ),


get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),

get_permalink(),


comments_rss() ) ?>


<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>


<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>


<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>


<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>

<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>

</div>






<?php comments_template('', true); ?>





STYLE.CSS

/*

Theme Name: Your Theme

Theme URI: http://example.com/example/

Description: A search engine optimized website framework for WordPress.

Author: You

Author URI: http://example.com/

Version: 1.0

.

Your theme will be your copyrighted work.

Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.

*/

/* Reset default browser styles */

@import url('styles/reset.css');

/* Rebuild default browser styles */

@import url('styles/rebuild.css');

/* Import a basic layout */

@import url('styles/2c-r.css');

/* Basic WordPress Styles */

@import url('styles/wp.css');

body {

margin: 1.5em 15%;

}

/* =Header

-------------------------------------------------------------- */

#branding {


}

/* =Menu

-------------------------------------------------------------- */

#access {


overflow: auto;

}

.skip-link {

display: none;

}

.menu ul {

list-style: none;

margin: 0;

}

.menu ul ul {

display: none;

}

.menu li {

display: inline;

}

.menu a {

display: block;

float: left;

}

/* =Content

-------------------------------------------------------------- */

.post {

margin: 0 0 3em 0;

}

.entry-content, .entry-summary {

margin: 1.5em 0 0 0;

}

/* =Navigation -------------------------------------------------------------- */

.navigation {


overflow: auto;

}

/* =Widget Areas -------------------------------------------------------------- */

.widget-area ul {

list-style: none;

margin-left: 0;

}

.widget-area ul ul {

list-style: disc;

margin-left: 1.1em;

}

.widget-area ul ul ul {

margin-left: 2.5em;

}

.widget-container {


}

Business

Como desenvolver um tema wordpress de A a Z