WordPress temas: com­po­nen­tes e estrutura

A grande ca­rac­te­rís­tica 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. Re­su­mi­da­mente, um tema de WordPress fornece um código-fonte que descreve como um conteúdo ar­ma­ze­nado no servidor deve ser re­cu­pe­rado e compilado, de modo a compor a página de um site. Assim, os temas de WordPress oferecem aos ad­mi­nis­tra­do­res de sites a liberdade de trabalhar o design e o layout de sites WordPress da maneira que pre­fe­ri­rem. Temas de WordPress nada mais são que um conjunto de extensões de arquivos PHP (template files, sty­leshe­ets e lo­ca­li­za­tion data) e de arquivos Ja­vaS­cript e gráficos opcionais. Apre­sen­ta­re­mos neste artigo os com­po­nen­tes (building blocks) dos temas de WordPress que você precisa conhecer, as funções de cada um deles, e ex­pli­ca­re­mos como esses com­po­nen­tes interagem uns com os outros.

Com­po­nen­tes 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 Ja­vaS­cript e a in­cor­po­ra­ção CSS. Por outro lado, um tema do WordPress é composto de template files (arquivos de templates), que são co­nec­ta­dos por* including tags*. Com a ajuda de* template tags*, eles descrevem como o conteúdo do banco de dados do servidor deve ser in­cor­po­rado a uma página e exibido pelo navegador.* Con­di­ti­o­nal tags devem ser usadas caso o conteúdo a ser exibido deva se sujeitar a de­ter­mi­na­das condições. Plugins de template hook podem ser in­te­gra­dos adi­ci­o­nal­mente. A entrega dos conteúdos é ge­ren­ci­ada 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 re­pre­senta vários dos seus estados. A página web gerada pelo tema é enviada ao navegador e montada a partir de conjuntos de com­po­nen­tes básicos es­pe­ci­al­mente de­se­nha­dos para esse propósito. Os com­po­nen­tes são exibidos de maneiras di­fe­ren­tes, a depender da página acessada pelo visitante: uma página de visão-geral, um artigo ou um co­men­tá­rio, por exemplo. Esses com­po­nen­tes básicos são co­nhe­ci­dos como template files (arquivos de template). Eles com­pre­en­dem arquivos-fonte PHP que contém um misto de códigos PHP, HTML e* template tags*. Juntos, eles performam tarefas pre­ci­sa­mente definidas.

Ba­si­ca­mente, um tema de WordPress é funcional se contiver os arquivos template, index.php e style.css. Ge­ral­mente, uma variedade de arquivos de template di­fe­ren­tes pode ser en­con­trada em um tema de WordPress. Cada um re­pre­senta um tipo diferente de conteúdo, apro­vei­tando ao máximo o conjunto de funções de um blog. A lista abaixo apresenta os arquivos de template básicos, que podem ser en­con­tra­dos em quase todos os temas de WordPress.

• style.css: Envolve um dos dois elementos obri­ga­tó­rios nos WordPress themes. Os arquivos de template contêm as in­for­ma­çõ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 obri­ga­tó­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 es­pe­cí­fico for criado para entregar conteúdo, o software usará o index.php para realizar a função. A estrutura do index.php dependerá, pri­ma­ri­a­mente, de quanto código é ter­cei­ri­zado para outros arquivos de template. Em temas mais simples, o index.php ge­ral­mente engloba todo o código-fonte, incluindo diretoria raiz HTML, header, footer, sidebar e navegação. Já nos temas mais complexos, esses com­po­nen­tes são definidos por arquivos de template com­ple­men­ta­res, tais como header.php, footer.php, sidebar.php, etc. A separação é ne­ces­sá­ria para que o index.php consiga cumprir funções de estrutura básica. O index.php ge­ral­mente exibe uma quan­ti­dade de artigos de­ter­mi­na­dos na área do ad­mi­nis­tra­dor, em versão resumida.

• header.php: Se o header.php é usado pelo WordPress, significa que esse arquivo de template contém as in­for­ma­ções es­sen­ci­ais 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 ter­cei­ri­zada no header.php.

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

• sidebar.php: Ter­cei­riza o conteúdo da barra lateral. É aqui que você insere o código, seja di­re­ta­mente ou por meio de widgets do WordPress, que podem ser chamados pela função dynamic sidebar. A vantagem desse pro­ce­di­mento é que o conteúdo da barra lateral pode ser ge­ren­ci­ado pela área do ad­mi­nis­tra­dor do WordPress.

• content.php: Na visão-geral de um blog, os posts ge­ral­mente apre­sen­tam um título, uma pré-vi­su­a­li­za­ção de imagem, um teaser ou uma versão in­tro­du­tó­ria do artigo, seguida do link “Continue lendo”. Esse conteúdo pode ser inserido pelo content.php. O mesmo aplica-se às me­tain­for­ma­çõ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 in­di­vi­du­al­mente.

• home.php: esse arquivo de template pos­si­bi­lita a criação de uma página inicial se­pa­ra­da­mente. 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 oti­mi­za­dos para apre­sen­tar os posts em ordem cro­no­ló­gica. Além do conteúdo dinâmico, vários ope­ra­do­res de site oferecem outros conteúdos, como a seção “Sobre mim” ou in­for­ma­ções de contato, como página estática. Isso é possível porque o WordPress permite a criação de páginas in­di­vi­du­ais in­de­pen­den­tes 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 vi­si­tan­tes tenham a pos­si­bi­li­dade de buscar por in­for­ma­ções es­pe­cí­fi­cas no seu site. Você pode definir o modo como os re­sul­ta­dos serão apre­sen­ta­dos 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é-es­ta­be­le­ci­dos. Entre os filtros possíveis estão: ca­te­go­rias, palavras-chave, autoria, data de pu­bli­ca­ção, etc. Como o WordPress apre­sen­tará 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 co­men­tá­rios no comments.php.

• at­ta­che­ment.php: O arquivo de template at­ta­che­ment.php é usado por ope­ra­do­res de site que querem apre­sen­tar conteúdos adi­ci­o­nais, como imagens gráficas, pdf ou arquivos de mídia em vi­su­a­li­za­ção única.

• image.php: É uma versão especial do arquivo at­ta­che­ment.php. O image.php permite a definição de um arquivo de template separado para vi­su­a­li­za­ções únicas de imagens gráficas. Cajo não haja um arquivo image.php o WordPress usará o arquivo at­ta­che­ment.php.

• rtl.css: Usado por temas de WordPress que devem apre­sen­tar línguas que correm da direita para a esquerda, como árabe e hebraico. A style sheet rtl.css também é ne­ces­sá­ria.

As funções de cada arquivos de template (chamadas de template tags pelo WordPress) tem o papel de in­ter­li­gar com­po­nen­tes in­di­vi­du­ais de um site WordPress e trans­por­tar 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 é ar­ma­ze­nado di­re­ta­mente no texto fonte HTML. Já as templates do WordPress contêm somente ins­tru­çõ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.

Ge­ral­mente um projeto web tem um nome que é exibido em cada subpágina. Para fazer essa in­te­gra­ção em qualquer arquivo de template, a seguinte tag é utilizada:

bloginfo('name')

Essa tag é in­te­res­sante se você quiser que o título do site seja emitido au­to­ma­ti­ca­mente:

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

Enquanto a função bloginfo('name') age como um pla­cehol­der 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 ma­nu­al­mente 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 in­for­ma­ções sobre cada página são ar­ma­ze­na­das e car­re­ga­das por template tags.

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

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

Se você deseja obter mais in­for­ma­çõ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 lo­ca­li­za­das 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, in­te­gra­das 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 res­pon­sá­veis por carregar os códigos do site re­fe­ren­tes ao header, footer e sidebar, mudanças re­a­li­za­das nesses arquivos de template são au­to­ma­ti­ca­mente aplicadas a todas as sub­pá­gi­nas que têm acesso às including tags.

Template hooks

Template hooks, também co­nhe­ci­das como action hooks, são in­ter­fa­ces que conectam temas com funções es­pe­cí­fi­cas de softwares para blogs ou plugins. A maioria dessas in­ter­fa­ces está dis­po­ní­vel no core do WordPress. É assim que um de­sen­vol­ve­dor de temas ou um usuário pode es­pe­ci­fi­car uma ação antes do output ser iniciado ou depois de uma so­li­ci­ta­ção do banco de dados ser com­ple­tada. Por exemplo: in­for­ma­ções es­pe­cí­fi­cas podem ser in­cor­po­ra­das no header, footer ou sidebar. Os de­sen­vol­ve­do­res podem, ainda, integrar hooks próprios em seus temas.

Con­di­ti­o­nal tags

Con­di­ti­o­nal tags são PHP sta­te­ments, como* if*,* else ou while*. Em com­bi­na­ção com o WordPress, essas* tags pos­si­bi­li­tam a exibição de de­ter­mi­na­dos conteúdos sempre que as condições* forem obe­de­ci­das. Uma mensagem de boas-vindas aos vi­si­tan­tes 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 res­pon­sá­vel por entregar conteúdo é chamado de loop. Ele engloba várias funções do WordPress que são co­nec­ta­das por con­di­ti­o­nal 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 en­con­tra­dos 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 ver­da­deiro, 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 apre­sen­ta­ção do conteúdo, o título do artigo é emitido no formato heading h2. A pré-vi­su­a­li­za­çã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 sig­ni­fi­cam que o título e a pré-vi­su­a­li­za­çã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 con­fi­gu­rado na área do ad­mi­nis­tra­dor. Loops WordPress mais complexos também existem. Eles podem, por exemplo, conter links para vi­su­a­li­za­ções únicas de posts ou diversos metadados, como autor, data, categoria e palavras-chave.