Tema no Wordpress | filter, hook, hierarquia | Frontend

• Tema no Wordpress | filter, hook, hierarquia | Frontend

---

info

De inicio para criar um tema:

• single.php
• page.php
• functions.php
• front-page.php
• header.php
• footer.php
• search.php
• archive.php
• 404.php
• index.php

1. Começando o tema

1. Crie uma pasta em wp-content/themes/ com o nome do seu tema.

2. Dentro dela, crie dois arquivos obrigatórios:

   • style.css — define o cabeçalho do tema e o estilo principal.
   • index.php — arquivo base que exibirá o conteúdo.

   Exemplo do style.css:

   /*
   Theme Name: Meu Tema
   Author: João Dev
   Version: 1.0
   */

   Exemplo do index.php:

   <?php get_header(); ?>
   <main>
       <?php
       if (have_posts()):
           while (have_posts()): the_post();
               the_title('<h1>', '</h1>');
               the_content();
           endwhile;
       endif;
       ?>
   </main>
   <?php get_footer(); ?>

Esses dois arquivos são o mínimo necessário para o WordPress reconhecer e ativar o tema.

---

2. Adicionando estrutura modular (templates)

O WordPress separa partes do layout em arquivos específicos, para reutilização e manutenção.

1. Crie os arquivos básicos:

   • header.php → cabeçalho e início do HTML.
   • footer.php → rodapé e fechamento do HTML.
   • sidebar.php → barra lateral (opcional).

2. Inclua essas partes dentro dos templates principais:

   <?php get_header(); ?>
   <main>...conteúdo...</main>
   <?php get_sidebar(); ?>
   <?php get_footer(); ?>

3. Outros arquivos importantes:

   • single.php → posts individuais.
   • page.php → páginas estáticas.
   • archive.php → listagens de posts.
   • 404.php → página de erro.

O WordPress escolherá automaticamente qual template usar, conforme o tipo de conteúdo exibido.

---

3. Criando o arquivo functions.php

O arquivo functions.php é onde você ativa recursos e adiciona comportamentos.

1. Crie o arquivo functions.php dentro da pasta do tema.
2. Use add_action() e add_filter() para conectar suas funções ao sistema do WordPress.

Exemplo:

add_action('after_setup_theme', function() {
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
    register_nav_menu('menu_principal', 'Menu Principal');
});

3. Para carregar CSS e JS:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('estilo', get_stylesheet_uri());
    wp_enqueue_script('main', get_template_directory_uri().'/js/main.js', [], false, true);
});

O functions.php funciona como um “mini plugin” dentro do tema.

---

4. Entendendo actions e filters

O WordPress tem pontos de execução chamados hooks, que permitem adicionar ou modificar funcionalidades sem alterar o código principal.

Actions

Usadas para executar algo em determinado momento.

add_action('wp_footer', function() {
    echo '<p>Rodapé adicionado via action.</p>';
});

Aqui, wp_footer é um hook padrão do WordPress que ocorre antes da tag </body>.

Filters

Usadas para modificar valores.

add_filter('the_title', function($titulo) {
    return '★ ' . $titulo;
});

Aqui, todo título exibido por the_title() será modificado.

Hooks próprios

Você pode criar seus próprios pontos de ação no tema:

// No template
do_action('meu_tema_antes_do_conteudo');

// Em outro lugar
add_action('meu_tema_antes_do_conteudo', function() {
    echo '<p>Conteúdo adicionado via hook personalizado.</p>';
});

---

5. Entendendo do_action() e apply_filters()

Essas funções são usadas dentro do código para disparar hooks:

• do_action('nome') executa todas as funções adicionadas com add_action('nome', ...).
• apply_filters('nome', $valor) envia um valor para ser modificado por filtros.

Exemplo de filtro personalizado:

function mostrar_mensagem() {
    $mensagem = "Bem-vindo ao site!";
    $mensagem = apply_filters('mensagem_boas_vindas', $mensagem);
    echo $mensagem;
}

add_filter('mensagem_boas_vindas', function($msg) {
    return str_replace("Bem-vindo", "Olá", $msg);
});

---

6. Hooks padrão do WordPress

O WordPress oferece centenas de hooks prontos. Os mais usados ao criar temas são:

Actions

Hook	Quando ocorre
after_setup_theme	Quando o tema é inicializado
wp_enqueue_scripts	Quando scripts e estilos devem ser carregados
wp_head	Dentro da tag <head>
wp_footer	Antes do fechamento </body>
init	Durante o carregamento do WordPress
save_post	Quando um post é salvo

Filters

Hook	O que modifica
the_title	O título antes de ser exibido
the_content	O conteúdo do post
excerpt_length	Tamanho do resumo
excerpt_more	Texto final do resumo
body_class	Classes do <body>
post_class	Classes de cada post

---

7. Hierarquia de templates

O WordPress segue uma ordem de prioridade para decidir qual arquivo de template usar.

Exemplo para um post:

1. single-post.php
2. single.php
3. index.php

Exemplo para uma página:

1. page-slug.php
2. page-id.php
3. page.php
4. index.php

Exemplo para uma categoria:

1. category-slug.php
2. category-id.php
3. category.php
4. archive.php
5. index.php

Essa hierarquia permite criar templates específicos para cada tipo de conteúdo.

---

8. Hooks de temas e plugins

Temas e plugins também criam seus próprios hooks usando do_action() e apply_filters().

Exemplo – WooCommerce:

Hook	Ponto de execução
woocommerce_before_main_content	Antes da área principal da loja
woocommerce_after_shop_loop_item_title	Após o título do produto
woocommerce_thankyou	Página de agradecimento após compra

Exemplo – Tema Astra:

Hook	Ponto de execução
astra_header_before	Antes do cabeçalho
astra_footer_after	Depois do rodapé

Esses hooks permitem estender funcionalidades sem alterar o tema ou plugin original.

---

9. Prioridade e remoção de hooks

1. Prioridade define a ordem de execução:

   add_action('wp_footer', 'primeiro', 5);
   add_action('wp_footer', 'segundo', 15);

   A função com número menor roda primeiro.

2. Removendo hooks:

   remove_action('wp_footer', 'primeiro');
   remove_filter('the_title', 'filtro_titulo');

---

10. Estrutura final recomendada

meu-tema/
├── style.css
├── functions.php
├── header.php
├── footer.php
├── sidebar.php
├── index.php
├── single.php
├── page.php
├── archive.php
└── 404.php

1. style.css — informações e design.
2. functions.php — funções, scripts e hooks.
3. Templates — controlam visual e estrutura de cada tipo de página.
4. Hierarquia — define qual template o WordPress carrega.
5. Hooks — permitem ampliar ou alterar comportamento sem tocar no núcleo.