DRY WordPress Desenvolvimento de Temas

Portuguese (Português) translation by João Fagner (you can also view the original English article)

Quando você está construindo um tema em WordPress, vale a pena dedicar algum tempo para identificar onde você pode evitar ter repetição de código. Isto te dará muitos benefícios:

Você tem que escrever o código uma vez, te tornando mais eficientes.
Se você for editar o código no futuro, você apenas terá que fazê-lo uma vez.
Quem tiver trabalhando com seu tema não vai ficar confuso com várias iterações no mesmo pedaço de código.
Seu tema terá menos código, que pode te dar benefícios e desempenho.

Na minha experiência, o mais importante destes pontos é o segundo: quando eu tenho que editar temas por algum motivo, a tarefa é muito mais fácil se cada pedaço de código só existe uma vez.

Neste tutorial, mostrarei algumas das maneiras em que você pode adotar o princípio de Don't Repeat Yourself (Não se Repita), ou DRY, no seu desenvolvimento de tema, tornando-se mais eficiente e menos estressado no processo.

O que há para não gostar?

1. Utilizando Frameworks e Temas Starter (Arranque)

Usar um framework, ou códigos de terceiros ou mesmo um que você mesmo tenha desenvolvido, isso significa que muitos do código que você precisarará já existe quando você for começar, você não vai ter que reescrever o mesmo código novamente (ou mesmo tudo).

Quanto código você precisará em seu framework — você pode preferir usar um framework de barebones que você pode adicionar apenas os elementos essenciais ou um mais abrangente no qual você adiciona mais funcionalidades para o seu projeto.

Tão bom quanto frameworks, existem um número crescente de temas de arranque (starter) disponíveis para te ajudar a dar uma arrancada na sua codificação. Atualmente, o mais usado é o tema _s, que lhe dá o esqueleto que você precisa para criar temas rapidamente em WordPress.

Como alternativa, você pode preferir criar seus próprios temas de arranque (starter), que incluem o código básico que você reutiliza em seus projetos, você pode criar um tema simples em que você adiciona um número de versões diferentes para os seus diferentes tipos de projeto.

2. Usando Partes de Modelo (Template)

Você vai fazer o maior estrondo vai ser o fanfarrão em termos de temas DRY, claro se você fizer o uso de partes de modelo.Obs: Partes de modelo são pedaços de código separados em arquivos diferentes que são chamados em um arquivo principal, como por exemplo index.php! O mais óbvio destes arquivos é o cabeçalho, rodapé e barra lateral, mas você também pode fazer uso de arquivos de loop e outras partes de modelo para tornar seu código mais eficiente.

O Header (Cabeçalho), Barra Lateral (Sidebar) e Rodapé (Footer)

Espero que eu não precise te dizer isso — , mas você deve SEMPRE estar usando arquivos de modelo separando o cabeçalho (header.php), barra lateral (sidebar.php), e o rodapé (footer.php). Em seguida, você deve chamar cada um de seus arquivos de modelo usando estas tags de template:

get_header()
get_sidebar()
get_footer()

Mas você não precisa de min para te dizer isso, então vamos passar para o uso mais avançado das partes de modelo.

Múltiplos Cabeçalhos (Headers), Barras Laterais (Sidebars) ou Rodapés (Footers)

Ocasionalmente, você pode querer usar um cabeçalho diferente, barra lateral ou rodapé para diferentes áreas em seu site. Você pode fazer isso facilmente, através da criação de vários arquivos.

Por exemplo, digamos que você deseja usar uma barra lateral diferente em suas páginas de arquivo. Crie um arquivo para esta barra lateral chamado sidebar-archive.php. No seu arquivo de modelo archive.php, você substituiria a tag padrão get_sidebar() por get_sidebar ('archive').

Isso lhe dá a flexibilidade de ter uma barra lateral adicional, que você pode usar em vários arquivos de modelo. Por exemplo, convém usá-lo em modelos de arquivo para tipos específicos de post. Então, se você tivesse um tipo de post chamado button, você poderia criar um modelo de arquivo para isso chamado archive-button.php em que você usaria a tag get_sidebar( 'archive' ).

Existem algumas desvantagens nessa abordagem: se seus arquivos sidebar.php e sidebar-archive.php tem um monte de código repetitivo o seu tema não está seguindo o princípio DRY o suficiente. Se este for o caso, você pode optar por usar tags condicionais em vez disso, que abordarei no final deste tutorial.

Outras Partes de Modelo

Bem como partes de modelo para o header (cabeçalho), footer (rodapé) e barra lateral (sidebar), você também pode criar outras partes de modelo. Em seguida, chame essa parte de modelo usando a tag get_template_part().

O uso mais comum disto é no loop. O loop é um pedaço de código repetido muitas vezes em vários modelos, por isso faz sentido para cada um desses modelos tirá-lo e colocá-lo em um arquivo próprio.

Para fazer isso, você cria um arquivo chamado loop.php com o código para seu loop e então você o chama usando get_template_part ('loop'). Isto efetivamente puxa todo o código do seu arquivo loop para o seu modelo.

Você pode ir além fazendo isso com vários loops. Por exemplo se você tivesse um loop ligeiramente diferente para os arquivos, crie um arquivo chamado loop-archive.php e chame ele usando get_template_part( 'loop', 'archive' ). Simples!

3. Usando Tags Condicionais

Às vezes é mais eficiente usar tags condicionais no lugar de arquivos de modelo separado. WordPress vem com um conjunto de tags condicionais, que você pode usar para verificar que tipo de conteúdo que está sendo visto em um determinado momento ou no modelo de página que está sendo usado. Então você pode usá-los para verificar se está sendo usado um modelo específico e em seguida, adicione algum código, se for o arquivo certo. Isto lhe poupa de criar um arquivo de modelo extra, se os seus arquivos de modelo tiverem código duplicado.

Eu vou ilustrar isto com um exemplo. Digamos que você tem uma barra lateral com uma área de widget registrada. Nas single pages (páginas única) para um tipo determinado de post, você deseja adicionar uma segunda área de widget. Você pode querer fazer isso se você deseja listar outros posts desse tipo de post em um widget, por exemplo.

Você pode criar um arquivo de barra lateral separado chamado sidebar-xxx.php, onde xxx.php é o seu tipo de post e em seguida, chamar esse arquivo de modelo para o seu tipo de post. Ou você poderia usar um arquivo de barra lateral com uma tag condicional para adicionar a área extra de widget como segue:

No arquivo sidebar.php, você já terá uma área de widget registrada, que pode ser algo como isto:

<?php
if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
  <aside class="sidebar widget-area role="complementary">
		<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
	</aside>
<?php } 
?>

Isto irá mostrar a área do widget da barra lateral se ele foi preenchido com widgets.

Você pode adicionar uma segunda barra lateral usando a tag condicional de is_singular():

if ( is_singular ( 'xxx' ) && is_active_sidebar( 'xxx-sidebar-widget-area' ) ) { ?>
    <aside class="sidebar xxx widget-area" role="complementary">
		<?php dynamic_sidebar( 'xxx-sidebar-widget-area' ); ?>
	</aside>
<?php } 

Isto verifica se a área do widget é preenchida da mesma forma como o primeiro exemplo, mas acrescenta uma verificação extra (se) if a instrução é: is_singular('xxx'). Isto verifica se o site está exibindo uma única página para o tipo de post de xxx. Se for esse o caso e a área do widget for preenchida, em seguida, ele será exibido.

4. Transformando Código Repetitivo em Funções

Se seu código tiver que repetir algumas vezes no seu site e não tiver como separá-lo em um arquivo de inclusão próprio, então outra solução é colocá-lo em uma função, em seguida chame essa função em seu modelo em que você queira que o código apareça.

Por exemplo, você pode ter algum código para exibir uma caixa de call to action:

1	<section class="cta">
2	// CTA content goes here
3	</section>

Repetir o mesmo código em vários lugares em seu tema seria má prática, é como adicionar um código extra que tornará muito difícil adapta-lo com precisão futuramente. Em vez disso, você pode envolvê-lo em uma função e em seguida, colocar essa função em lugares relevantes em seu tema.

Sua função ficaria assim:

function wptp_cta() { ?>
    <section class="cta">
	// CTA content goes here
    </section>
<?php }

Então se você precisava que um call to action aparecesse em alguns lugares em seu tema como em barras laterais ou rodapés, você só iria escrever a função no arquivo modelo relevante:

1	wptp_cta();

A grande vantagem disto é que, se você deseja alterar o call to action no futuro, você só precisará alterar a função uma vez e a alteração será refletida em todos os lugares que você o chamou em seu tema.

5. Conectando Código de Action (Ação) e Hooks (Ganchos)

O próximo passo no desenvolvimento do tema DRY é fazer uso de ganchos de ação em seu tema.

Você cria um gancho de ação usando a função do_action(), então você anexa funções para esse gancho usando add_action().

Isso lhe dá muito mais flexibilidade em como você usa seu código recorrente e permite que você especifique não apenas onde em seu tema ele aparecerá, mas em que circunstâncias, usando uma combinação de funções e tags condicionais.

Isso também significa que se você estiver criando temas usando seu tema original como um tema pai, você pode anexar funções em seu tema filho das funções do tema do pai.

Eu retornarei ao meu exemplo de barra lateral. Em vez da codificação da área do widget em meu arquivo sidebar.php, só adiciono uma ação, dando-lhe um nome único:

1	do_action( 'wptp_sidebar' );

Isso cria um gancho de ação no meu tema, ao qual atribuo funções personalizadas.

ligando o código para a sidebar padrão, para esta ação chamo o meu arquivo functions.php, para ligar o código na barra lateral padrão, ficando da seguinte forma:

function wptp_sidebar_default() {
    if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
	<aside class="sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
	</aside>
<?php } 
}
add_action( 'wptp_sidebar', 'wptp_sidebar_default' ););

Eu usei add_action() com dois parâmetros: wptp_sidebar, o nome do gancho wptp_sidebar_default, e o nome da função.

Então a barra lateral padrão é adicionada ao meu tema. Para adicionar a barra lateral para o meu tipo de post, adicione uma segunda função para meu arquivo functions.php e conecte no mesmo gancho de ação:

function wptp_xxx_sidebar() {
    if ( is_singular ( 'xxx' ) && is_active_sidebar( 'xxx-sidebar-widget-area' ) ) { ?>
	<aside class="sidebar xxx widget-area" role="complementary">
		<?php dynamic_sidebar( 'xxx-sidebar-widget-area' ); ?>
	</aside>
<?php } 
}
add_action( 'wptp_sidebar', 'wptp_xxx_sidebar', 15 );

Isto envolve minha segunda barra lateral em uma função em seguida, acione essa função no gancho de ação wptp_sidebar. Observe algumas coisas:

A tag condicional é passada dentro da função e não com a função add_action.
Eu adicionei uma prioridade de 15 para minha segunda função. Como a prioridade padrão (que foram atribuída à minha primeira função) é 10, isso significa que WordPress acionará esta segunda função depois daquela primeira, então a barra lateral xxx aparecerá abaixo da barra lateral padrão.

Resumo

As idéias que abordei acima não são uma lista exaustiva de métodos para a adoção do princípio DRY durante o desenvolvimento de temas WordPress, mas eles dão uma introdução a alguns dos métodos mais eficazes que você pode usar.

Se você deseja garantir que seus temas são tão eficientes quanto o necessário, aconselho a tirar um tempo para planejar a estrutura do seu tema, antes de começar a escrever código. Identifique onde no código será duplicado e qual abordagem seria melhor para evitar a repetição de código e esforço. Trabalhe seu caminho através das ideias acima, você vai economizar mais tempo e código. Isso te ajudará a melhorar o seu tema ainda mais no futuro.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!