Os temas de WordPress desempenham um papel fundamental na definição da aparência e da funcionalidade do seu site. Eles definem como o conteúdo é exibido e oferecem várias opções de design para você criar um site exclusivo. Ao longo dos anos, os temas de WordPress evoluíram significativamente, começando com o que hoje chamamos de “temas clássicos”
Os temas clássicos foram o padrão por um longo tempo, dependendo de templates PHP e exigindo algum conhecimento de codificação para serem personalizados. Esses temas ofereciam grande flexibilidade, mas podiam ser desafiadores para os novatos em desenvolvimento web. Em seguida, o lançamento do WordPress 5.9 marcou uma mudança significativa com a introdução de “temas de bloco”
Temas clássicos de WordPress vs temas em blocos
Os temas clássicos definem a aparência geral de um site usando arquivos de template escritos em PHP, CSS para estilo e JavaScript para funcionalidade adicional. Esses temas altamente personalizáveis têm sido a espinha dorsal dos Sites WordPress há muitos anos.
Os temas de blocos, por outro lado, são um tipo mais recente de tema do WordPress introduzido para oferecer suporte aos recursos de edição completa do site (FSE). Diferentemente dos temas clássicos, eles usam blocos para criar todas as partes de um site, inclusive cabeçalhos, rodapés e áreas de conteúdo. Isso permite uma maneira mais visual e intuitiva de projetar e personalizar sites diretamente no editor do WordPress.
As principais diferenças entre os temas clássicos e os de blocos são:
- Personalização – Os temas clássicos exigem PHP e algumas habilidades de codificação, enquanto os temas em bloco usam um editor visual para facilitar a personalização.
- Flexibilidade – Os temas clássicos oferecem mais flexibilidade para os desenvolvedores, enquanto os temas em bloco se concentram na facilidade de uso e na acessibilidade.
- Edição – Os temas clássicos são editados por meio de arquivos de tema e do WordPress Customizer. Os temas de bloco podem ser editados inteiramente por meio do editor de blocos.
Escolhendo o tipo de tema a ser desenvolvido
A escolha entre temas clássicos e em blocos depende das necessidades e do nível de habilidade que você tem. Se você é um desenvolvedor que busca o máximo de flexibilidade, os temas clássicos podem ser a sua opção. No entanto, se você preferir uma abordagem mais visual e fácil de usar para criar seu site, os temas em blocos são uma ótima opção.
Ambos os tipos de temas têm pontos fortes e são adequados para diferentes tipos de usuários e projetos. Compreender as principais diferenças ajuda você a tomar uma decisão informada sobre qual tema atenderá melhor às necessidades do seu site.
Este artigo tem como objetivo ajudar você a entender e dominar os principais conceitos dos temas clássicos e em blocos, capacitando-o a criar e personalizar temas de WordPress com eficiência.
Entendendo a estrutura do tema
Entender a estrutura de um tema, seja ele clássico ou em blocos, é fundamental para que você possa personalizar seu site WordPress com eficiência.
Antes de explorarmos a estrutura de cada tema, você deve saber que todos os temas de WordPress são armazenados no diretório wp-content/themes da sua instalação do WordPress e que cada tema reside em sua própria pasta.
Estrutura do tema clássico
Um tema clássico inclui vários arquivos e diretórios importantes que criam a aparência e a funcionalidade do site. Os dois principais arquivos são:
style.css– Folha de estilo principal: É a folha de estilo principal que define o estilo visual do tema. Ela inclui metadados sobre o tema (como nome, autor e versão) na parte superior, seguidos de regras CSS que estilizam o tema.index.php– Esse é o principal arquivo de template usado para exibir conteúdo na página inicial. Ele funciona como um fallback para outros arquivos de template que possam estar faltando.
Além desses, vários outros arquivos importantes permitem o design modular e garantem que diferentes partes do site possam ser facilmente personalizadas e mantidas. Embora sejam opcionais, esses arquivos são considerados padrão:
header.php– Esse arquivo contém a seção de cabeçalho do tema, incluindo o título do site, a logo e o menu de navegação. Ele está incluído na parte superior de todas as páginas, garantindo um cabeçalho de página consistente.footer.php– Esse arquivo contém a seção de rodapé do tema, que geralmente inclui informações de direitos autorais e navegação no rodapé. Ele está incluído na parte inferior de todas as páginas, proporcionando um rodapé consistente em todo o site.functions.php– Esse arquivo é usado para adicionar funcionalidade personalizada ao tema. Ele pode registrar menus, enfileirar estilos e scripts e adicionar recursos de suporte ao tema, como miniaturas de artigos e background personalizados. Essencialmente, ele funciona como um centro de controle para personalizações e aprimoramentos do tema.page.php,single.php,archive.php, etc. – Esses arquivos de template definem a estrutura de diferentes tipos de conteúdo, como páginas, artigos únicos e arquivos.
Estrutura do tema de bloco
Um tema de bloco é composto de vários arquivos e diretórios importantes, projetados especificamente para trabalhar com blocos e com os recursos do FSE. Os principais arquivos e pastas são:
theme.json– Esse arquivo é fundamental para que você defina as configurações, os estilos e as personalizações do tema. Ele define estilos e configurações globais para blocos, fornecendo uma maneira centralizada de gerenciar a aparência e o comportamento do tema. Ele substitui a necessidade de muito código PHP personalizado e permite a fácil configuração de cores, tipografia, espaçamento e muito mais.style.css– Embora a maior parte do estilo seja tratada emtheme.json, semelhante aos temas clássicos,style.cssainda é usado para declarar os metadados do tema, como o nome do tema, o autor, a versão e a descrição.templates/– Esse diretório contém arquivos HTML que definem o layout de diferentes partes do site. Esses arquivos incluem templates como index.html para a página inicial,single.htmlpara artigos individuais,page.htmlpara páginas e outros. Cada arquivo é criado usando blocos.parts/– Esse diretório contém seções reutilizáveis de templates, como cabeçalhos e rodapés. Essas partes podem ser incluídas em vários templates, garantindo a consistência em todo o site.
Embora não sejam obrigatórios, os Padrões de Blocos também são importantes para o desenvolvimento de temas avançados. Os Padrões de Blocos são layouts de blocos predefinidos que podem ser inseridos em páginas e artigos, proporcionando uma maneira rápida de criar designs complexos.
Com os temas de bloco, você pode decidir não criar a estrutura do tema manualmente. Você pode acelerar o processo de configuração usando o plugin Create Block Theme, que reúne todos os arquivos e detalhes necessários.
Depois que você preencher os detalhes, uma nova pasta de temas será criada no diretório wp-content/themes e o novo tema aparecerá na área de administração do WordPress em Appearance > Themes. Você pode adicionar mais detalhes sobre o tema na configuração de Meta Description style.css.
Hierarquia de templates do tema do WordPress
A hierarquia de templates determina qual(is) arquivo(s) de template o WordPress usa para exibir diferentes tipos de conteúdo. Os temas clássicos e em bloco seguem uma hierarquia semelhante, mas diferem nos tipos de arquivo que usam: os temas clássicos usam arquivos PHP, enquanto os temas em bloco usam arquivos HTML.
A hierarquia de templates segue uma ordem específica para determinar qual arquivo de template deve ser usado. Se o WordPress não conseguir encontrar um arquivo de template específico, ele passará para o próximo na hierarquia.
Por exemplo, quando o WordPress precisa exibir um único artigo de blog, ele primeiro procura um template específico para o tipo de artigo, como single-{post-type}.php ou single-{post-type}.html. Se esse arquivo não existir, ele procurará o genérico single.php ou single.html. Se nenhum desses arquivos for encontrado, o WordPress voltará ao template mais genérico index.php ou index.html.
O mesmo processo se aplica a outros tipos de conteúdo. Para uma página estática, o WordPress verificará primeiro se há algum template personalizado atribuído a essa página. Se nenhum for encontrado, ele procurará um template com base no slug da página (por exemplo, page-about.php ou page-about.html) ou em seu ID (page-42.php ou page-42.html). Se esses templates específicos não estiverem disponíveis, o WordPress usará o template geral page.php ou page.html. Se até mesmo esse template estiver faltando, ele voltará para index.php ou index.html.
Criação de templates
A criação de templates no WordPress permite que você personalize a forma como diferentes tipos de conteúdo são exibidos em seu site. Independentemente de você estar trabalhando com temas clássicos ou temas de bloco, o processo envolve a definição dos arquivos necessários e a configuração deles de acordo com as suas necessidades.
Vamos configurar um template de página para ambos os tipos de temas.
Template de página de tema clássico
Nos temas clássicos, você cria um template de página usando PHP. Veja como você pode fazer isso:
- Criar o arquivo de template – Usando um editor de texto, crie um novo arquivo PHP no diretório do tema e nomeie como
page.php. - Adicionar código de template – Escreva o código PHP necessário para definir a estrutura e o conteúdo do template de página. Normalmente, isso inclui tags de template do WordPress para exibir o conteúdo da página.
- Incluir cabeçalho e rodapé – Certifique-se de que seu template inclua o cabeçalho e o rodapé adicionando as funções
get_header()eget_footer(). Isso mantém o layout consistente com o restante do site.
Aqui está um exemplo de como pode ser o page.php:
<?php
get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>Neste exemplo, o template inclui o cabeçalho, exibe o título e o conteúdo da página e, em seguida, inclui o rodapé.
Template de página do tema de bloco
Nos temas de bloco, você pode criar um template de página por meio do Editor de Sites WordPress ou criando um arquivo page.html no diretório de templates.
Depois que esse arquivo for criado, você poderá criar um layout navegando até o editor do site (Appearance > Editor no painel WordPress).
Use o editor de blocos para adicionar e organizar blocos para criar o layout da página. Você pode adicionar blocos para o título da página, a imagem em destaque e o conteúdo. Personalize cada bloco de acordo com suas preferências de design.
Quando você estiver satisfeito com o layout, salve o template. O WordPress gerará automaticamente o arquivo HTML correspondente no diretório do seu tema.
Estilização de temas
A estilização do tema do WordPress é uma etapa crucial na definição da aparência visual do seu site. Tanto os temas clássicos quanto os temas em bloco oferecem maneiras robustas de personalizar estilos, mas eles abordam isso de forma diferente.
Estilização de temas clássicos
Nos temas clássicos, o estilo é geralmente tratado com CSS. Veja a seguir como você pode estilizar um tema clássico:
A folha de estilo principal de um tema clássico é o arquivo style.css. Esse arquivo contém todas as regras de CSS que definem a aparência do tema. É também onde você declara os metadados do tema, como o nome do tema, o autor, a versão e a descrição.
Para garantir que o CSS seja carregado corretamente, você precisa enfileirar a folha de estilo no arquivo functions.php usando a função wp_enqueue_style().
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');Essa etapa é fundamental para manter os padrões adequados do WordPress e garantir que os estilos sejam aplicados corretamente.
Além disso, você pode adicionar CSS personalizado diretamente ao arquivo style.css ou criar arquivos CSS separados para diferentes partes do seu tema. O CSS personalizado também pode ser integrado em arquivos de template individuais usando a tag <style>, embora essa prática seja geralmente menos comum e recomendada somente para estilos específicos e isolados.
Para obter um estilo mais avançado, você pode usar pré-processadores de CSS como SASS ou LESS. Essas ferramentas permitem que você escreva CSS mais sustentável e modular, facilitando o gerenciamento e a extensão dos estilos do seu tema.
Temas de blocos de estilo
Os temas de blocos de estilo são gerenciados principalmente por meio do arquivo theme.json e do editor de blocos.
O arquivo theme.json é o local central para você definir estilos e configurações globais para o seu tema. Esse arquivo permite que você defina cores, tipografia, espaçamento e outros estilos em um formato JSON estruturado, fornecendo uma maneira centralizada de gerenciar a aparência e o comportamento do tema. Os estilos globais definidos em theme.json se aplicam a todo o site, garantindo uma aparência consistente.
Além do theme.json, você pode usar o editor de blocos para aplicar estilos personalizados diretamente aos blocos. O editor de blocos permite que você veja as alterações em tempo real e ajuste o design visualmente sem precisar escrever código manualmente. Isso torna o processo mais acessível, especialmente para aqueles que preferem uma interface visual à codificação.
Embora o arquivo theme.json lide com a maior parte do estilo, você ainda pode usar CSS para obter um controle mais granular. Você pode adicionar CSS personalizado ao arquivo style.css ou diretamente em blocos individuais usando o editor de blocos.
Um exemplo de arquivo theme.json pode incluir configurações para paletas de cores, tipografia e estilos de bloco, facilitando o gerenciamento e a personalização do design do tema.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}Personalização de temas
A personalização dos temas do WordPress permite que você adapte a aparência e a funcionalidade do seu site para atender a necessidades e preferências específicas. Tanto os temas clássicos quanto os temas em blocos oferecem vários métodos de personalização, mas com abordagens diferentes.
Personalização de temas clássicos
Os temas clássicos oferecem várias maneiras de você personalizar a aparência do seu site:
- Personalizador de temas – O personalizador de temas do WordPress é uma interface fácil de usar que permite que você faça alterações na aparência do tema sem mexer em nenhum código. Você pode acessá-lo em Appearance > Customize. Ele oferece opções para você modificar a identidade do site, cores, menus, widgets e muito mais. As alterações podem ser visualizadas em tempo real antes de serem salvas.
- CSS personalizado – Para alterações de estilo mais específicas, você pode adicionar CSS personalizado diretamente no Personalizador de tema na seção CSS adicional. Esse método é ideal para você fazer pequenos ajustes sem editar os arquivos do tema.
- Child theme – Se você precisar fazer modificações extensas, a criação de um tema filho (child theme) é a abordagem recomendada. Um child theme herda a funcionalidade do tema principal (parent theme) e permite que você substitua ou adicione novos estilos e recursos. Isso garante que suas personalizações sejam preservadas quando o tema principal for atualizado.
- Arquivos de tema – Os usuários avançados podem editar diretamente os arquivos de tema, como
header.php,footer.phpefunctions.php, para fazer alterações mais significativas. Entretanto, esse método requer um bom conhecimento de PHP e da hierarquia de templates de WordPress. - plugins – Há vários plugins disponíveis que ampliam os recursos de personalização do seu tema. Por exemplo, os plugins de construtor de páginas, como o Elementor, permitem que você crie layouts complexos sem codificação.
Personalização de temas de blocos
Com ênfase no FSE, os temas em blocos oferecem uma abordagem mais visual e fácil de usar para a personalização:
- Editor de sites – O Editor de sites do WordPress (Appearance > Editor) é a principal ferramenta para personalizar temas de blocos. Ele permite que você modifique todos os aspectos do seu site, inclusive cabeçalhos, rodapés, templates e blocos individuais, usando uma interface visual. As alterações são aplicadas instantaneamente, facilitando a visualização de como seus ajustes afetam o design do site.
- Estilos globais – Os temas de bloco usam o arquivo
theme.jsonpara definir estilos globais. Você pode personalizar cores, tipografia, espaçamento e muito mais globalmente, garantindo a consistência em todo o site. O Site Editor também permite que você ajuste essas configurações visualmente. - Blocos e padrões reutilizáveis – Você pode criar blocos e padrões reutilizáveis para manter a consistência e simplificar o processo de design. Os blocos reutilizáveis podem ser salvos e inseridos em qualquer artigo ou página, enquanto os padrões de blocos fornecem layouts predefinidos que podem ser personalizados para atender às suas necessidades.
- Templates personalizados – Com os temas de bloco, você pode criar templates personalizados para diferentes tipos de conteúdo diretamente no Editor de Sites. Isso permite que você personalize o layout e o design de páginas ou tipos de artigos específicos sem escrever nenhum código.
- Plugins – Assim como os temas clássicos, os temas de bloco também podem ser ampliados com plugins. Muitos plugins são projetados para aprimorar os recursos do editor de blocos, oferecendo blocos, padrões e opções de personalização adicionais.
Resumo
A personalização dos temas de WordPress permite que você torne seu site exclusivo e funcional. Temas clássicos dependem do Personalizador de Temas, CSS personalizado, temas filhos e edições diretas de arquivos para flexibilidade. Temas em blocos utilizam o Editor de Site e o theme.json para uma abordagem mais visual e intuitiva.
Ambos os métodos oferecem ferramentas poderosas para adaptar seu site às suas necessidades, seja através de codificação ou personalização visual.
Depois de criar um tema que atenda ao seu gosto, seja um tema clássico ou em bloco, é importante hospedar seu site em uma hospedagem robusta para evitar problemas como tempo de inatividade, ataques DDoS e outros. É aqui que os provedores de hospedagem premium, como a Kinsta, brilham.
A Kinsta oferece uma poderosa hospedagem gerenciada de WordPress com uma arquitetura totalmente em contêineres, alimentada exclusivamente pelo Google Cloud Platform na rede de nível premium do Google.
Deixe um comentário