Como Criar Templates Personalizados no WordPress

Os custom templates são uma das ferramentas mais poderosas do WordPress para criar páginas e postagens únicas, permitindo personalizar completamente o layout e a funcionalidade do site.

Com eles, você pode atender a necessidades específicas de design e conteúdo, como páginas de portfólio, seções de serviços ou listagens de eventos.

Neste post, você aprenderá a criar e configurar templates personalizados, além de explorar práticas avançadas como o uso de loops customizados e modularização com get_template_part().

1. O Que São Custom Templates e Por Que Utilizá-los?

Definição

• Custom Templates: Arquivos .php que definem layouts específicos para páginas, postagens ou tipos de conteúdo personalizados (Custom Post Types).
• Finalidade: Oferecer controle total sobre o design e o comportamento de páginas específicas no WordPress, indo além dos templates genéricos como single.php ou page.php.

Por Que Usar?

• Criar páginas com layout exclusivo (ex.: uma página de serviços ou portfólio).
• Diferenciar a exibição de conteúdos, como categorias específicas ou custom post types.
• Atender a demandas personalizadas de design e funcionalidade.

2. Criando um Template de Página

Os templates de página são os mais comuns para personalização. Vamos criar um template básico para uma página de serviços.

Passo a Passo

1. Crie um Novo Arquivo

No diretório do seu tema (ou tema filho), crie um arquivo chamado template-servicos.php.

2. Adicione o Cabeçalho de Template

Insira o seguinte código no início do arquivo para que ele seja reconhecido como um template:

<?php
/*
Template Name: Página de Serviços
*/
get_header(); ?>
<main>
    <h1>Serviços</h1>
    <p>Descrição detalhada dos serviços oferecidos pela empresa.</p>
</main>
<?php get_footer(); ?>

3. Aplique o Template

No painel WordPress:

1. Crie ou edite uma página.
2. No menu lateral, em Atributos da Página, selecione o template “Página de Serviços”.

Resultado: Sua página agora terá um layout exclusivo definido pelo template-servicos.php.

3. Templates para Custom Post Types

Além de páginas, você pode criar templates específicos para Custom Post Types (CPTs), como “Portfólio” ou “Eventos”.

Passo a Passo

1. Crie o Arquivo do Template

Para um CPT chamado “portfolio”, crie um arquivo chamado single-portfolio.php no diretório do tema.

2. Estruture o Template

Insira o seguinte código:

<?php get_header(); ?>
<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
    <p>Categoria: <?php the_terms(get_the_ID(), 'portfolio_category'); ?></p>
</main>
<?php get_footer(); ?>

Resultado: Cada post do tipo “portfólio” terá um layout personalizado.

4. Custom Templates com Estrutura Dinâmica

a. Modularizando com get_template_part()

Para organizar e reutilizar partes do template, use get_template_part().

Exemplo

Crie um arquivo chamado content-portfolio.php:

<article>
    <h2><?php the_title(); ?></h2>
    <p><?php the_excerpt(); ?></p>
</article>

No template principal (single-portfolio.php), insira:

<?php get_template_part('content', 'portfolio'); ?>

Vantagem: Separar componentes em arquivos menores facilita a manutenção e reutilização.

b. Criando Loops Customizados com WP_Query

Use WP_Query para exibir conteúdos específicos em um template.

Exemplo

Vamos exibir os 5 projetos mais recentes do CPT “portfolio”:

<?php
$args = array(
    'post_type' => 'portfolio',
    'posts_per_page' => 5,
);
$portfolio_query = new WP_Query($args);
if ($portfolio_query->have_posts()) :
    while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_excerpt(); ?></p>
<?php
    endwhile;
endif;
wp_reset_postdata();
?>

5. Estilos e Scripts para Templates Personalizados

a. Carregando Scripts e Estilos Específicos

Adicione estilos ou scripts apenas para um template usando o functions.php.

Exemplo

Se você precisa de um CSS exclusivo para o template de serviços:

function carregar_estilos_template_servicos() {
    if (is_page_template('template-servicos.php')) {
        wp_enqueue_style('servicos-css', get_template_directory_uri() . '/css/servicos.css');
    }
}
add_action('wp_enqueue_scripts', 'carregar_estilos_template_servicos');

b. Customizando CSS para Templates

Crie um arquivo CSS exclusivo, como servicos.css, com o seguinte conteúdo:

body {
    background-color: #f9f9f9;
    color: #333;
}
h1 {
    text-align: center;
    font-size: 2.5rem;
}

6. Exercícios Práticos

1. Criar um Template de Página:
   • Desenvolva um template chamado “Sobre” com layout personalizado.
2. Customizar um CPT:
   • Crie um template para o tipo de post “Eventos” e exiba uma lista com datas e locais.
3. Modularizar o Template:
   • Use get_template_part() para dividir o código em partes reutilizáveis.

7. Conclusão

Custom templates são indispensáveis para quem deseja criar sites WordPress exclusivos e adaptados às necessidades de design e funcionalidade.

Com as práticas apresentadas, você pode criar estruturas únicas, organizar melhor seu código e oferecer experiências visuais diferenciadas.

Quer dominar a criação de templates personalizados no WordPress e aprender técnicas avançadas de desenvolvimento? Inscreva-se no Curso Desenvolvimento PHP WordPress e transforme seu conhecimento em soluções profissionais!