{"id":233622,"date":"2023-02-18T13:07:00","date_gmt":"2023-02-18T10:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233622"},"modified":"2022-11-11T00:41:50","modified_gmt":"2022-11-10T21:41:50","slug":"tutorial-de-tema-wordpress-para-iniciantes-parte-3-conteudo-dinamico","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-3-conteudo-dinamico\/","title":{"rendered":"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 3: Conte\u00fado Din\u00e2mico"},"content":{"rendered":"\n

Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, aprenderemos sobre ganchos no WordPress e adicionaremos alguns ganchos em nosso tema que s\u00e3o necess\u00e1rios para que um tema funcione corretamente com o WordPress e plugins. Tamb\u00e9m come\u00e7aremos a acessar conte\u00fado din\u00e2mico do WordPress em nosso cabe\u00e7alho, como obter automaticamente o t\u00edtulo da p\u00e1gina atual.<\/p>\n

Primeiro precisamos aprender um pouco sobre hooks no WordPress. Hooks s\u00e3o uma funcionalidade central com a qual voc\u00ea precisa se familiarizar. Eu n\u00e3o sou f\u00e3 de apenas mostrar um monte de c\u00f3digo no qual voc\u00ea precisa copiar + colar sem saber o que ele realmente faz. Se voc\u00ea est\u00e1 seguindo este tutorial, voc\u00ea quer aprender isso corretamente, certo?<\/p>\n

N\u00e3o se preocupe, vou mant\u00ea-lo curto por enquanto. Vamos aprender mais sobre isso mais tarde neste tutorial.<\/p>\n

Ganchos no WordPress<\/h2>\n

Resumidamente; como o WordPress executa todo o c\u00f3digo para carregar e renderizar uma p\u00e1gina, existem certos “pontos de verifica\u00e7\u00e3o" \u2013 que chamamos de ganchos. Esses pontos s\u00e3o onde o WordPress permite que os desenvolvedores modifiquem ou adicionem seu pr\u00f3prio c\u00f3digo. O WordPress definiu um monte de “pontos de verifica\u00e7\u00e3o” onde, cada um com um nome exclusivo. Se voc\u00ea souber o nome, poder\u00e1 adicionar seu pr\u00f3prio c\u00f3digo nesses pontos de verifica\u00e7\u00e3o. E, assim, dizer facilmente ao WordPress para executar seu c\u00f3digo quando atingir esse ponto de verifica\u00e7\u00e3o como parte de seu processo.<\/p>\n

Existem dois tipos de ganchos; a\u00e7\u00f5es e filtros. A\u00e7\u00f5es<\/strong> s\u00e3o pontos no c\u00f3digo onde voc\u00ea pode adicionar c\u00f3digo personalizado, por exemplo, produzir algo ou fazer algo para seus pr\u00f3prios prop\u00f3sitos. Filtros<\/strong> s\u00e3o pontos no c\u00f3digo onde voc\u00ea pode modificar uma determinada vari\u00e1vel antes que ela seja usada ou gerada. Eles s\u00e3o muito semelhantes, mas os filtros s\u00e3o anexados a uma vari\u00e1vel espec\u00edfica e as a\u00e7\u00f5es n\u00e3o.<\/p>\n

Plugins, temas e o pr\u00f3prio WordPress podem “ligar” seu c\u00f3digo usando add_action()<\/code>a\u00e7\u00f5es e add_filter()<\/code>filtros. Essas duas fun\u00e7\u00f5es dizem ao WordPress para executar o c\u00f3digo viciado sempre que a execu\u00e7\u00e3o atingir esses ganchos.<\/p>\n

Para definir ganchos voc\u00ea usa do_action()<\/code>para a\u00e7\u00f5es e apply_filters()<\/code>filtros.<\/p>\n

Para quem estiver interessado em saber mais, tenho um outro post que entra em detalhes sobre hooks<\/a> no WordPress.<\/p>\n

Um tema WordPress deve incluir alguns ganchos (a\u00e7\u00f5es) importantes espec\u00edficos. Esses ganchos permitem que o WordPress, plugins e nosso pr\u00f3prio tema se conectem e fa\u00e7am coisas cr\u00edticas. Vejamos os ganchos cr\u00edticos que precisamos adicionar.<\/p>\n

Os ganchos de cabe\u00e7alho e rodap\u00e9 do tema<\/h2>\n

Todos os temas do WordPress devem ter dois ganchos nos modelos. Uma a\u00e7\u00e3o deve ser colocada no cabe\u00e7alho (dentro da <head><\/code>tag) e outra no rodap\u00e9 (logo antes de fechar a <\/body><\/code>tag). Esses dois ganchos s\u00e3o absolutamente necess\u00e1rios para que o WordPress, seu tema e qualquer plugin possam adicionar seus scripts e c\u00f3digos de estilos ao seu tema.<\/p>\n

Os ganchos que precisamos s\u00e3o wp_head<\/code>e wp_footer<\/code>para o cabe\u00e7alho e o rodap\u00e9, respectivamente.<\/p>\n

Normalmente, quando queremos executar um gancho, chamar\u00edamos do_action(<hook name>)<\/code>. Mas porque esses dois ganchos s\u00e3o t\u00e3o cr\u00edticos, o WordPress os simplificou para n\u00f3s, colocando-os em uma simples chamada de fun\u00e7\u00e3o. Portanto, para esses dois ganchos, voc\u00ea pode simplesmente usar wp_head()<\/code>e wp_footer()<\/code>. Em segundo plano, esses dois executam o do_action()<\/code>.<\/p>\n

Vamos adicionar esses dois ganchos (chamadas de fun\u00e7\u00e3o) aos nossos modelos de cabe\u00e7alho e rodap\u00e9 e ver o que acontece.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Clique em atualizar no seu frontend. Se voc\u00ea estiver logado, agora voc\u00ea deve ver a barra de administra\u00e7\u00e3o do WordPress aparecer! Isso significa que o WordPress agora pode adicionar com sucesso seus scripts e estilos ao seu tema.<\/p>\n
\"Tutorial<\/a><\/p>\n
Voc\u00ea pode verificar sua fonte HTML e ver que seu cabe\u00e7alho agora cont\u00e9m um pouco de c\u00f3digo. Este \u00e9 o c\u00f3digo que voc\u00ea n\u00e3o adicionou ao seu tema. Como voc\u00ea pode ver, o pr\u00f3prio WordPress est\u00e1 usando os ganchos que adicionamos para fazer suas pr\u00f3prias coisas.<\/p>\n
Vamos passar dos ganchos e come\u00e7ar a ver como podemos buscar dinamicamente o conte\u00fado do WordPress e produzi-lo em nosso cabe\u00e7alho.<\/p>\n
Conte\u00fado din\u00e2mico no cabe\u00e7alho<\/h2>\n
Vamos dizer ao WordPress para definir dinamicamente o t\u00edtulo do documento (para a <title><\/code>tag). Para isso vamos usar uma fun\u00e7\u00e3o, (que por sinal tem um filtro), chamada wp_title()<\/code>. Como aprendemos acima, por wp_title()<\/code>ser um filtro, voc\u00ea, WordPress ou plugins podem modificar a sa\u00edda. Adicionaremos um filtro a isso posteriormente neste tutorial.<\/p>\n
A fun\u00e7\u00e3o wp_title()<\/code>recebe v\u00e1rios argumentos<\/a> que voc\u00ea pode ajustar ao seu gosto, mas por enquanto adicionarei uma string vazia para que ela exiba apenas o t\u00edtulo da p\u00e1gina em que estamos.<\/p>\n
Mude sua <title><\/code>tag header.php<\/code>para isso:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
Os interessados \u200b\u200bdevem ter notado que a primeira p\u00e1gina n\u00e3o gerar\u00e1 um t\u00edtulo. Este \u00e9 o comportamento padr\u00e3o do WordPress que corrigiremos mais adiante neste tutorial (faremos isso com a ajuda do filtro). Se voc\u00ea visitar uma \u00fanica postagem ou p\u00e1gina, dever\u00e1 obter o t\u00edtulo da postagem.<\/p>\n
O WordPress tem uma fun\u00e7\u00e3o bacana que gera dinamicamente um monte de classes para a <body><\/code>tag dependendo da p\u00e1gina em que estamos; chamado body_class<\/a>. Atualize a <body><\/code>tag header.php<\/code>para isso:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
Atualize e d\u00ea uma olhada em todas as classes adicionadas \u00e0 <body><\/code>tag. D\u00ea uma olhada em diferentes p\u00e1ginas (frontpage, single, categoria). Todas essas classes s\u00e3o muito \u00fateis para estilizar e diferenciar diferentes partes semelhantes. Voc\u00ea provavelmente usar\u00e1 alguns deles em seu CSS.<\/p>\n
Para seguir as boas pr\u00e1ticas de HTML, devemos tamb\u00e9m informar sobre o idioma do site no HTML. Para isso usamos uma fun\u00e7\u00e3o do WordPress para obter o idioma de Configura\u00e7\u00f5es; language_attributes<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
E, finalmente, gostaria de adicionar algumas meta tags e outras que n\u00e3o s\u00e3o espec\u00edficas do WordPress, mas seguem pr\u00e1ticas comuns de web design. Esta \u00e9 a header.php<\/code>apar\u00eancia do arquivo completo:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
Para a pr\u00f3xima etapa deste tutorial, vamos sair header.php<\/code>e mergulhar index.php<\/code>para aprender como buscar conte\u00fado mais din\u00e2mico, como postagens.<\/p>\n
Documenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n