Como editar HTML no WordPress

Quer personalizar seu site? Se você está procurando maneiras de personalizar seu site e seu design, veio ao lugar certo. Neste guia, mostraremos diferentes métodos amigáveis ​​para iniciantes para editar arquivos HTML no WordPress sem contratar um freelancer.

Por que editar código HTML no WordPress?

Embora o WordPress seja um CMS pronto para uso que não requer experiência em codificação e oferece milhares de temas e plugins para personalizar seu site, aprender a editar o HTML lhe dará muita flexibilidade.

Ao personalizar o código HTML, você ganhará mais controle sobre seu site e poderá realizar personalizações avançadas de design, adicionar funcionalidades ou efeitos personalizados ao seu tema . Além disso, você poderá solucionar problemas quando não tiver acesso ao seu painel de administração.

Algumas das principais coisas que você pode fazer personalizando o código HTML são:

• Incluir texto, imagens e vídeos
• Adicione funcionalidades ou recursos
• Tenha mais controle sobre seu site WordPress
• Solucione problemas quando você não tiver acesso ao painel de administração do WordPress

Em suma, se você aprender a editar o código HTML no WordPress, terá mais opções para personalizar seu site e poderá levá-lo ao próximo nível.

Quando você não deve editar o HTML?

Como você provavelmente sabe, o WordPress usa quatro linguagens principais: HTML, CSS, PHP e JavaScript. Isso significa que, para fazer algumas alterações, você precisará saber mais do que apenas HTML. É por isso que existem alguns casos em que personalizar o código HTML não é uma boa ideia.

O HTML é usado para estruturar páginas da Web, portanto, se você precisar alterar o design do seu site e editar coisas como cores, fontes, alturas de linha e similares, basta personalizar o código CSS. Além disso, você não deve editar o HTML ao tentar controlar o layout de várias páginas ao mesmo tempo.

Além disso, não recomendamos personalizar o código em um ambiente ativo. Uma única vírgula ou apóstrofo no lugar errado pode causar problemas significativos ao seu site, por isso é uma ideia muito melhor testar tudo em um ambiente de teste.

Como editar HTML no WordPress

Neste guia, mostraremos diferentes maneiras de personalizar o código HTML no WordPress:

1. Editor clássico do WordPress
2. Editor de blocos do WordPress
3. Editar o código-fonte HTML
4. Com plug-ins
5. Widgets

Vamos dar uma olhada em cada um deles para que você possa escolher o que é melhor para você.

Antes que você comece…

Antes de prosseguir, é altamente recomendável que você crie um tema filho. Se você não sabe como fazer isso, confira este guia passo a passo ou use qualquer um desses plugins. Isso é importante porque se você modificar os arquivos do tema pai, perderá todas as suas personalizações toda vez que atualizar seu tema.

Além disso, certifique-se de criar um backup completo do seu site e armazená-lo em um local seguro. Dessa forma, você sempre pode voltar a ele e restaurar seu site se algo der errado.

1) Editor clássico do WordPress

Classic Editor é o editor de conteúdo popular para WordPress. Este plugin permite que você edite facilmente os arquivos HTML em seu site.

Primeiro, instale e ative o plugin Classic Editor em seu site. Em seguida, abra qualquer postagem ou página e você verá dois modos: Visual e Texto.

Visual mostra o que você vê no frontend. Você verá os diferentes tamanhos de cabeçalho, imagens, texto em negrito e assim por diante.

Quando você usa o editor de texto, por outro lado, você vê a versão HTML do post, então você pode editar o código HTML daqui.

O bom é que você pode alternar para o modo Visual para ver como suas alterações ficarão no frontend sem precisar publicar nada.

Depois de adicionar ou personalizar o código HTML, basta atualizar ou publicar o post e pronto!

2) Editor de blocos do WordPress

A versão mais recente do WordPress vem com um novo editor chamado Gutenberg. É um editor de conteúdo avançado que vem com mais recursos. Se você estiver usando o Gutenberg, também poderá editar o código HTML como fizemos antes.

Para adicionar uma seção HTML personalizada dentro de suas postagens ou páginas, use o bloco HTML e adicione o código HTML a ela. Então atualize o post e pronto.

Às vezes, você precisa editar seus parágrafos ou imagens existentes e adicionar um estilo extra. Para editar o código HTML existente no WordPress usando o Gutenberg, selecione o elemento que deseja personalizar e pressione Mais opções .

Depois disso, selecione a opção Editar como HTML .

Você verá o modo HTML do elemento e poderá personalizá-lo.

Quando estiver satisfeito com as alterações, você poderá voltar facilmente para o editor visual clicando em Editar visualmente .

Como você pode ver, adicionar ou editar código HTML existente usando o Gutenberg é rápido e fácil. Antes de publicar, sempre verifique a visualização para ter certeza de que tudo está bem.

3) Edite o código-fonte HTML no WordPress

Outra alternativa é editar o código-fonte HTML no WordPress. Este processo é mais arriscado do que os anteriores porque você pode quebrar seu site se não souber o que está fazendo. Vamos ver como você pode personalizar o código-fonte HTML usando quatro métodos diferentes.

1. Editor de arquivos do painel
2. FTP

3.1) Editor de arquivos do painel

Este é o método mais direto para editar o código-fonte sem visitar nenhum outro site ou depender de ferramentas adicionais.

Em seu painel do WordPress, vá para Aparência > Editor de Temas .

No lado direito, você verá todos os arquivos do tema.

No canto superior direito, você também tem a opção de alterar o diretório do seu tema.

No nosso caso, estamos usando o tema Twenty Twenty. Depois de selecionar o tema certo, escolha a pasta e o arquivo apropriados que você deseja editar.

Alguns dos arquivos mais comuns que você pode querer editar são:

• index.php
• header.php
• footer.php
• funções.php
• estilo.css

Digamos que você queira editar o cabeçalho do seu tema, então escolha o arquivo header.php da lista.

Normalmente, os arquivos .php contêm PHP, mas também outras linguagens, como HTML, JavaScript (às vezes) e CSS (às vezes). Assim, você pode editar os arquivos HTML a partir daí. Como mencionado acima, uma única vírgula ou apóstrofo pode quebrar seu site, portanto, proceda com cautela.

3.2) FTP

Se preferir um método mais técnico, você pode personalizar o código HTML com um cliente FTP. Para isso, você pode usar o FileZilla, um dos melhores clientes FTP, seguros e fáceis de usar.

Primeiro, baixe o FileZilla e crie uma conta. A maioria das empresas de hospedagem WordPress oferece acesso gratuito à conta FTP através do cPanel. Depois de gerar seu nome de host, nome de usuário e senha, conecte-se ao seu servidor.

Se você quiser editar seus arquivos de tema, vá para a pasta wp-content > themes .

Como você pode ver na imagem acima, temos quatro temas em nosso site: GeneratePress, Twenty Nineteen, Twenty Twenty e Twenty Twenty One.

Digamos que queremos editar os arquivos do GeneratePress, então abrimos a pasta do tema.

Para editar um arquivo, clique com o botão direito nele e selecione a opção Visualizar/Editar . Por exemplo, para editar o rodapé, você precisa editar o arquivo footer.php .

O FileZilla abrirá o arquivo em um editor de texto, conforme mostrado abaixo.

Depois disso, você pode fazer alterações, salvar o arquivo e enviá-lo de volta para o servidor.

3.3) cPainel

A maioria das empresas de hospedagem oferece acesso cPanel (Painel de Controle) a seus clientes, por isso é outra excelente maneira de editar seu código HTML no WordPress.

Para fazer isso, faça login na sua conta de hospedagem na web e acesse o cPanel. Em seguida, abra o gerenciador de arquivos .

Depois disso, vá para wp-content > themes .

Abra o tema que deseja personalizar e clique com o botão direito do mouse no arquivo que deseja alterar e pressione Editar .

Isso abrirá o arquivo em um editor de texto onde você poderá personalizá-lo. Depois de fazer as alterações, não se esqueça de salvar o arquivo.

4) Plug-ins

Outra maneira de editar o código HTML no WordPress é usando plugins. O WP File Manager é uma excelente ferramenta gratuita que traz o recurso FTP para o seu painel. Vamos ver como usá-lo.

Primeiro, faça login no seu site WordPress e vá para Plugins > Adicionar novo arquivo . Procure o Gerenciador de Arquivos, instale-o e ative-o.

Depois disso, selecione a opção WP File Manager na barra lateral.

Agora, abra o diretório wp-content .

Em seguida, abra a pasta de temas e selecione a pasta que deseja modificar. No nosso caso, editaremos os arquivos do tema Astra.

Depois de abrir a pasta, você verá todos os arquivos disponíveis. Depois de encontrar o que deseja editar, clique com o botão direito nele e selecione a opção Editor de código .

Como a maioria dos programas de FTP, este plugin não requer que você tenha um software de edição de texto instalado em seu laptop. Se for esse o seu caso, o plug-in abrirá o arquivo em um editor de texto baseado na web de onde você pode editar o código.

Quando terminar de modificar o arquivo, salve-o e pronto.

5) Widgets

Agora vamos ver como adicionar código HTML à área do widget.

Primeiro, vá para Aparência > Widgets .

Lá, você verá todas as áreas de widgets.

Agora adicione um widget HTML a qualquer área de widget. Para este tutorial, escolheremos a barra lateral.

Você pode adicionar um título ao código e incluir seu código HTML personalizado lá.

Depois de adicionar o código, salve o widget e pronto.

Bônus: Editando CSS e PHP no WordPress

O WordPress usa quatro idiomas principais:

• PHP
• HTML
• CSS
• JavaScript

Até agora, você aprendeu como editar o código HTML no WordPress. Nesta seção, mostraremos como você pode personalizar o código CSS e PHP do seu site e adicionar scripts personalizados.

Editando e adicionando código CSS

Além dos métodos mencionados acima, você pode usar o personalizador do WordPress para adicionar código CSS personalizado ao seu site. Para isso, no seu painel do WordPress , vá em Aparência > Personalizar .

Quando estiver no personalizador, vá para CSS Adicional .

Lá você pode simplesmente inserir seu código CSS.

A melhor parte é que você pode ver todas as mudanças no modo de visualização ao vivo.

Quando estiver satisfeito com as alterações, atualize/publique o post ou a página.

Essa é uma das maneiras mais fáceis de adicionar código CSS ao seu site. Tenha em mente que este código será colocado em cima do arquivo style.css do nosso tema.

NOTA: Alguns temas do WordPress, como Divi ou Avada, vêm com um recurso embutido para adicionar código CSS, para que você possa usar o painel de temas para incluir seu código CSS em vez de usar o personalizador.

Editando/adicionando código PHP

PHP é a linguagem principal do WordPress. Semelhante à edição de HTML, é fácil personalizar o código PHP existente. Você pode fazer isso usando o editor de temas ou qualquer método descrito acima. Nesta seção, mostraremos como adicionar snippets PHP usando um plug-in chamado Code Snippets.

Primeiro, instale e ative os trechos de código em seu site.

Depois disso, vá para as configurações dos plugins e clique em Adicionar novo para incluir um novo snippet em seu site.

Dê um nome ao seu snippet para lembrar o que você está adicionando, cole seu código PHP e salve o snippet.

Para este tutorial, pegamos um snippet simples para adicionar tamanhos de imagem personalizados ao nosso site. Depois disso, clique em Salvar e pronto!

Dessa forma, você pode adicionar código PHP ilimitado ao seu site WordPress e personalizá-lo o quanto quiser.

Conclusão

Em suma, personalizar o código HTML pode ajudá-lo a ter mais controle sobre seu site, além de adicionar funcionalidades e solucionar problemas. A melhor parte é que no WordPress, você pode editar facilmente o código HTML e personalizar seu site.

Neste guia, vimos diferentes maneiras de fazer isso:

1. Com o Editor Clássico do WordPress
2. Usando o Editor de Blocos
3. Editar o código-fonte HTML
4. Usando plug-ins
5. Adicionar HTML a widgets

A maneira mais simples de personalizar o código HTML é através do editor de temas do WordPress. Se você estiver procurando por uma solução mais avançada, poderá editar o código-fonte HTML usando um cliente FTP como o FileZilla. Se você não deseja instalar nenhum software em seu computador, pode usar o método cPanel.

Por outro lado, se preferir plugins, você pode usar o WP File Manager para incluir ou editar o código HTML sem depender de nenhum outro software FTP ou editores de texto.

Por fim, você também pode incluir e editar CSS ou PHP usando o WordPress Customizer ou o plug-in Code Snippets.

Esperamos que este artigo tenha sido útil e tenha ajudado você a personalizar seu site. Você conhece outras maneiras de editar arquivos HTML no WordPress? Qual destes você usa? Deixe-nos saber na seção de comentários abaixo!