Esta lição do tutorial do tema WordPress para iniciantes ensinará como estruturar os principais blocos de construção de um tema e começar a criar modelos. Vamos começar a criar alguma saída HTML e como incluir os blocos de construção nos templates do nosso tema. Na etapa anterior, configuramos o mínimo de um tema WordPress e o ativamos. Mas a partir de agora não está fazendo muito, e nem mesmo contém HTML válido para uma página da web. Vamos consertar isso.
Blocos de construção de cabeçalho e rodapé (e barra lateral)
Em nossos arquivos de modelo, precisamos de HTML válido. Poderíamos escrever a estrutura HTML completa (começando com <html>, <head>e full <body>) em index.php, mas isso se torna impraticável ao manter vários arquivos de modelo em seu tema. Imagine ter criado um monte de templates, e então perceber que você precisa de uma pequena mudança na parte do cabeçalho; você precisaria editar todos os modelos para que eles permaneçam consistentes. Isso não é inteligente.
A solução é dividir a estrutura HTML completa em partes sensíveis; blocos de construção. Cada bloco reside em seu próprio arquivo, e sempre que precisamos deles em um template, nós os incluímos. Os blocos mais comuns e sensatos são um para cabeçalho, um para rodapé e outro para conteúdo, mas se o seu tema tiver uma barra lateral, a barra lateral também deve ser um edifício separado.
Aqueles de vocês que estão mais familiarizados com PHP provavelmente estão familiarizados com os métodos include()ou require(). Isso é exatamente o que faremos, mas usaremos as funções do WordPress para incluir outros arquivos, pois eles trazem benefícios adicionais.
Nesta lição, criaremos o cabeçalho, o rodapé e a barra lateral como blocos de construção. As barras laterais tornaram-se cada vez menos comuns em páginas da web, mas ainda implementaremos uma barra lateral direita em nosso tema. Esses três blocos de construção são uma prática comum em todos os temas do WordPress – e na verdade é tão comum que o WordPress oferece automação para essas três coisas.
Criando os modelos de cabeçalho, rodapé e barra lateral
Vamos criar um novo arquivo vazio chamado header.phpem nossa pasta de temas. Vamos adicionar um HTML muito básico por enquanto (não se preocupe, adicionaremos um HTML mais adequado mais tarde).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Crie um novo arquivo nomeado footer.phpno diretório do seu tema. Tudo o que precisamos (por enquanto) neste arquivo é o fechamento da nossa estrutura HTML.
</body>
</html>E, finalmente, crie um novo arquivo vazio chamado sidebar.php. Adicionamos apenas a tag HTML <aside>dentro.
<aside class="sidebar">
</aside>Incluindo os blocos de construção
Vamos voltar ao nosso index.phparquivo. Tudo o que precisamos fazer agora é informar ao WordPress onde queremos incluir o arquivo de cabeçalho e rodapé. Obviamente, queremos carregar o cabeçalho no início e o rodapé no final deste arquivo.
O WordPress oferece funções simples para incluir esses blocos de construção; get_header()e get_footer()para o arquivo de cabeçalho e rodapé, respectivamente. Bem intuitivo né? Vamos adicioná-los em nosso index.php e ver o que acontece.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Atualize seu frontend e inspecione ou visualize a fonte HTML para ver que combinamos vários blocos de construção para criar uma estrutura HTML completa.
Agora você pode editar o conteúdo index.phpindependentemente do cabeçalho e do rodapé!
Vamos incluir a barra lateral também. Tenha em mente que em seu tema você pode querer considerar casos e templates onde você não quer a barra lateral, por exemplo a página inicial.
Incluir a barra lateral é tão fácil quanto o cabeçalho e o rodapé; para isso usamos get_sidebar(). Vamos adicionar isso ao index.php, logo antes de obter o rodapé.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Atualize e você deverá ver a fonte HTML, incluindo nosso arquivo <aside>. Não se preocupe, em uma etapa posterior, aprenderemos como convertê-lo em uma área real da barra lateral onde você pode colocar widgets.
Nosso tema é bastante estático agora. Na próxima lição desta série de tutoriais de temas do WordPress, finalmente começaremos a mergulhar adequadamente nas funções do WordPress para carregar conteúdo e informações do WordPress dinamicamente em nossos modelos.