Como Editar HTML no Editor de Código do WordPress (Guia para Iniciantes)

Procurando mais controle sobre o design e a funcionalidade do seu site WordPress? Aprender a editar HTML é a resposta.

HTML (HyperText Markup Language) é o código que estrutura seu conteúdo, dizendo aos navegadores da web como exibir suas páginas. Editá-lo diretamente é útil para personalização avançada, adição de funcionalidades específicas e solução de problemas.

Frequentemente ouvimos de usuários do WPBeginner que ficam nervosos em mexer em código, mas editar HTML no WordPress é mais fácil do que você imagina.

Neste artigo, mostraremos como editar HTML no editor de código do WordPress usando vários métodos diferentes.

Por que você deveria editar HTML no WordPress?

O WordPress oferece milhares de temas e plugins para mudar a aparência do seu site e personalizar diferentes elementos sem tocar em uma única linha de código.

No entanto, plugins e temas têm suas limitações e podem não oferecer os recursos exatos que você procura. Como resultado, você pode não conseguir estilizar seu site da maneira que deseja.

É aqui que editar HTML é realmente útil. Você pode facilmente realizar personalizações avançadas usando código HTML. Ele oferece muita flexibilidade e controle sobre como seu site ficará e funcionará.

Além disso, aprender a editar HTML também pode ajudá-lo a identificar e corrigir erros em seu site WordPress quando você não tem acesso ao painel.

Dito isso, vamos analisar diferentes maneiras de editar HTML em um site WordPress.

Cobriremos como editar HTML usando o editor de blocos e o editor clássico, e também mostraremos uma maneira fácil de adicionar código ao seu site. Você pode clicar nos links abaixo para pular para a seção de sua preferência.

• Como Editar HTML no Editor de Blocos do WordPress
• Como Editar HTML no Editor Clássico do WordPress
• Como Editar HTML em Widgets do WordPress
• Como Editar HTML no Editor de Temas do WordPress
• Como Editar HTML no WordPress Usando FTP
• Maneira Fácil de Adicionar Código no WordPress

Como Editar HTML no Editor de Blocos do WordPress

No editor de blocos do WordPress, existem várias maneiras de editar o HTML de sua postagem ou página.

Primeiro, você pode usar um bloco de HTML Personalizado em seu conteúdo para adicionar código HTML.

Para começar, acesse seu painel do WordPress e, em seguida, adicione uma nova postagem/página ou edite um artigo existente. Depois disso, clique no sinal de mais (+) no canto superior esquerdo e adicione um bloco de 'HTML Personalizado'.

Em seguida, insira seu código HTML personalizado no bloco.

Você também pode clicar na opção ‘Visualizar’ para verificar se o código HTML está funcionando corretamente e como seu conteúdo ficará em seu site ativo.

Outra maneira de adicionar ou alterar o código HTML no editor de blocos do WordPress é editando o HTML de um bloco específico.

Para fazer isso, basta selecionar um bloco existente em seu conteúdo e, em seguida, clicar no menu de três pontos. Em seguida, prossiga e clique na opção ‘Editar como HTML’.

Agora você verá o HTML de um bloco individual. Prossiga e edite o HTML do seu conteúdo.

Por exemplo, você pode adicionar um link nofollow, alterar o estilo do seu texto ou adicionar outro código.

Se você quiser editar o HTML de sua postagem inteira, poderá usar o ‘Editor de Código’ no editor de blocos do WordPress.

Você pode acessar o editor de código clicando na opção de três pontos no canto superior direito. Em seguida, selecione ‘Editor de Código’ nas opções suspensas.

Como Editar HTML no Editor Clássico do WordPress

Se você estiver usando o editor clássico do WordPress, poderá editar facilmente o HTML na visualização de Texto.

Para acessar a visualização de Texto, basta editar uma postagem de blog ou adicionar uma nova. Quando estiver no editor clássico, clique na aba 'Texto' para ver o HTML do seu artigo.

Depois disso, você pode editar o HTML do seu conteúdo. Por exemplo, você pode colocar palavras em negrito para destacá-las, usar o estilo itálico no texto, criar listas, adicionar um índice e muito mais.

Como Editar HTML em Widgets do WordPress

Você sabia que pode adicionar e editar código HTML na área de widgets do seu site?

No WordPress, usar um widget de HTML Personalizado pode ajudar a personalizar sua barra lateral, rodapé e outras áreas de widgets. Por exemplo, você pode incorporar formulários de contato, botões de chamada para ação (CTA), Google Maps e outros conteúdos.

Você pode começar acessando seu painel de administração do WordPress e depois indo em Aparência » Widgets. Depois disso, clique no ícone de 'Mais' em qualquer área de widget onde você deseja adicionar código HTML.

As áreas de widget disponíveis dependerão do tema do WordPress que você está usando. Por exemplo, você pode adicioná-lo ao seu rodapé, cabeçalho ou outras áreas.

Em seguida, procure pelo widget HTML Personalizado no menu de blocos de widgets e clique nele para adicioná-lo automaticamente à área de widgets.

Depois disso, você pode clicar no seu widget HTML Personalizado e inserir o código HTML.

Quando terminar, não se esqueça de clicar no botão 'Atualizar' no canto superior direito da tela.

Agora você pode visitar seu site para ver o widget HTML Personalizado em ação.

Como Editar HTML no Editor de Temas do WordPress

Outra maneira de editar o HTML do seu site é através do Editor de Tema do WordPress (Editor de Código).

No entanto, não recomendamos que você edite o código diretamente no Editor de Tema. O menor erro ao inserir código pode quebrar seu site e impedir seu acesso ao painel do WordPress.

Além disso, se você atualizar seu tema, todas as suas alterações serão perdidas.

Dito isso, se você estiver considerando editar o HTML usando o editor de tema, é uma boa ideia fazer backup do seu site antes de fazer quaisquer alterações.

Em seguida, acesse Aparência » Editor de Tema no seu painel do WordPress. Você verá uma mensagem de aviso sobre a edição direta dos arquivos do tema.

Depois de clicar no botão 'Eu Entendo', você verá seus arquivos e código do tema.

A partir daqui, você pode escolher qual arquivo deseja editar e fazer suas alterações.

Como Editar HTML no WordPress Usando FTP

Outro método alternativo para editar HTML nos arquivos de tema do WordPress é usando FTP, também conhecido como serviço de protocolo de transferência de arquivos.

Este é um recurso padrão que vem com todas as contas de hospedagem WordPress.

O benefício de usar FTP em vez do editor de código é que você pode corrigir problemas facilmente usando o cliente FTP. Dessa forma, você não ficará bloqueado no seu painel WordPress se algo der errado ao editar o HTML.

Para começar, você precisará primeiro selecionar um software FTP. Usaremos o FileZilla neste tutorial, pois é um cliente FTP gratuito e fácil de usar para Windows, Mac e Linux.

Após selecionar seu cliente FTP, você precisará fazer login no servidor FTP do seu site. Você pode encontrar os detalhes de login no painel de controle do seu provedor de hospedagem.

Uma vez logado, você verá diferentes pastas e arquivos do seu site na coluna 'Site remoto'. Navegue até os arquivos do seu tema indo para wp-content » theme.

Agora você verá diferentes temas no seu site. Selecione o tema que você deseja editar.

Em seguida, você pode clicar com o botão direito em um arquivo de tema para editar o HTML. Por exemplo, se você quiser fazer alterações no rodapé, clique com o botão direito no arquivo footer.php.

Muitos clientes FTP permitem que você visualize e edite o arquivo e os carregue automaticamente assim que fizer as alterações. No FileZilla, você pode fazer isso clicando na opção ‘Visualizar/Editar’.

No entanto, sugerimos que você baixe o arquivo que deseja editar para sua área de trabalho antes de fazer quaisquer alterações.

Após editar o HTML, você pode substituir o arquivo original. Para mais detalhes, recomendamos seguir nosso guia sobre como usar FTP para carregar arquivos no WordPress.

Maneira Fácil de Adicionar Código no WordPress

A maneira mais fácil de adicionar código no WordPress é usando WPCode, o melhor plugin de snippets de código do mercado.

A equipe da WPBeginner projetou este plugin para que até mesmo iniciantes completos possam adicionar código personalizado ao seu site em minutos. Além disso, existe uma versão lite do plugin que é 100% gratuita para usar.

Ele ajuda a organizar seu código, pois ele é armazenado em um só lugar. Além disso, ele previne erros que podem ser causados ao editar código manualmente.

Outro benefício é que você não precisa se preocupar com seu código sendo apagado se decidir atualizar ou alterar seu tema.

A primeira coisa que você precisará fazer é instalar e ativar o plugin gratuito WPCode em seu site. Para mais detalhes, você pode seguir nosso tutorial detalhado sobre como instalar um plugin do WordPress.

Assim que o plugin estiver ativo, você pode acessar Snippets de Código » Cabeçalho e Rodapé em seu painel de administração.

Em seguida, você pode adicionar o código HTML ao seu site nas caixas de cabeçalho, corpo e rodapé.

Por exemplo, digamos que você queira exibir uma barra de alerta em seu site. Você pode simplesmente inserir o código HTML na caixa 'Corpo' e clicar no botão 'Salvar Alterações'.

Além disso, você pode adicionar um código de rastreamento do Google Analytics, pixel do Facebook e pixel de anúncio do TikTok no cabeçalho. Ou, você pode adicionar um botão do Pinterest no rodapé do seu site usando o plugin.

Com o WPCode, é fácil decidir onde o código será exibido. Por exemplo, você pode exibir automaticamente algum código HTML no início ou no final de cada postagem.

Para mais detalhes, você pode ver nosso guia sobre como adicionar código de cabeçalho e rodapé no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como editar HTML no editor de código do WordPress. Você também pode querer ver nosso guia sobre como adicionar formulários HTML no WordPress, ou ver os motivos mais importantes pelos quais você deve usar o WordPress para o seu site.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.