F
Felipe Mateus
Por que criei meu próprio Tema WordPress

Por que criei meu próprio Tema WordPress

Por Felipe Mateus
Postado em 05/03/2026

Mudar o design de um site após 5 anos não é apenas uma questão estética, é uma necessidade. Desde 2021, venho simplificando o felipemateus.com para reduzir o ruído visual, mas a estrutura técnica ainda estava presa a padrões que eu não controlava totalmente no wordpress.

O Problema: O “Peso” dos Temas Generalistas

Eu utilizava o Kadence, que é um excelente tema, mas por ser generalista, ele carrega uma bagagem de recursos e integrações que meu site simplesmente não precisava. Isso afetava diretamente os Core Web Vitals e gerava um overhead de CSS e JS desnecessário.

A Solução: Custom Theme “face-queiroz”

Para resolver isso, desenvolvi o face-queiroz. A ideia foi “limpar” a base do site, removendo o Elementor (que gerava código sujo e pesado) e substituindo por uma implementação sob medida:

  • Tailwind CSS: Agora, cada elemento de estilo é gerado sob demanda. O site deixou de carregar bibliotecas genéricas para ter um CSS enxuto e performático.
  • HTML Nativo: Substituí componentes complexos por estruturas simples em HTML e CSS, o que garante um carregamento muito mais rápido e uma entrega de dados robusta para o Google.
  • Dark Mode sem “Flash”: Implementei uma lógica de Dark Mode que respeita a configuração do sistema do usuário desde o primeiro byte, evitando aquele “flash” de luz branca irritante durante o carregamento assíncrono.

Substituição do Elementor

A principal mudança foi a remoção completa do Elementor. Logo substituí os widgets pesados por componentes em HTML puro e Tailwind CSS, eliminando o excesso de divs (DOM nodes) que atrasavam a renderização da página.

Além de remover outros plugins generalistas que apenas ocupavam espaço no front-end. O site agora é construído com elementos HTML limpos, garantindo que o navegador processe a informação de forma muito mais eficiente.

O novo layout do site, agora livre do Elementor e focado em código HTML semântico.

Mudanças de Plugins

Além do Elementor, eu fiz uma atualização no plugin Trends, além de ter criado um novo plugin para mostrar a lista de posts recentes, que era um recurso que era incluso no Elementor. A ironia é que depois que fui banido do WordPress, estou programando mais em WordPress do que antes.

Inicialmente tinha feito o carregamento dos posts recentes usando JavaScript e API do WordPress, porém isso poderia dar problema de linkagem no Google. Fiz esse plugin que cria um shortcode que implementa a lista de posts recentes.

Uma imagem simples em preto e branco com fundo branco, mostrando duas caixas retangulares empilhadas verticalmente.  A caixa inferior contém o texto: "[Cite: /] Shortcode" decntro da caixa shortcode apresenta o <section class="section-posts"><h2 class="section-title">Mundo Azul do Felipe Mateus</h2><div id="wp-latest-posts" class="posts-grid"><article class="post-card">
    <div class="post-card-header">

         <a href="https://felipemateus.com/blog/2026/05/jose-davi"><img src="https://felipemateus.b-cdn.net/wp-content/uploads/2026/05/elg21-clouds-9513725-300x200.jpg" alt="José Davi" class="post-card-img"></a>
        <a href="https://felipemateus.com/blog/topicos/textos-literarios-e-existenciais" class="post-card-badge">Textos Literários e Existenciais</a>
    </div>

    <div class="post-card-body">
        <img src="https://secure.gravatar.com/avatar/f589c95a9b9b7181f5ca514f5818d8c9c2b2e74366d09b21296a2ae9863bdb34?s=96&d=identicon&r=g" class="post-card-avatar" alt="Autor">

        <h3 class="post-card-title">
            <a href="https://felipemateus.com/blog/2026/05/jose-davi">José Davi</a>
        </h3>

        <div class="post-card-excerpt">
            Leia “José Davi” no Mundo Azul, o blog de Felipe Mateus. O texto está disponível para leitura.        </div>

        <a href="https://felipemateus.com/blog/2026/05/jose-davi" class="post-card-link">
            Ler Mais <span>»</span>
        </a>
    </div>

    <div class="post-card-footer">
        <span>18/05/2026</span>
        <span>Nenhum comentário</span>
    </div>
</article>
<article class="post-card">
    <div class="post-card-header">

         <a href="https://felipemateus.com/blog/2026/05/gerador-de-orcamentos-pro-evolui-para-central-de-gestao-de-servicos"><img src="https://felipemateus.b-cdn.net/wp-content/uploads/2026/05/oqueebusinessintelligence-300x200.jpeg" alt="Gerador de Orçamentos PRO: do orçamento à gestão completa do serviço" class="post-card-img"></a>
        <a href="https://felipemateus.com/blog/topicos/projetos" class="post-card-badge">Projetos</a>
    </div>

    <div class="post-card-body">
        <img src="https://secure.gravatar.com/avatar/f589c95a9b9b7181f5ca514f5818d8c9c2b2e74366d09b21296a2ae9863bdb34?s=96&d=identicon&r=g" class="post-card-avatar" alt="Autor">

        <h3 class="post-card-title">
            <a href="https://felipemateus.com/blog/2026/05/gerador-de-orcamentos-pro-evolui-para-central-de-gestao-de-servicos">Gerador de Orçamentos PRO: do orçamento à gestão completa do serviço</a>
        </h3>

        <div class="post-card-excerpt">
            A nova versão do Gerador de Orçamentos PRO amplia o fluxo do app para além do orçamento, adicionando ordens de...        </div>

        <a href="https://felipemateus.com/blog/2026/05/gerador-de-orcamentos-pro-evolui-para-central-de-gestao-de-servicos" class="post-card-link">
            Ler Mais <span>»</span>
        </a>
    </div>

    <div class="post-card-footer">
        <span>14/05/2026</span>
        <span>Nenhum comentário</span>
    </div>
</article>
<article class="post-card">
    <div class="post-card-header">

         <a href="https://felipemateus.com/blog/2026/04/mercado-de-amarras"><img src="https://felipemateus.b-cdn.net/wp-content/uploads/2026/04/Capa-Mercado_de_amarras_satira-300x169.png" alt="Mercado de Amarras" class="post-card-img"></a>
        <a href="https://felipemateus.com/blog/topicos/plataformas-e-privacidade" class="post-card-badge">Plataformas e Privacidade</a>
    </div>

    <div class="post-card-body">
        <img src="https://secure.gravatar.com/avatar/f589c95a9b9b7181f5ca514f5818d8c9c2b2e74366d09b21296a2ae9863bdb34?s=96&d=identicon&r=g" class="post-card-avatar" alt="Autor">

        <h3 class="post-card-title">
            <a href="https://felipemateus.com/blog/2026/04/mercado-de-amarras">Mercado de Amarras</a>
        </h3>

        <div class="post-card-excerpt">
            Felipe Mateus escreveu "Mercado de Amarras", um texto que fala sobre minha experiência com o Mercado Livre e sobre como...        </div>

        <a href="https://felipemateus.com/blog/2026/04/mercado-de-amarras" class="post-card-link">
            Ler Mais <span>»</span>
        </a>
    </div>

    <div class="post-card-footer">
        <span>30/04/2026</span>
        <span>Nenhum comentário</span>
    </div>
</article>
</div></section>.
imagem mostra implementação do plugin na homepage.
Tema Woerpress: A iamgem apresa um o shortcode com atributos específicos: <div class="about-card-container"><h3 class="about-card-title">Últimos Artigos</h3><ul id="wp-posts-list" class="about-posts-list">    <li class="about-post-item">
        <a class="about-post-text" href="https://felipemateus.com/blog/2026/05/jose-davi">
            José Davi        </a>
    </li>
</ul></div>. Isso indica ao seu plugin para carregar o template de links (lista simples) e exibir os últimos 6 artigos em vez do padrão de 3.
Imagem apresenta o uso do plugin na listagem de links na pagina sobre.

Resultados: Autoridade e Velocidade

Mesmo sem os prints antigos do PageSpeed, os dados atuais do meu domínio mostram que o caminho está correto:

  • Domain Rating (Ahrefs): 36.
  • Saúde do Site: Atualmente em 80%, com foco total em eliminar redirecionamentos e links quebrados.
  • Presença Orgânica: Impacto imediato na fluidez da navegação e tempo de resposta do servidor.

Conclusão

Por fim essa mudança é crucial como parte do meu objetivo de parar de depender de plugins e temas generalistas que sacrificam a performance em troca de facilidades visuais.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *