O editor de temas do WordPress (oficialmente chamado de Editor de Arquivos de Tema) permite que você modifique arquivos de tema diretamente no painel do WordPress.
Ele desempenha um papel importante na personalização e na resolução de problemas de temas do WordPress, pois oferece acesso instantâneo aos arquivos principais do seu tema sem o uso de ferramentas externas, como clientes FTP ou gerenciadores de arquivos.
Um tema do WordPress inclui uma coleção de arquivos PHP, CSS e JavaScript que controlam o design e a funcionalidade do seu site.
Arquivos como header.php e style.css definem a estrutura HTML e o design visual do seu site, enquanto o functions.php controla recursos como menus, widgets e logotipos personalizados.
O Editor de Arquivos de Temas permite que você trabalhe com todos esses arquivos em um só lugar. Você pode usá-lo para:
Editar arquivos de modelo. Altere como páginas específicas, como posts, arquivos ou páginas 404, são estruturadas e exibidas.
Personalizar folhas de estilo. Ajuste fontes, cores, layouts e espaçamento no arquivo style.css para atualizar o design do seu site.
Adicionar funcionalidade. Insira código no functions.php para registrar recursos, enfileirar scripts ou modificar o comportamento padrão do WordPress.
Solucionar problemas. Encontre e corrija problemas em nível de código que afetam o front-end ou o painel do seu site.
O que é o editor de temas do WordPress?
O editor de temas do WordPress é um editor de código de texto simples integrado ao painel administrativo do WordPress que permite editar os arquivos PHP, CSS e outros arquivos de configuração do seu tema.
No lado esquerdo da tela, você verá o editor de código com o arquivo selecionado. À direita, uma barra lateral lista todos os arquivos editáveis no tema ativo.
Os arquivos disponíveis dependem do seu tema do WordPress, mas a maioria dos temas inclui estes arquivos principais:
style.css. A folha de estilo principal que controla o design do seu site, incluindo tipografia, cores, espaçamento, layout e estilos responsivos.
functions.php. O arquivo de configuração que define recursos como áreas de widgets, menus de navegação, tipos de post personalizados e carregamento de scripts.
header.php. Gera a seção superior de cada página, incluindo a tag <head> o logotipo do site e o menu de navegação principal.
footer.php. Exibe a seção inferior de cada página, frequentemente com informações de direitos autorais, widgets de rodapé e scripts de fechamento.
single.php. Controla o layout de posts individuais do blog.
page.php. Determina o layout de páginas estáticas.
index.php. Atua como o template de fallback quando nenhum arquivo mais específico corresponde ao conteúdo solicitado.
Por padrão, apenas usuários com a função de Administrador podem acessar o Editor de Arquivos de Temas. O WordPress controla o acesso por meio da permissão edit_themes, portanto, Editores e Autores não verão a opção no painel.
O editor tem limitações. Não inclui controle de versão, por isso você não pode desfazer alterações ou restaurar uma versão anterior de um arquivo. Erros em arquivos críticos como o functions.php podem quebrar seu site completamente.
O WordPress realiza uma verificação básica de sintaxe antes de salvar arquivos PHP, mas não detectará erros de lógica que ainda podem quebrar seu layout ou funcionalidade.
Quais são as diferenças entre o editor de temas, o editor de blocos e o Personalizador do WordPress?
O editor de temas do WordPress permite que você edite o código-fonte do seu tema diretamente. O editor de blocos ajuda você a criar e organizar conteúdo dentro de posts e páginas. O Personalizador do WordPress permite que você ajuste as configurações do tema por meio de uma interface visual.
Ao comparar o tema e o editor de blocos, a principal diferença é o código versus a edição visual. O editor de temas oferece acesso direto aos arquivos PHP, CSS e JavaScript que controlam como todo o seu site funciona.
O editor de blocos do WordPress, também conhecido como Gutenberg, utiliza um sistema baseado em blocos para construir layouts sem programação. Você o utiliza sempre que cria ou edita um post ou página.
O editor de temas e o Personalizador parecem semelhantes, mas servem a propósitos diferentes.
O Personalizador do WordPress, disponível em Aparência → Personalizar em temas clássicos, oferece uma interface visual para ajustar configurações como identidade do site, cores e menus.
Também mostra uma prévia em tempo real antes de publicar as alterações. No entanto, você só pode alterar as opções fornecidas pelo desenvolvedor do tema.
O editor de temas não tem esses limites. Você pode modificar qualquer linha de código em qualquer arquivo de tema. No entanto, ele não oferece uma visualização prévia e não há um recurso de desfazer. Assim que você clicar em salvar, suas alterações entrarão no ar imediatamente.
Em resumo:
Use o editor de temas quando precisar modificar a lógica do template, adicionar funções PHP ou editar folhas de estilo além do que o Personalizador ou o editor de blocos permite.
Use o editor de blocos para criar e estruturar o conteúdo de posts e páginas.
Use o Personalizador para fazer alterações visuais sem código no design geral do seu site, como adicionar CSS personalizado ao WordPress.
Como funciona o editor de temas do WordPress?
O editor de temas do WordPress lê arquivos armazenados no diretório /wp-content/themes/ e os exibe em uma área de texto editável dentro do seu painel.
Quando você salva as edições, o WordPress as grava diretamente no arquivo em seu servidor.
A localização do editor depende do seu tipo de tema:
Temas clássicos. Navegue até Aparência → Editor de Arquivos do Tema.
Temas de blocos (WordPress 5.9+). Vá para Ferramentas → Editor de Arquivos do Tema.
Siga estas etapas para editar um arquivo de tema com segurança:
Abra o Editor de Arquivos do Tema. Faça login no seu painel do WordPress e navegue até o editor com base no seu tipo de tema.
Selecione o tema. Use o menu suspenso no canto superior direito e clique em Selecionar. O WordPress carrega o tema ativo por padrão, mas você pode visualizar arquivos de qualquer tema instalado.
Escolha um arquivo. Clique no nome de um arquivo na barra lateral direita, como style.css ou functions.php, para carregá-lo no editor.
Edite o código com cuidado. Faça uma alteração por vez para identificar problemas rapidamente se algo quebrar. Se você estiver adicionando um trecho de código grande, teste-o primeiro em um ambiente de staging.
Clique em Atualizar arquivo. O WordPress executa uma verificação básica de sintaxe em arquivos PHP antes de salvar. Se detectar um erro, ele mostra a localização do erro e bloqueia a atualização.
Verifique seu site. Abra seu site em uma nova guia do navegador e confirme se as alterações funcionam como esperado. Se o seu site parar de funcionar e você não conseguir acessar o painel, restaure o seu backup anterior.
O que você pode editar no editor de temas do WordPress?
O editor de temas do WordPress permite que você edite qualquer arquivo dentro do diretório do seu tema. Aqui estão os principais tipos de arquivo de tema:
Lógica de template. Arquivos PHP no WordPress como single.php, page.php, archive.php e 404.php controlam a saída HTML para tipos de página específicos. Edite estes arquivos quando quiser alterar qual conteúdo aparece ou como ele é estruturado. Por exemplo, adicione uma caixa de autor personalizada abaixo de cada post do blog no single.php ou ajuste como as páginas de arquivo exibem os resumos dos posts.
Design visual. O arquivo style.css é o principal arquivo de design do seu tema. Ele controla a tipografia, as cores, o espaçamento, os layouts e os breakpoints responsivos. Todo tema WordPress requer um arquivo style.css. Também inclui os metadados do tema, como nome, versão e autor, em um bloco de comentário no topo.
Comportamento do tema. O arquivo functions.php funciona como um plugin integrado para o seu tema. É um dos arquivos editados com mais frequência porque gerencia o registro de menus e widgets, o carregamento de scripts, o suporte a recursos como miniaturas de postagem e logotipos personalizados, e shortcodes ou hooks personalizados.
Interatividade front-end. Alguns temas incluem arquivos .js para sliders, alternadores de menu móvel ou rolagem suave. Geralmente, você os encontrará em um subdiretório /js/ ou /assets/ dentro da pasta do tema.
Aqui estão alguns exemplos reais de edições comuns:
Alterando a família de fontes do seu site. Abra o style.css e edite a propriedade font-family no seletor body:
body {
font-family: 'Inter', sans-serif;
}
Adicionando uma área de widgets personalizada. Abra o functions.php e registre uma nova barra lateral:
Inserindo um código de rastreamento no cabeçalho. Abra o arquivo header.php e adicione seu snippet de rastreamento ou meta tags dentro da seção <head> logo antes da tag de fechamento </head>:
<head>
<!-- Existing theme head content -->
<!-- Custom tracking code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=your-tracking-id"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'your-tracking-id');
</script>
</head>
Melhores práticas ao usar o editor de temas do WordPress
Ao usar o editor de temas do WordPress, siga algumas das principais boas práticas: sempre faça backup dos seus arquivos antes de editar, use um tema filho para personalizações, teste as alterações em um ambiente de teste, considere alternativas mais seguras para edições complexas e desative o editor se não precisar dele.
Editar arquivos de tema diretamente traz riscos reais. Um erro de sintaxe no functions.php pode causar um erro crítico que impede o seu acesso tanto ao site quanto ao painel.
Colar código não confiável da internet pode introduzir vulnerabilidades de segurança. Quaisquer alterações que você fizer nos arquivos principais de um tema pai também desaparecerão na próxima vez que o tema for atualizado.
Você pode gerenciar esses riscos se estabelecer a rede de segurança adequada antes de fazer qualquer edição:
Mantenha backups e use controle de versão. Salve uma cópia de cada arquivo antes de editá-lo. Se uma linha de código ruim quebrar seu site, esse backup é a maneira mais rápida de recuperá-lo. Se você usa a hospedagem gerenciada de WordPress da Hostinger, você tem backups semanais automáticos em todos os planos e backups diários nos planos Business + IA e superiores. Se você gerencia mudanças frequentes ou trabalha em equipe, use o Git para controle de versão. Ele permite acompanhar revisões, comparar alterações e colaborar sem sobrescrever o trabalho uns dos outros.
Use um tema filho. Um tema filho do WordPress herda o design e a funcionalidade do tema pai, mas armazena suas personalizações separadamente. Quando o tema pai é atualizado, suas alterações permanecem intactas. Se você estiver fazendo edições no nível do código, crie um tema filho primeiro. É o passo mais importante para proteger suas personalizações contra atualizações.
Teste em um site de staging. Um ambiente de staging do WordPress é uma cópia do seu site ativo onde você pode testar alterações com segurança. Se algo quebrar, seus visitantes não notarão. Usuários da Hostinger nos planos Business + IA e superiores podem usar a ferramenta de staging do WordPress no hPanel. Alternativamente, instale o WordPress localmente em seu computador para testar as alterações antes de publicá-las.
Considere alternativas mais seguras para edições avançadas. O Editor de Arquivos de Temas funciona bem para alterações rápidas, mas não é o ideal para desenvolvimento complexo. Para edições maiores, use um cliente FTP como o FileZilla ou o gerenciador de arquivos do seu provedor de hospedagem. Baixe os arquivos do tema, edite-os em um editor de código dedicado, como o VS Code, e depois faça o upload deles novamente. Editores de código oferecem realce de sintaxe, preenchimento automático, detecção de erros e melhor gerenciamento de arquivos.
Desative o editor de temas se você não precisar dele. Se você não planeja editar os arquivos do tema pelo painel, desative o Editor de Arquivos de Tema completamente. Isso ajuda a evitar alterações acidentais e reduz os riscos de segurança caso alguém obtenha acesso de administrador não autorizado. Para fazer isso, adicione esta constante ao seu arquivo wp-config.php:
define( 'DISALLOW_FILE_EDIT', true );
Próximo passo: Aprenda a editar seu site WordPress com o editor de blocos
Além de editar os arquivos do tema diretamente, você pode personalizar seu site WordPress visualmente usando o editor de blocos integrado.
Seu sistema de arrastar e soltar permite criar páginas e posts ricos em conteúdo ao empilhar e organizar blocos do WordPress, como parágrafos, imagens, colunas, botões e incorporações de mídia, tudo sem escrever código.
Para alterações de design em todo o site, como editar cabeçalhos, rodapés e modelos de página, use o Editor do Site em Aparência → Editor. Ele estende o sistema de blocos para todo o seu site.
Você precisará de um tema de blocos, como o Twenty Twenty-Five ou o Twenty Twenty-Four, para usar o Editor de Site.
Se você usar um, ele oferece uma maneira poderosa e sem código de realizar mudanças estruturais que, de outra forma, exigiriam a edição de arquivos de template PHP.
Jornalista formado pela Universidade Federal da Bahia e Especialista em Marketing de Conteúdo na Hostinger, onde atuo na criação e otimização de artigos úteis, envolventes e criativos em áreas como desenvolvimento web e, marketing. Além disso, sou colaborador eventual do site MacMagazine e da editoria de cultura do Jornal A Tarde, fascinado por arte, culinária e tecnologia.
Não existe a aba "editor" no Aparência do meu wordpress, será que é algo relacionado ao tema que estou utilizando?
Andrei L.
September 04 2020
Oi, Vinícius!
Verifique se você está usando a versão WordPress.com ou WordPress.org (este conteúdo foi baseado nesta versão).
As duas versões têm características próprias, como painel de controle diferente e edição de tema também. Pode ser este o contratempo.
Quando clico em Editor, va direto para editar meu meu site, não na tela que aparece ali de códigos. Também não possue o botão Editor de Temas, somente o botão Editor.
Bruno Santana
March 01 2024
Você está usando uma versão atualizada do WordPress, Lucas?
Por gentileza, preencha os campos solicitados.Marque o campo de aceitação da privacidade.Preencha os campos necessários e marque a opção de aceitar termos de privacidade.
Comentários
September 04 2019
Gostaria de saber é como alterar a foto do templates wordpress já que eles vem com textos que nada tem a ver com o que eu quero dizer.
September 03 2020
Não existe a aba "editor" no Aparência do meu wordpress, será que é algo relacionado ao tema que estou utilizando?
September 04 2020
Oi, Vinícius! Verifique se você está usando a versão WordPress.com ou WordPress.org (este conteúdo foi baseado nesta versão). As duas versões têm características próprias, como painel de controle diferente e edição de tema também. Pode ser este o contratempo.
September 08 2021
Títulos com todas as palavras com a primeira letra maiúscula. Como Alterar?
September 10 2021
Olá, Manoel! Dá uma olhadinha no css do seu tema e vê se tem de CSS específica para essas áreas. Será algo tipo:
text-transform: capitalize;February 27 2024
Quando clico em Editor, va direto para editar meu meu site, não na tela que aparece ali de códigos. Também não possue o botão Editor de Temas, somente o botão Editor.
March 01 2024
Você está usando uma versão atualizada do WordPress, Lucas?