Apesar de o WordPress permitir a quem não é programador gerenciar mais facilmente um site, é provável que chegue o momento em que você pretende editar o código do WordPress para obter um pouco mais de controle sobre o aspeto ou funcionamento do seu site.
Para ajudar você nessa parte, essa publicação mostrará como editar com segurança o código do WordPress de várias formas:
- Editar HTML do WordPress para Publicações ou Páginas Individuais
- Editar o Código HTML/PHP do Seu Tema
- Adicionar CSS Personalizado ao Su Site
Se já sabe o que pretende fazer, clique em um dos links acima para ir direto para essa seção específica. Se não, vamos editar!
Como Editar HTML do WordPress para Publicações ou Páginas Individuais
Comecemos com a forma mais simples de editar HTML do WordPress – indo até ao código-fonte para publicações individuais, páginas ou outros tipos de publicações no WordPress.
Pode fazer isso no novo editor de blocos do WordPress (Gutenberg) e também no antigo editor clássico TinyMCE
Como Editar HTML do WordPress no Editor de Blocos (Gutenberg)
Existem algumas formas de trabalhar com o HTML no Gutenberg.
Primeiro, se quiser somente adicionar seu próprio código HTML a uma parte do conteúdo, recomendo não tentar editar todo o código-fonte da sua publicação, já que isso complica bastante as coisas sem necessidade.
Em alternativa, só precisa de usar o bloco HTML Personalizado para esse fim e colar nele o HTML que pretende usar:
Contudo, pode também haver um momento em que precisa de editar diretamente o HTML de um bloco diferente. Por exemplo, se quiser adicionar uma tag nofollow a um link no editor de blocos, terá de editar o HTML desse bloco.
Existem duas formas de fazer isso…
Primeiro, pode clicar nas opções de um bloco individual e escolher a opção Editar como HTML:
Isso permitirá a você editar o HTML somente para esse bloco individual:
Ou se quiser editar o HTML para a publicação inteira, poderá entrar no Editor de Código no menu suspenso Ferramentas & Opções. Ou também pode usar esse atalho de teclado para alternar entre o código e a edição visual – Ctrl + Shift + Alt + M:
Tenha em mente que, no editor de código completo, você terá que contornar toda a marcação para blocos – por exemplo. <!-- wp:paragraph -->.
Como Editar HTML do WordPress no Editor Clássico (TinyMCE)
Se ainda estiver usando o editor clássico WordPress (TinyMCE), poderá editar o HTML de todo o artigo indo no separador Texto:
Como Editar o Código Fonte no Seu Tema WordPress
Falemos agora de um assunto mais importante, editar o código do seu tema WordPress. Aqui a coisa fica um pouco mais difícil, então precisamos de abordar algumas questões prévias antes de entrarmos no tutorial.
Porquê mais difícil? Bom, é porque você pode quebrar seu site se não fizer a coisa certa!
Em versões recentes, o WordPress tornou muito mais difícil a possibilidade de estragar tudo, mas editar o código-fonte do seu site abrirá sempre as portas para problemas, então deve fazê-lo com segurança.
Utilize um Tema Filho para Qualquer Edição de Código Direta
Se pretende editar diretamente qualquer código nos arquivos do seu tema, terá de usar um tema filho em vez de editar o tema “pai”.
Sem um tema filho, todas as alterações de código serão colocadas em vigor na próxima vez que atualizar o tema. Ao usar um tema filho, poderá atualizar imediatamente o tema pai sem perder as alterações feitas no tema filho.
Se quiser saber mais sobre as vantagens dos temas infantis, para além de como criar um, veja o nosso guia completo sobre temas infantis do WordPress.
Coloque a Possibilidade de Usar um Plugin em Vez de Editar o Código no Tema Filho
Se pretende alterar o funcionamento do seu tema, é provável que precise de editar diretamente o código-fonte do seu tema filho.
Contudo, se quiser editar o código no WordPress por outra razão – como, por exemplo, adicionar um script de monitoramento à seção <head> do seu site ou adicionar um trecho ao arquivo functions.php do seu tema – talvez seja melhor usar um plugin.
Por exemplo, o Head, Footer and Post Injections facilita a injeção de trechos de código quando necessário. E, como esses trechos de código são todos segregados na interface do plugin, fica também mais simples gerenciá-los no futuro.
Semelhantemente, se estiver adicionando um trecho de código que pode ser inserido no arquivo functions.php do tema filho, o plugin gratuito Code Snippets é uma excelente opção.
Resumindo, se quiser editar o código WordPress para adicionar trechos…
- À seção <head>
- Ao arquivo Functions.php
… então deve colocar a possibilidade de usar um plugin em vez de editar os arquivos do seu tema, já que isso tornará mais simples gerenciar esses trechos, garantindo que eles não sobrescritos quando você atualizar seu tema.
Se precisar de fazer outras edições, veja como editar o código-fonte do seu tema.
Utilize o Editor de Código do Painel WordPress
Se quer editar diretamente o código do seu tema, recomendamos fazer um backup do seu site antes (do site todo ou do arquivo que está editando).
Após fazer isso, pode entrar no editor de código de tema do painel, indo em Aparência → Editor de Temas. Aqui, o WordPress apresentará primeiro um aviso semelhante ao que você conheceu acima:
Depois poderá usar a barra lateral à direita para navegar entre os diferentes arquivos do tema e o também no próprio editor de código para fazer suas edições:
Utilizar SFTP para Editar Código no WordPress
Em alternativa ao editor de código do painel, também pode editar arquivos do tema com SFTP. Existem duas vantagens nesse método:
- Pode usar seu editor de código preferido.
- Se quebrar alguma coisa por acidente, pode corrigir o problema imediatamente. Por outro lado, se editar o código no painel WordPress, existe sempre uma possibilidade de quebrar algo que bloqueia o seu painel WordPress, o que obriga você a se conectar via SFTP para corrigir o problema (mas, repetimos, isso é menos provável devido às recentes alterações).
Veja como se conectar ao seu site via FTP.
Após fazer isso, entre na pasta do seu tema – …/wp-content/themes/child-theme-name. Encontre o arquivo que pretende editar e clique com o botão direito nele. A maioria dos programas de FTP oferece a você a opção de editar o arquivo e reenviará o arquivo automaticamente assim que fizer as alterações.
Contudo, recomendamos que você faça o download de uma versão original do arquivo para a sua área de trabalho antes de proceder a qualquer alteração. Assim poderá reenviar a versão original, se quebrar algo por acidente:
Como Adicionar CSS personalizado ao WordPress
Se pretende somente adicionar CSS personalizado ao WordPress, em vez de editar o código HTML ou PHP do WordPress, não precisa de usar o editor de código do painel ou métodos SFTP.
Em alternativa, pode usar o WordPress Customizer. Além de ser uma opção mais simples, essa abordagem também permite que você visualize suas alterações em tempo real.
Para começar, entre em Aparência → Personalizar no seu painel WordPress:
Depois procure a opção CSS Adicional no WordPress Customizer:
Isso abrirá um editor de código no qual pode adicionar seu CSS. À medida que adiciona CSS, a visualização em tempo real do seu site será automaticamente atualizada de acordo com as alterações:
Outra boa opção para adicionar CSS é o plugin Simple CSS criado por Tom Usborne. Oferece uma opção semelhante ao WordPress Customizer e permite também adicionar CSS personalizado a publicações ou páginas individuais através de uma caixa meta.
Por fim, se quiser adicionar muito CSS personalizado – centenas ou milhares de linhas – outra opção é criar sua própria folha de estilo CSS e usar o wp_enqueue_scripts para adicioná-la ao seu tema.
Resumo
Se pretende editar código de uma publicação ou página individual do WordPress, o novo editor de blocos e o editor clássico dão para você opções suficientes para editar diretamente o HTML.
Por outro lado, se quiser editar o código-fonte do seu tema WordPress, deve ter em consideração algumas coisas:
- Utilize sempre um tema filho em vez de fazer edições de código diretamente no tema pai.
- Coloque a hipótese de usar um plugin para gerenciar trechos que adiciona ao arquivo <head> ou php, já que esses plugins podem garantir uma abordagem mais simples e controlável.
Se ainda assim precisar fazer edições diretas de código após esses avisos, poderá editar o código-fonte do seu tema filho no painel WordPress, em Aparência → Editor de Temas. Ou pode se conectar ao seu site via SFTP e editar o código dessa maneira.
Por último, se quiser adicionar apenas CSS personalizado, não terá de editar diretamente o código do seu tema. Em vez disso, pode simplesmente usar a área CSS adicional no WordPress Customizer ou um plugin como o Simple CSS.
Tem alguma questão sobre como editar o código WordPress? Coloque sua pergunta nos comentários!
