Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Se você seguiu os capítulos iniciais dessa série, você já:
- Entendeu como uma framework para temas funciona
- Identificou qual abordagem usará para desenvolver a sua própria framework
- Criou os arquivos iniciais do seu tema
Nesse tutorial, você adicionará alguns ganchos de ação (action hooks) aos arquivos do seu modelo, aos quais anexará funções no próximo tutorial. E, depois, adicionará alguns ganchos de filtro (filter hooks).
A vantagem em criar filtros de ações em sua framework é que qualquer conteúdo que anexar a eles, pode ser sobrescrito por funções em um tema filho ou por plugins. Isso ajuda a evitar arquivos duplicados dentro dos temas filhos além de prover mais flexibilidade.
Nota: Se quiser saber mais sobre ganchos de ação e de filtro antes de dar continuidade a esse tutorial, esse outro artigo ajudará.
O Que Você Precisará
Para acompanhar esse tutorial, você precisará de:
- Um ambiente para desenvolvimento com o WordPress;
- Seu próprio tema ou os arquivos do tema criados na Parte 3 dessa série, os quais você pode encontrar no repositório do GitHub que acompanha a série;
- Um editor de código
Adicionando Ganchos ao Cabeçalho
Adicionaremos dois ganchos ao cabeçalho: um antes e um dentro dele.
No arquivo header.php
, logo abaixo da tag <body>
de abertura, adicione o primeiro gancho de ação:
<?php // gancho de ação para qualquer conteúdo posicionado antes do cabeçalho, // incluindo a área de widgets do_action ( 'wptp_before_header' ); ?>
Esse gancho pode ser útil para a adição de conteúdo, menus ou links acima do cabeçalho do site.
Adicione outro gancho dentro do cabeçalho, à direita. Seus temas filhos podem usar esse gancho para adicionar conteúdo customizdo, como um formulário de busca ou widgets.
<div class="half right"> <!-- Essa área, por padrão, fica localizada no topo e à direita do cabeçalho. Ela contem detalhes de contato e também é o local onde talvez queira adicionar links para redes sociais ou feeds RSS --> <?php // gancho de ação para qualquer conteúdo adicionado dentro da parte // direita do cabeçalho, incluíndo áreas de widget. do_action ( 'wptp_in_header' ); ?> </div> <!-- .half right -->
Perceba que envolvi esse gancho em uma div
com algumas classes aplicadas, que funcionam dentro do padrão orientado a objetos de estilização do meu tema - se estiver fazendo isso em seu tema, precisará usar algo diferente, mas o gancho em si será o mesmo.
Adicionando Ganchos ao Conteúdo
O tema incluirá dois ganchos para conteúdo - um logo antes e outro logo após o loop, ambos dentro de #content div
. Por sorte, pelo modo que meu tema está organizado, precisarei adicionar cada gancho apenas uma vez, já que começo a #content div
no arquivo header.php
e termino no arquivo sidebar.php
. No arquivo page-full-width.php
ele esse último é adicionado à parte, porque o arquivo não chama a sidebar
, logo, é preciso adicionar aqui também.
Comecemos com o que vem logo antes do loop.
Ao final do arquivo header.php
, adicione o trecho de código abaixo, logo no começo de #content
:
<?php // gancho de ação para qualquer conteúdo adicionado antes do conteúdo, // incluíndo áreas de widget. do_action ( 'wptp_before_content' ); ?>
Isso proverá um gancho para qualquer coisa dentro da área do conteúdo, contudo, logo antes do loop.
Já no arquivo sidebar.php
, antes da tag de fechamento da div #content
, adicione o trecho abaixo:
<?php // gancho de ação para qualquer conteúdo adicionado após o conteúdo, // incluíndo áreas de widget. do_action ( 'wptp_after_content' ); ?>
Por fim, adicionaremos esse código ao arquivo page-full-width.php
do modelo, assim como fizemos com o arquivo sidebar.php
, logo antes da tag de fechamento da div #content
.
Adicionando Ganchos à Sidebar
O próximo passo é substituir a área de widget na sidebar por um gancho, que será usado para adicionar a área de widget de volta, em um passo posterior, entretanto, também pode ser usado para adicionar código customizado ou sobrescrever a área de widget.
Substitua todo o código da área de widget por esse novo gancho:
<?php // gancho de ação para qualquer conteúdo adicionado dentro da sidebar, // incluíndo áreas de widget. do_action ( 'wptp_sidebar' ); ?>
Isso quer dizer que, se você quiser substituir a área de widget por um código próprio seu em um plugin ou em um tema filho, será capaz de fazê-lo, anexando o novo código a esse gancho e sobrescrevendo o gancho que anexa a área de widget.
Adicionando Ganchos ao Rodapé
Finalmente, podemos adicionar alguns ganchos ao rodapé: um dentro dele e outro logo abaixo, que será usado para o cólofon.
Dentro do elemento footer
, substitua todo o código existente pelo gancho abaixo:
<?php // gancho de ação para qualquer conteúdo adicionado dentro da rodapé, // incluíndo áreas de widget. do_action ( 'wptp_footer' ); ?>
Agora, adicionemos outro gancho para o cólofon, após a tag de fechamento do elemento footer
:
<?php // gancho de ação para qualquer conteúdo adicionado após o rodapé, // incluíndo áreas de widget. do_action ( 'wptp_after_footer' ); ?>
Nota: O código que você removeu será substituído, mais para frente. Contudo, ao invés de adicioná-los diretamente nos arquivos do modelo, eles serão inseridos usando uma função que é ativada através de um gancho apropriado. Também adicionaremos ganchos de filtro para algumas funções.
Conclusão
Usar ganchos de ação em seus arquivos de modelo dá a você e aos usuários da sua framework, muito mais flexibilidade. Você pode usá-los para inserir qualquer tipo de conteúdo que quiser, ou mesmo sobrescrever ou remover o conteúdo, tudo sem criar ou modificar arquivos de modelo.
Na continuação dessa série, mostrarei como criar funções que adicionarão áreas de widget e outros conteúdos, tudo ativado através desses ganchos.
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post