Anatomia de um tema WordPress

Publicados: 2015-06-04

Este é um capítulo de “Up and Running: A Practical Guide to WordPress Development”, um guia multimídia para desenvolvimento WordPress que será lançado em 16 de junho. O pacote completo inclui um e-book completo, mais de 50 temas e vídeos tutoriais de desenvolvimento de plugins, e entrevistas passo a passo de código com 13 dos melhores desenvolvedores de WordPress do mundo. Pré-encomende agora em upandrunningwp.com para um desconto de 20%!

Principais conclusões:

  • Um tema WordPress é feito de um conjunto de partes consistentes. As partes cruciais de um tema não-filho incluem style.css , functions.php e vários tipos de arquivo de modelo PHP (como header.php , footer.php e index.php ).
  • Como principal fonte de estilo CSS do tema, style.css dita a aparência visual do tema. Uma seção de comentários no topo do style.css também é onde o nome do tema, autor, etc., são registrados.
  • functions.php é onde você adiciona funcionalidade de apresentação ao seu tema. Por meio de functions.php , você adicionará folhas de estilo CSS, arquivos JavaScript, menus de navegação, áreas de widgets e outras funcionalidades.
  • Os arquivos de modelo podem ser divididos informalmente em: arquivos de modelo “sempre usados” ( header.php e footer.php e sidebar.php se aplicável); arquivos na hierarquia de modelos do WordPress (como index.php , single.php e page.php ); e “partes de modelo” (trechos incompletos extraídos de outros arquivos de modelo para reduzir a repetição).
  • Os temas podem ser arbitrariamente grandes e complexos; mas essas são as peças mais importantes e previsíveis.

Este pequeno capítulo gira em torno de um grande diagrama. Porque esperar? Aqui está:

Anatomia de um tema WordPress

Não entrar em pânico! Você vai entender isso em breve. No restante deste capítulo, explicaremos cada parte do diagrama com mais profundidade.

O que há em um nome?

O WordPress decide como tratar arquivos de tema com base em seu nome.

A primeira coisa a notar é que cada arquivo no diagrama tem um nome especial. functions.php , style.css , index.php — nenhum desses arquivos é nomeado por acidente e nenhum de seus nomes é arbitrário.

O WordPress decide como tratar arquivos de tema com base em seu nome. Ele tem um tratamento especial escrito para functions.php , mas nenhum para functionz.php . Portanto, se você enviar um conjunto de instruções como functions.php , o WordPress as interpretará; mas se você enviar essas mesmas instruções como functionz.php , o WordPress, por padrão, simplesmente ignorará esse arquivo e suas instruções completamente.

estilo.css

style.css é a principal fonte da aparência visual do tema.

style.css é a principal fonte de estilo CSS do tema. Como tal, é a principal fonte da aparência visual do tema - tudo, desde a escolha de fontes e cores até se o tema opera em uma grade responsiva.

Assim, por exemplo, se você inserir o seguinte CSS no style.css do seu tema:

p {
color: blue;
}

…então qualquer coisa que estiver em um parágrafo, em qualquer lugar do seu site enquanto estiver executando seu tema, ficará azul. Muito legal, certo?

style.css é onde você fará a maior parte do seu trabalho para fazer com que seus temas tenham a aparência que você deseja.

Esse tipo de controle visual significa que há muito trabalho a ser feito no style.css — é onde você fará a maior parte do seu trabalho para fazer com que seus temas tenham a aparência desejada.

style.css também é como você registra seu tema

style.css também abriga uma seção de comentários em seu cabeçalho, que é onde os dados do tema — o nome do tema, autor, tema pai, se houver, e assim por diante — são registrados. Isso parece o seguinte:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

O WordPress lê esses comentários para obter informações sobre o seu tema. Portanto, o pequeno bloco de comentários acima - e nada mais sofisticado ou técnico - é o que faz com que seu tema apareça na lista de temas do seu site em Aparência > Temas na área de administração do WordPress:

temaAnatomia1

Você pode ver um exemplo de dados reais de registro de um tema nas linhas 1 a 6 do style.css nesse gráfico grande, Anatomia de um tema WordPress.

funções.php

functions.php é onde você adiciona funcionalidades personalizadas ao seu tema. Isso pode ser muito, incluindo:

  • Adicionando folhas de estilo CSS (incluindo o próprio style.css ) e arquivos JavaScript
  • Registrando áreas de menu de navegação e áreas de widget
  • Definindo quais tamanhos de imagem personalizados você deseja que estejam disponíveis em seu site
  • Filtrando o conteúdo da sua página

O functions.php “conversa” com o resto do WordPress principalmente por meio de ganchos do WordPress (também chamados de ganchos de ação e filtro), que permitem adicionar funcionalidades nos lugares certos. Nós nos aprofundamos no funcionamento de functions.php em Conceitos Centrais de Temas WordPress: 3. Adicionando Funcionalidade com functions.php , e nos aprofundamos muito mais em ganchos em Ganchos do WordPress (Ações e Filtros): O que eles fazem e como funcionam.

arquivos de modelo PHP

Os arquivos de modelo de um site WordPress determinam a marcação do site. Sem eles, não há literalmente nada na página.

A maior parte dos arquivos de um tema são seus arquivos de modelo PHP. Se functions.php é o cérebro de um tema, e style.css é sua roupa, e os arquivos de template são seu corpo real.

Arquivos de modelo são arquivos ,code>.php que contêm uma mistura de marcação HTML e código PHP. (Verifique esse gráfico e você verá como eles se parecem.)

Os arquivos de modelo criam marcação de duas maneiras

Juntos, esses arquivos determinam a marcação do site : o HTML real que o navegador exibe quando visita seu site. Eles fazem isso de duas maneiras.

1. HTML

Primeiro, os arquivos de modelo imprimem HTML diretamente no navegador, assim como um arquivo .html normal faria. Qualquer coisa que não esteja dentro de <!--?php?--> não é PHP: é apenas HTML simples que vai direto para a página. Portanto, se o header.php de um tema inclui um pouco de HTML, como o seguinte: 

<body class="site-body">

Isso é exatamente o que um navegador verá em todas as páginas do WordPress que incluem header.php , que deve ser todas elas.

2. PHP

Arquivos de modelo realmente fazem sua mágica usando PHP, que compila ou se transforma em HTML. Como um exemplo simples, nosso mesmo arquivo header.php poderia conter o seguinte código: 

<body class="<?php echo 'site-body'; ?>">

O PHP adicionado simplesmente ecoa (imprime) a string site-body diretamente na página. Assim, o servidor fez processamento PHP extra no final, mas o navegador ainda vê o mesmo HTML antigo.

Como você pode imaginar, os arquivos de modelo de um tema são absolutamente cruciais: sem eles, não há literalmente nada na página.

Arquivos de modelo “sempre usados”

header.php e footer.php geralmente são usados ​​em todos os lugares de um tema, porque a maioria dos sites deseja um cabeçalho e rodapé consistentes em diferentes páginas.

Alguns arquivos de modelo são usados ​​em todas as páginas da Web de um site. Os principais exemplos são header.php e footer.php .

Esses arquivos são usados ​​com tanta frequência que o WordPress possui funções especiais para incluí-los em outros arquivos de modelo: get_header() e get_footer() . Chamadas desta forma, sem parâmetros, essas funções simplesmente pegam header.php e footer.php , e os soltam onde a função foi chamada.

Por que esses arquivos são usados ​​em todos os lugares? É porque a maioria dos sites deseja um cabeçalho e rodapé consistentes em diferentes páginas. Se uma página tiver o logotipo da sua empresa e o menu de navegação principal, é uma boa aposta que você deseja que outras páginas façam o mesmo. O mesmo vale para o rodapé na parte inferior da página.

Como observação, sidebar.php também é um tipo de arquivo desse tipo, porque geralmente é o caso da maioria dos tipos de páginas da Web em um site compartilharem uma única barra lateral - talvez com exceção de páginas de largura total dedicadas à exibição do tipo de página Postagens. sidebar.php também tem sua própria função, get_sidebar() .

Arquivos na hierarquia de modelos do WordPress

A verdadeira emoção acontece em arquivos como index.php , single.php e page.php . Esses arquivos ditam qual marcação aparecerá para diferentes tipos de dados de postagem .

Para reformular isso, o WordPress sabe qual página usar para qual tipo de dados de postagem. Por exemplo:

  • Se a página da Web solicitada envolver uma postagem do tipo Página (por exemplo, sua página Sobre), o WordPress provavelmente usará page.php para criar essa página da Web.
  • Se a página da Web solicitada for uma postagem do tipo Post individual (por exemplo, você está visualizando uma postagem de blog específica), o WordPress provavelmente usará single.php para construí-la.
  • Se você estiver analisando todas as postagens do tipo Post que escreveu em 2014, o WordPress provavelmente usará archive.php para criar essa página da web.

Esta é a mágica da hierarquia de templates do WordPress , que abordamos em profundidade em Conceitos Fundamentais dos Temas do WordPress: 1. A Hierarquia de Templates.

Esses arquivos de modelo são baseados no loop

Todos esses arquivos de modelo “in-the-template-hierarchy” compartilham algo muito importante: eles são construídos em torno do The Loop, um dos princípios fundamentais absolutos do desenvolvimento do WordPress.

Nós nos aprofundamos no The Loop nos principais conceitos dos temas do WordPress: 2. Processamento de Posts com o The Loop. O Loop é muito legal, então se você é novo nisso, segure suas meias para que o Loop não as exploda!

Peças do modelo

Digamos que há uma seção de index.php e page.php que é exatamente a mesma. Devemos repetir esse código em ambos os arquivos?

Na verdade, DRY—”Don't Repeat Yourself!”—é um grito de guerra para bons programadores. A repetição causa todos os tipos de problemas. E se você quiser mudar algo sobre a seção repetida? Agora você tem que alterá-lo em dois lugares. E se você esquecer de alterá-lo em um lugar ou cometer um erro em um arquivo, mas não em outro? Agora seu código está fora de sincronia e seu site está com bugs. (Agora: e se você repetir o mesmo código vinte vezes? Você tem que repetir cada mudança que fizer vinte vezes, e esperar que você “pegue todas”.)

As partes do modelo pegam uma parte provavelmente repetida de um arquivo de modelo e as movem para um novo arquivo. Dessa forma, index.php e page.php podem simplesmente fazer referência à mesma parte do modelo, em vez de escrevê-la individualmente duas vezes; e se você quiser alterar essa seção, altere-a apenas uma vez.

Agora você conhece a anatomia do seu tema

Estas são as coisas para realmente entender sobre um tema WordPress. Mesmo um tema ThemeForest muito grande será construído em torno desse esqueleto central, então entenda como essas peças se interligam e você terá muito poder para entender os temas do WordPress.

Com essa lição de anatomia concluída, os próximos três capítulos mergulham em quatro dos princípios cruciais de programação que explicam como um tema funciona:

  1. A hierarquia de modelos do WordPress
  2. O laço
  3. funções.php
  4. Ganchos do WordPress

Avante!