# WordPress temas: componentes e estrutura

A grande característica do software para blogs [WordPress](https://www.ionos.com/digitalguide/hosting/cms/wordpress-the-cms-for-more-than-just-blogs/ "WordPress: o CMS que não é só para blogs") é 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*](https://www.ionos.com/digitalguide/websites/website-creation/what-is-a-footer/ "O que é um 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](https://www.ionos.com/digitalguide/websites/web-development/the-most-important-meta-tags-and-their-functions/ "As principais meta tags e suas funções"), 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:

```php
bloginfo('name')
```

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

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

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

```php
<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*:

```php
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](https://codex.wordpress.org/Template_Tags "Codex 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*:

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

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


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-temas/](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-temas/) for AI/LLM consumption.