Nesta lição do tutorial do tema WordPress para iniciantes, aprenderemos sobre ganchos no WordPress e adicionaremos alguns ganchos em nosso tema que são necessários para que um tema funcione corretamente com o WordPress e plugins. Também começaremos a acessar conteúdo dinâmico do WordPress em nosso cabeçalho, como obter automaticamente o título da página atual.
Primeiro precisamos aprender um pouco sobre hooks no WordPress. Hooks são uma funcionalidade central com a qual você precisa se familiarizar. Eu não sou fã de apenas mostrar um monte de código no qual você precisa copiar + colar sem saber o que ele realmente faz. Se você está seguindo este tutorial, você quer aprender isso corretamente, certo?
Não se preocupe, vou mantê-lo curto por enquanto. Vamos aprender mais sobre isso mais tarde neste tutorial.
Ganchos no WordPress
Resumidamente; como o WordPress executa todo o código para carregar e renderizar uma página, existem certos “pontos de verificação" – que chamamos de ganchos. Esses pontos são onde o WordPress permite que os desenvolvedores modifiquem ou adicionem seu próprio código. O WordPress definiu um monte de “pontos de verificação” onde, cada um com um nome exclusivo. Se você souber o nome, poderá adicionar seu próprio código nesses pontos de verificação. E, assim, dizer facilmente ao WordPress para executar seu código quando atingir esse ponto de verificação como parte de seu processo.
Existem dois tipos de ganchos; ações e filtros. Ações são pontos no código onde você pode adicionar código personalizado, por exemplo, produzir algo ou fazer algo para seus próprios propósitos. Filtros são pontos no código onde você pode modificar uma determinada variável antes que ela seja usada ou gerada. Eles são muito semelhantes, mas os filtros são anexados a uma variável específica e as ações não.
Plugins, temas e o próprio WordPress podem “ligar” seu código usando add_action()ações e add_filter()filtros. Essas duas funções dizem ao WordPress para executar o código viciado sempre que a execução atingir esses ganchos.
Para definir ganchos você usa do_action()para ações e apply_filters()filtros.
Para quem estiver interessado em saber mais, tenho um outro post que entra em detalhes sobre hooks no WordPress.
Um tema WordPress deve incluir alguns ganchos (ações) importantes específicos. Esses ganchos permitem que o WordPress, plugins e nosso próprio tema se conectem e façam coisas críticas. Vejamos os ganchos críticos que precisamos adicionar.
Os ganchos de cabeçalho e rodapé do tema
Todos os temas do WordPress devem ter dois ganchos nos modelos. Uma ação deve ser colocada no cabeçalho (dentro da <head>tag) e outra no rodapé (logo antes de fechar a </body>tag). Esses dois ganchos são absolutamente necessários para que o WordPress, seu tema e qualquer plugin possam adicionar seus scripts e códigos de estilos ao seu tema.
Os ganchos que precisamos são wp_heade wp_footerpara o cabeçalho e o rodapé, respectivamente.
Normalmente, quando queremos executar um gancho, chamaríamos do_action(<hook name>). Mas porque esses dois ganchos são tão críticos, o WordPress os simplificou para nós, colocando-os em uma simples chamada de função. Portanto, para esses dois ganchos, você pode simplesmente usar wp_head()e wp_footer(). Em segundo plano, esses dois executam o do_action().
Vamos adicionar esses dois ganchos (chamadas de função) aos nossos modelos de cabeçalho e rodapé e ver o que acontece.
Clique em atualizar no seu frontend. Se você estiver logado, agora você deve ver a barra de administração do WordPress aparecer! Isso significa que o WordPress agora pode adicionar com sucesso seus scripts e estilos ao seu tema.
Você pode verificar sua fonte HTML e ver que seu cabeçalho agora contém um pouco de código. Este é o código que você não adicionou ao seu tema. Como você pode ver, o próprio WordPress está usando os ganchos que adicionamos para fazer suas próprias coisas.
Vamos passar dos ganchos e começar a ver como podemos buscar dinamicamente o conteúdo do WordPress e produzi-lo em nosso cabeçalho.
Conteúdo dinâmico no cabeçalho
Vamos dizer ao WordPress para definir dinamicamente o título do documento (para a <title>tag). Para isso vamos usar uma função, (que por sinal tem um filtro), chamada wp_title(). Como aprendemos acima, por wp_title()ser um filtro, você, WordPress ou plugins podem modificar a saída. Adicionaremos um filtro a isso posteriormente neste tutorial.
A função wp_title()recebe vários argumentos que você pode ajustar ao seu gosto, mas por enquanto adicionarei uma string vazia para que ela exiba apenas o título da página em que estamos.
Mude sua <title>tag header.phppara isso:
Os interessados devem ter notado que a primeira página não gerará um título. Este é o comportamento padrão do WordPress que corrigiremos mais adiante neste tutorial (faremos isso com a ajuda do filtro). Se você visitar uma única postagem ou página, deverá obter o título da postagem.
O WordPress tem uma função bacana que gera dinamicamente um monte de classes para a <body>tag dependendo da página em que estamos; chamado body_class. Atualize a <body>tag header.phppara isso:
Atualize e dê uma olhada em todas as classes adicionadas à <body>tag. Dê uma olhada em diferentes páginas (frontpage, single, categoria). Todas essas classes são muito úteis para estilizar e diferenciar diferentes partes semelhantes. Você provavelmente usará alguns deles em seu CSS.
Para seguir as boas práticas de HTML, devemos também informar sobre o idioma do site no HTML. Para isso usamos uma função do WordPress para obter o idioma de Configurações; language_attributes.
E, finalmente, gostaria de adicionar algumas meta tags e outras que não são específicas do WordPress, mas seguem práticas comuns de web design. Esta é a header.phpaparência do arquivo completo:
Para a próxima etapa deste tutorial, vamos sair header.phpe mergulhar index.phppara aprender como buscar conteúdo mais dinâmico, como postagens.