WordPress temas: componentes e estrutura

A grande característica do software para blogs WordPress é que ele separa a parte do design do core do programa. Ao separar os temas (WordPress themes) do restante do código, o WordPress permite que você ajuste o layout do seu site pelo front-end, sem que o programa em si seja alterado. Resumidamente, um tema de WordPress fornece um código-fonte que descreve como um conteúdo armazenado no servidor deve ser recuperado e compilado, de modo a compor a página de um site. Assim, os temas de WordPress oferecem aos administradores de sites a liberdade de trabalhar o design e o layout de sites WordPress da maneira que preferirem. Temas de WordPress nada mais são que um conjunto de extensões de arquivos PHP (template files, stylesheets e localization data) e de arquivos JavaScript e gráficos opcionais. Apresentaremos neste artigo os componentes (building blocks) dos temas de WordPress que você precisa conhecer, as funções de cada um deles, e explicaremos como esses componentes interagem uns com os outros.

Componentes básicos de um WordPress tema

Páginas estáticas são, em essência, baseadas em um único documento HTML, que contém: todo o conteúdo, os elementos de JavaScript e a incorporação CSS. Por outro lado, um tema do WordPress é composto de template files (arquivos de templates), que são conectados por including tags. Com a ajuda de template tags, eles descrevem como o conteúdo do banco de dados do servidor deve ser incorporado a uma página e exibido pelo navegador. Conditional tags devem ser usadas caso o conteúdo a ser exibido deva se sujeitar a determinadas condições. Plugins de template hook podem ser integrados adicionalmente. A entrega dos conteúdos é gerenciada por um mecanismo que, no WordPress, é chamado de loop.

Template files

Um tema do WordPress pode ser entendido como a maquete de um site, pois representa vários dos seus estados. A página web gerada pelo tema é enviada ao navegador e montada a partir de conjuntos de componentes básicos especialmente desenhados para esse propósito. Os componentes são exibidos de maneiras diferentes, a depender da página acessada pelo visitante: uma página de visão-geral, um artigo ou um comentário, por exemplo. Esses componentes básicos são conhecidos como template files (arquivos de template). Eles compreendem arquivos-fonte PHP que contém um misto de códigos PHP, HTML e template tags. Juntos, eles performam tarefas precisamente definidas.

Basicamente, um tema de WordPress é funcional se contiver os arquivos template, index.php e style.css. Geralmente, uma variedade de arquivos de template diferentes pode ser encontrada em um tema de WordPress. Cada um representa um tipo diferente de conteúdo, aproveitando ao máximo o conjunto de funções de um blog. A lista abaixo apresenta os arquivos de template básicos, que podem ser encontrados em quase todos os temas de WordPress.

• style.css: Envolve um dos dois elementos obrigatórios nos WordPress themes. Os arquivos de template contêm as informações de cabeçalho (header), como o nome e uma breve descrição do tema, assim como o nome do autor, a versão, a licença e o link para a licença. O style.css age como a principal style sheet de um site WordPress e abre espaço para o código CSS do seu tema escolhido.

• index.php: O segundo elemento obrigatório de todo tema do WordPress é o index.php. Ele gera a visão-geral de um site e pode ser usado como página inicial. O index.php é útil como um último arquivo reserva. Em outras palavras: se nenhum arquivo de template específico for criado para entregar conteúdo, o software usará o index.php para realizar a função. A estrutura do index.php dependerá, primariamente, de quanto código é terceirizado para outros arquivos de template. Em temas mais simples, o index.php geralmente engloba todo o código-fonte, incluindo diretoria raiz HTML, header, footer, sidebar e navegação. Já nos temas mais complexos, esses componentes são definidos por arquivos de template complementares, tais como header.php, footer.php, sidebar.php, etc. A separação é necessária para que o index.php consiga cumprir funções de estrutura básica. O index.php geralmente exibe uma quantidade de artigos determinados na área do administrador, em versão resumida.

• header.php: Se o header.php é usado pelo WordPress, significa que esse arquivo de template contém as informações essenciais do site, como o doctype e a HTML tag de abertura, além de elementos HTML head, como as meta tags, além de links para style sheets e scripts. Na maior parte das vezes a tag body também é aberta no header. A parte visível do header de um tema, incluindo a navegação, pode ser terceirizada no header.php.

• footer.php: Funciona como a parte oposta do header.php. É aqui que o rodapé de um site fica localizado. No footer.php tanto a body tag quanto a HTML tag estão fechadas.

• sidebar.php: Terceiriza o conteúdo da barra lateral. É aqui que você insere o código, seja diretamente ou por meio de widgets do WordPress, que podem ser chamados pela função dynamic sidebar. A vantagem desse procedimento é que o conteúdo da barra lateral pode ser gerenciado pela área do administrador do WordPress.

• content.php: Na visão-geral de um blog, os posts geralmente apresentam um título, uma pré-visualização de imagem, um teaser ou uma versão introdutória do artigo, seguida do link “Continue lendo”. Esse conteúdo pode ser inserido pelo content.php. O mesmo aplica-se às metainformações como data, autor, categoria e palavras-chave (tags) do post.

• single.php: Enquanto o index.php oferece a visão-geral de um artigo, o single.php do WordPress é utilizado quando um usuário deseja acessar artigos individualmente.

• home.php: esse arquivo de template possibilita a criação de uma página inicial separadamente. Se você não utilizar a estrutura home.php, seu site se baseará no index.php para gerar sua página inicial. Ao ser baseada no index.php, sua página inicial nada mais será que a visão-geral dos seus posts mais recentes.

• page.php: Os WordPress themes são otimizados para apresentar os posts em ordem cronológica. Além do conteúdo dinâmico, vários operadores de site oferecem outros conteúdos, como a seção “Sobre mim” ou informações de contato, como página estática. Isso é possível porque o WordPress permite a criação de páginas individuais independentes do layout e do design de outros arquivos de templates, tais como o index.php e o single.php.

• 404.php: Se você tem interesse em criar uma página de erro 404 para o seu blog WordPress, você pode usar um arquivo de template com esse mesmo nome.

• search.php: É possível adicionar uma barra de busca no WordPress para que seus visitantes tenham a possibilidade de buscar por informações específicas no seu site. Você pode definir o modo como os resultados serão apresentados usando a tag search.php.

• archive.php, category.php, tag.php, author.php, date.php: Além da função de busca, o WordPress oferece variados arquivos de template que podem ser usados para organizar os posts do blog de acordo com critérios pré-estabelecidos. Entre os filtros possíveis estão: categorias, palavras-chave, autoria, data de publicação, etc. Como o WordPress apresentará esses conteúdos fica a cargo das tags category.php, tag.php, author.php e date.php. Se alguma dessas tags estiver faltando, o WordPress se baseará no arquivo archive.php.

• comments.php: Se você quer que seus usuários possam comentar no seu site, você precisa destinar uma tag somente para isso. Defina a forma dos comentários no comments.php.

• attachement.php: O arquivo de template attachement.php é usado por operadores de site que querem apresentar conteúdos adicionais, como imagens gráficas, pdf ou arquivos de mídia em visualização única.

• image.php: É uma versão especial do arquivo attachement.php. O image.php permite a definição de um arquivo de template separado para visualizações únicas de imagens gráficas. Cajo não haja um arquivo image.php o WordPress usará o arquivo attachement.php.

• rtl.css: Usado por temas de WordPress que devem apresentar línguas que correm da direita para a esquerda, como árabe e hebraico. A style sheet rtl.css também é necessária.

As funções de cada arquivos de template (chamadas de template tags pelo WordPress) tem o papel de interligar componentes individuais de um site WordPress e transportar conteúdo entre o bancos de dados e o servidor.

Template tags

Template tags são funções contidas por arquivos de template, que tem como objetivo recuperar o conteúdo do banco de dados. Nos sites estáticos, o conteúdo é armazenado diretamente no texto fonte HTML. Já as templates do WordPress contêm somente instruções sobre qual conteúdo do banco de dados deve ser incluído. Template tags permitem que o software do WordPress crie cada página de forma dinâmica, assim que for chamada. Sites que funcionam assim têm suas vantagens, como mostra o exemplo abaixo.

Geralmente um projeto web tem um nome que é exibido em cada subpágina. Para fazer essa integração em qualquer arquivo de template, a seguinte tag é utilizada:

bloginfo('name')

Essa tag é interessante se você quiser que o título do site seja emitido automaticamente:

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

Enquanto a função bloginfo('name') age como um placeholder para o nome do site, o wp_title() emite o título da subpágina em questão. O conteúdo que deve ser emitido quando um site é chamado é compilado pelo banco de dados do servidor. A partir desse processo, o software cria o título, baseando-se no seguinte padrão:

Nome do Blog | Título da subpágina

Em se tratando de sites estáticos, você deve inserir o título da página (page title) no exato texto de cada página HTML do seu projeto web:

<title> Nome do Blog | Título da subpágina /title>

Mas o que você deve fazer se quiser mudar o nome do seu blog? Para um projeto web estático, você tem que abrir cada subpágina no editor e ajustar manualmente uma a uma. Em sites dinâmicos, o processo é bem mais simples: mudanças que afetam múltiplas páginas podem ser feitas no mesmo local do banco de dados, já que as informações sobre cada página são armazenadas e carregadas por template tags.

Seguindo o mesmo padrão, títulos, conteúdos de posts e metadados são carregados no provedor por arquivos de template:

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

Se você deseja obter mais informações sobre cada template tag do WordPress, acesse o Codex no WordPress.org.

Including tags

Including tags são uma variante especial das template tags do WordPress. Elas ficam localizadas dentro dos temas e são usadas para carregar arquivos de template como header.php, footer.php e sidebar.php. Including tags são uma função interna do WordPress, integradas em arquivos de template básicos, como index.php, single.php e page.php:

get_header() 
get_footer() 
get_sidebar()

Elas oferecem a mesma vantagem: se forem arquivos de template os responsáveis por carregar os códigos do site referentes ao header, footer e sidebar, mudanças realizadas nesses arquivos de template são automaticamente aplicadas a todas as subpáginas que têm acesso às including tags.

Template hooks

Template hooks, também conhecidas como action hooks, são interfaces que conectam temas com funções específicas de softwares para blogs ou plugins. A maioria dessas interfaces está disponível no core do WordPress. É assim que um desenvolvedor de temas ou um usuário pode especificar uma ação antes do output ser iniciado ou depois de uma solicitação do banco de dados ser completada. Por exemplo: informações específicas podem ser incorporadas no header, footer ou sidebar. Os desenvolvedores podem, ainda, integrar hooks próprios em seus temas.

Conditional tags

Conditional tags são PHP statements, como if, else ou while. Em combinação com o WordPress, essas tags possibilitam a exibição de determinados conteúdos sempre que as condições forem obedecidas. Uma mensagem de boas-vindas aos visitantes de um site é um bom exemplo:

if ( is_user_logged_in() ): 
    echo 'Bem-vindo! Você já é registrado no nosso site.'; 
else: 
    echo 'Bem-vindo! Registre-se agora no nosso site.'; 
endif;

Loop

O mecanismo do software do WordPress responsável por entregar conteúdo é chamado de loop. Ele engloba várias funções do WordPress que são conectadas por conditional tags. O exemplo a seguir mostra a estrutura básica de um loop do WordPress:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <h2><?php the_title(); ?></h2> 
    <div class="entry"> 
        <?php the_excerpt(); ?> 
    </div> 
<?php endwhile; endif; ?>

O trecho do código if (have_post()) na primeira linha instrui o WordPress a checar se os posts do blog estão presentes. Se os posts do blog forem encontrados no banco de dados, o trecho de código while (have_posts()) : the_post() faz com que o software execute essas funções no loop, até que have_posts() não seja mais verdadeiro, ou seja, até que não haja mais posts.

O loop, portanto, inclui todos os recursos até a PHP statement endwhile na linha 6 (neste exemplo, the_title(), que é usado para exibir o título do artigo, e a função the_excerpt(), que instrui o software a carregar o trecho do post do banco de dados). Na apresentação do conteúdo, o título do artigo é emitido no formato heading h2. A pré-visualização do artigo é lançado dentro de uma div box com o CSS class name entry.

Na página inicial de um blog WordPress, loops simples como esses significam que o título e a pré-visualização dos textos dos posts serão exibidos em sequência, a partir do conteúdo mais recente. O número de posts exibidos por página pode ser configurado na área do administrador. Loops WordPress mais complexos também existem. Eles podem, por exemplo, conter links para visualizações únicas de posts ou diversos metadados, como autor, data, categoria e palavras-chave.