Crie seu próprio tema WordPress

Publicados: 2021-12-21

Em artigos anteriores, examinamos como você pode personalizar um site WordPress, criar seu próprio tema filho ou modelos.

Hoje, vamos ver como você pode criar seu próprio tema WordPress. Vamos indo!

Por que construir seu próprio tema WordPress?

O WordPress oferece várias maneiras de personalizar seu site. Então, por que você sentiria a necessidade de criar seu próprio tema? Em alguns casos, os temas prontos para uso podem não se encaixar no design da sua marca ou ter as funções de que você precisa. Um tema personalizado pode resolver esse problema e fornecer exatamente o estilo de site que você deseja com todas as funções necessárias sem precisar depender de um tema de terceiros.

Requisitos antes de criar um tema

Para poder replicar as etapas a seguir no exemplo abaixo, precisamos ter uma instalação do WordPress configurada e pronta para uso, localmente ou em um espaço de servidor que você administra. Não tente isso em um site ao vivo. Em vez disso, crie um ambiente de teste.

Um conhecimento prático e compreensão de CSS, PHP e HTML também são necessários.

Crie o tema

Vamos nomear nosso tema “Meu Primeiro Tema”. O primeiro passo é criar os arquivos necessários para que o tema fique visível na área de administração. Para fazer isso vamos criar um arquivo style.css e index.php.

Criamos uma subpasta para o nosso tema, sob a pasta wp-content/themes/ que chamamos de “my-first-theme” e adicionamos esses 2 arquivos a essa pasta.

Neste ponto, o tema deve estar visível como opção na área de administração.

Se algum desses arquivos estiver faltando, você receberá uma mensagem avisando que o tema está quebrado. Por exemplo, se index.php estiver faltando, você verá algo assim:

Dentro do arquivo style.css vamos adicionar alguns comentários que informam o WordPress sobre nosso tema. A informação mais importante é o nome em que será listada. Além disso, você pode dizer quem é o autor ou fornecer um URI de autor para que os usuários possam visitar um site para saber mais sobre seu tema. Forneça uma descrição a ser exibida no pop-up modal do tema admin e a versão da instalação.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

NOTA: Você também pode definir sua licença. Se você deseja que seu tema seja distribuído no WordPress, seu tema deve ser compatível com GPL.

Se você precisar exibir uma imagem de logotipo, insira um arquivo screenshot.png no mesmo espaço em que os arquivos style.css e index.php estão localizados.

Agora, se você ativar seu tema na tela de administração dos temas, deverá ver algo assim:

E se você clicar em “Detalhes do tema” você deverá ver isso:

Arquivos de tema

Agora é hora de escrever algum código no arquivo index.php. Como teste, abra o arquivo com seu editor favorito e insira qualquer tipo de elemento HTML, por exemplo

 <h1>My First Theme's Content</h1>

Salve o arquivo e visite o front-end. Você deve ver apenas o título “Conteúdo do meu primeiro tema”

Neste ponto, você precisa decidir qual layout seu tema terá.

Layout do tema

As rotas a seguir a partir daqui são ilimitadas. É altamente recomendável que você reserve um tempo e estude como os temas do WordPress funcionam. Mais importante, certifique-se de entender completamente a hierarquia do modelo antes de prosseguir com a estruturação do seu próprio tema.

Em poucas palavras, o que o WordPress faz é fornecer uma maneira de chamar diferentes arquivos php de acordo com o tipo de conteúdo. Isso é feito com consultas. Uma consulta verifica se a página visualizada no momento tem postagens ou é uma página de resultados de pesquisa ou qualquer outro tipo de conteúdo e gera o código correspondente.

Um exemplo clássico é separar o cabeçalho e o rodapé criando arquivos individuais para cada um deles. Para ver um exemplo muito simplificado de como você mesmo pode fazer isso, insira este código no arquivo index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Este código, usando as funções WordPress construídas wp_head() e wp_footer(), fornece um layout de conteúdo padrão que inclui um cabeçalho com logotipo, título e menu, o corpo principal onde as consultas mostrarão o conteúdo correto e um rodapé contendo as informações do site.

Se quisermos dividir este código e usar arquivos header.php e footer.php separados, você deve criar os arquivos na pasta do tema.

E divida o código assim:

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Rodapé.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

E é isso! Você criou seu primeiro tema!

Temas iniciais

Vimos acima como criar um tema manualmente… quais arquivos devem ser criados e qual código você pode incluir. Se você já está familiarizado com isso, pode economizar algum tempo baixando um tema inicial do WordPress em segundos. Experimente o Underscore, por exemplo, onde você pode apenas dar um nome e baixar o arquivo zip do tema imediatamente.

Incrível, certo?

Conclusão

Um tema WordPress personalizado é uma ótima solução quando você precisa de mais flexibilidade como desenvolvedor. Criar um tema pode parecer um processo assustador. Espero que, como este artigo mostrou, seja realmente muito fácil de fazer. A chave é não se apressar antes de começar a codificar. Dê um passo para trás, estude a estrutura temática que atende às suas necessidades e então vá em frente.