Implementações necessárias para o seu tema

Com a chegada das novas versões do WordPress, cada vez mais nossos temas precisam se comunicar quase que intimamente com o CMS.

Onde novas implementações vão se tornando cada vez mais necessárias (e obrigatórias), para o bom funcionamento do ecossistema como um todo.

Nesta lição, você vai conhecer algumas implementações recomendadas para os novos criadores de temas 😄

As três tags obrigatórias

De acordo com a documentação do próprio WordPress, todo criador de temas deve implementar três tipos diferentes de tags, em cada um dos seus modelos de temas.

wp_head(): já mencionada em jornadas anteriores, essa tag é usada para inserir informações no cabeçalho (head) do HTML gerado pelo WordPress durante a geração de uma página.

E isso inclui meta tags, scripts, folhas de estilo (CSS) e outras informações que são comuns no cabeçalho de uma página da web.

wp_footer(): também já mencionada em jornadas anteriores, essa tag é utilizada para inserir informações no rodapé (footer) do HTML gerado pelo WordPress durante a renderização de uma página.

É o local onde o WordPress irá carregar todos os seus scripts Javascript, além de outros elementos que devem ser carregados no final do documento HTML

wp_body_open(): introduzida na versão 5.3.0 do WordPress, ela serve como um ponto de inserção no início do elemento <body> do seu tema WordPress.

Normalmente, inserimos a função wp_body_open() no arquivo header.php do seu tema, logo após a abertura da tag <body> (isto é, se a essa tag estiver declarada no seu header.php).

Isso vai permitir que os desenvolvedores ou plugins insiram facilmente conteúdo no início do corpo da página sem modificar o código principal do tema.

Então, dever de casa: Certifique-se de que as funções wp_head() e wp_footer() existem dentro dos arquivos header.php e footer.php. E se a tag <body> não existe no seu header.php, certifique-se de que a função wp_body_open() se encontra logo abaixo da tag <body> em todos os seus modelos de temas.

É importante ressaltar que o seu tema vai funcionar perfeitamente sem o uso dessas tags, mas entenda que na visão do WordPress, não utiliza-las não é uma coisa bem vista pelo CMS.

Usando a função wp_body_open() em versões mais antigas do WordPress

Como dito anteriormente, a função wp_body_open() está disponível somente a partir da versão 5.3.0, sendo assim, como fica em versões anteriores?

Em versões anteriores, você vai precisar fazer essa implementação manualmente dentro do functions.php, mais especificamente fora de qualquer função que já criamos até o momento:

if(!function_exists('wp_body_open')){
 function wp_body_open(){
 do_action('wp_body_open');//Adiciona um gancho de ação
 }
}

O código acima verifica se a funcionalidade wp_body_open, existe na versão atual do WordPress onde seu tema está instalado.

Caso não existir, o próprio comando adiciona um gancho de ação chamado 'wp_body_open' de modo a oferecer suporte a esta funcionalidade.

Suporte ao Feed RSS

Uma outra funcionalidade primordial que deve ser adicionada nos seus temas, é a possibilidade dos leitores de Feed RSS acharem os links do seu site.

Isso faz com que tanto o conteúdo quanto o comentários de um site possam ser consumidos por leitores de feeds.

Para isso, dentro do functions.php do seu tema, mais especificamente dentro da função wpmicilini_config(), você vai precisar adicionar o seguinte suporte:

add_theme_support('automatic-feed-links');

Com essa implementação, um <link> referente ao Feed RSS será adicionado no código fonte das suas páginas, dentro da tag <head>:

<link rel="alternate" type="application/rss+xml" title="Feed para Home &raquo;" href="http://localhost/minha-primeira-aplicacao/feed/" />
<link rel="alternate" type="application/rss+xml" title="Feed de comentários para Home &raquo;" href="http://localhost/minha-primeira-aplicacao/comments/feed/" />

Suporte ao HTML5

Uma outra funcionalidade super importante é o uso das tags do HTML5 no seu tema, fazendo com que certos elementos como <divs>, sejam substituídos por elementos mais novos como <article>, <footer>, <section> e afins.

Para isso, você precisa abrir o arquivo functions.phpdo seu tema, e dentro da função wpmicilini_config() adicionar mais um suporte:

add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));

O segundo parâmetro se refere a uma lista de arrays em que o suporte ao HTML 5 será habilitado.

Para que você possa entender mais a fundo o que está acontecendo, se lembra que em jornada anteriores você viu que é possível implementar códigos fornecidos pelo próprio WordPress dentro dos seus modelos de tema?

De modo a não precisar criar estruturas HTML e muito menos Tags Condicionais? Uma vez que o próprio WordPress já retorna tudo isso pronto para a gente?

Então... quando não habilitamos o suporte ao HTML5, o WordPress retorna essas estruturas em HTML4, usando <div> com suas respectivas class.

Já quando habilitamos o suporte ao HTML5, em vez do WordPress retornar todos os elementos representados por uma <div>, ele já retorna os elementos representados por <article>, <footer>, <header>, <section> e afins.

Aqui está uma explicação dos elementos HTML5 especificados no segundo argumento:

'comment-list': Indica que o tema dá suporte a marcações HTML5 para a lista de comentários.

'comment-form': Indica que o tema dá suporte à marcação HTML5 para o formulário de comentários.

'search-form': Indica que o tema dá suporte à marcação HTML5 para o formulário de pesquisa.

'gallery': Indica que o tema dá suporte à marcação HTML5 para galerias de mídia.

'caption': Indica que o tema dá suporte à marcação HTML5 para legendas de imagens.

'style': Indica que o tema dá suporte à marcação HTML5 para estilos embutidos.

Aqui, quando o WordPress incorpora estilos no HTML, eles serão gerados usando elementos HTML5 adequados.

'script': Indica que o tema dá suporte à marcação HTML5 para scripts incorporados.

Aqui, quando o WordPress incorpora scripts no HTML, eles serão gerados usando elementos HTML5 adequados.

Conclusão

Nesta lição você aprendeu as implementações mais importantes que o seu tema deve possuir.

Antes de continuar, certifique-se de que você implementou:

As tags wp_head(), wp_footer() e wp_body_open(),
add_theme_support('automatic-feed-links');
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));

Feito isso, te espero na próxima lição 🥳