Você deve ter visto trechos de código em diferentes posts do blog WPBeginner que criamos para ajudar nossos leitores a resolver problemas. No entanto, exibir esse código não é simples.
Isso ocorre porque, se você tentar adicionar código como texto normal, o WordPress não o exibirá corretamente. O WordPress processa seu conteúdo através de vários filtros de limpeza toda vez que você salva uma postagem. Esses filtros existem para garantir que ninguém injete código através de um editor de postagens para hackear seu site.
Neste artigo, mostraremos as maneiras corretas de exibir código facilmente em seu site WordPress. Mostraremos diferentes métodos, e você pode escolher aquele que melhor atende às suas necessidades.
Por Que Exibir Código em um Site WordPress?
Se você está escrevendo posts de blog sobre tópicos técnicos ou criando documentação para seus produtos, mostrar trechos de código é realmente útil. Seus usuários podem simplesmente copiar o trecho de código e adicioná-lo ao site deles.
No entanto, exibir código em um site WordPress não é tão simples.
O WordPress interpretará os trechos como código funcional e tentará implementá-lo em seu site em vez de exibi-lo como texto. Ele também não mostraria o código com precisão, o que levaria a erros quando os usuários os inserissem em seus sites.
Além disso, o WordPress usa vários filtros como medidas de segurança. Ele filtra o conteúdo para impedir que hackers injetem código malicioso no editor de conteúdo e invadam seu site.
Dito isso, existem diferentes maneiras de exibir código no WordPress. Você pode clicar nos links abaixo para pular para a seção de sua preferência:
Método 1. Exibir Código Usando o Editor Padrão no WordPress
Este método é recomendado para iniciantes e usuários que não precisam exibir código com muita frequência.
Simplesmente edite a postagem ou página onde você deseja exibir o código. Na tela do editor de conteúdo do WordPress, adicione um novo bloco de Código à sua postagem.
Agora você pode inserir o trecho de código na área de texto do bloco.
O bloco de código mostrará uma prévia do seu código.
Depois disso, você pode salvar sua postagem e visualizá-la para ver o bloco de código em ação.
Assim que estiver satisfeito com a aparência do seu código, prossiga e publique sua postagem.
Dependendo do seu tema do WordPress, o bloco de código pode ter uma aparência diferente em seu site.
Método 2. Exibir Código no WordPress Usando um Plugin
Para este método, usaremos um plugin do WordPress para exibir código em suas postagens. Este método é recomendado para usuários que exibem código com frequência em seus artigos.
Ele oferece as seguintes vantagens em relação ao bloco de código padrão:
- Ele permite que você exiba facilmente qualquer código em qualquer linguagem de programação.
- Ele exibe o código com realce de sintaxe e números de linha.
- Seus usuários podem estudar e copiar o código facilmente.
Primeiro, você precisa instalar e ativar o plugin SyntaxHighlighter Evolved. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você pode prosseguir e editar a postagem do blog onde deseja exibir o código. Na tela de edição da postagem, adicione o bloco 'SyntaxHighlighter Code' à sua postagem.
Agora você verá um novo bloco de código no editor de postagem onde pode inserir seu código.
Após adicionar o código, você precisa selecionar as configurações do bloco na coluna da direita.
Primeiro, você precisa selecionar o idioma do seu código, como PHP, CSS, Java, etc. Depois disso, você pode desativar os números de linha, fornecer o número da primeira linha, destacar qualquer linha que desejar e desativar o recurso para tornar os links clicáveis.
Quando terminar, salve sua postagem e clique no botão de visualização para vê-la em ação.
O plugin vem com vários esquemas de cores e temas.
Para alterar o tema de cores, você precisa visitar a página Configurações » SyntaxHighlighter.
Na página de configurações, você pode selecionar um tema de cores e alterar as configurações do SyntaxHighlighter.
Você pode salvar suas configurações para ver uma prévia do bloco de código na parte inferior da página.
Usando SyntaxHighlighter com o Editor Clássico
Se você ainda estiver usando o antigo editor clássico do WordPress, veja como você usaria o plugin SyntaxHighlighter para adicionar código às suas postagens de blog do WordPress.
Simplesmente envolva seu código entre colchetes com o nome do idioma. Por exemplo, se você for adicionar código PHP, fará assim:
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
Da mesma forma, se você quiser adicionar um código HTML, você o envolverá com o shortcode HTML assim:
<a href="example.com">A sample link</a>
Método 3. Exibir Código no WordPress Manualmente (Sem Plugin ou Bloco)
Este método é para usuários avançados porque requer mais trabalho e nem sempre funciona como pretendido.
É adequado para usuários que ainda estão usando o antigo Editor Clássico e desejam exibir código sem usar um plugin.
Primeiro, você precisa passar seu código por uma ferramenta online de codificador de entidades HTML. Isso mudará a marcação do seu código para entidades HTML, o que permitirá que você adicione o código e contorne os filtros de limpeza do WordPress.
Agora copie e cole seu código no editor de texto e envolva-o com as tags <pre> e <code>.
Seu código ficaria assim:
<pre><code>
<p><a href="/home.html">Este é um link de exemplo</a></p>
</pre></code>
Agora você pode salvar sua postagem e visualizar o código em ação.
Seu navegador converterá as entidades HTML, e os usuários poderão ver e copiar o código correto.
Esperamos que este artigo tenha ajudado você a aprender como exibir facilmente código em seu site WordPress. Você também pode querer ver nosso guia sobre como permitir PHP em posts e páginas do WordPress e nossa seleção especializada das melhores ferramentas de desenvolvimento WordPress.
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.
Olaf
Como desenvolvedor PHP, tenho um pequeno blog onde ocasionalmente posto várias técnicas e fluxos de trabalho para programação em PHP, além de compartilhar meus próprios snippets. É ótimo que o WordPress permita nativamente a exibição de código. No entanto, eu pessoalmente uso um plugin, pois às vezes preciso que o código mostre que é em CSS, outras vezes em PHP e muito raramente em JavaScript. É benéfico quando o código está bem formatado e, idealmente, com cores codificadas por função, etc. Também é útil considerar uma função de cópia para que os usuários possam copiar facilmente o snippet de código inteiro para a área de transferência. É por isso que prefiro um plugin ao editor de blocos.
Dennis Muthomi
Acho que o plugin é ótimo para o que faz, mas...
um recurso que eu adoraria ver adicionado é um botão de cópia.
Atualmente, os usuários precisam destacar e copiar manualmente o bloco de código completo, o que pode ser tedioso, especialmente para trechos mais longos.
Uma opção de copiar com um único clique melhoraria tremendamente a experiência do usuário.
Dessa forma, os leitores poderiam obter o código facilmente sem acidentalmente perder nenhuma parte dele ao destacar o código.
WPBeginner Support
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Existe a possibilidade de ter um botão de copiar código no plugin para que o usuário não precise copiar o código para a área de transferência manualmente?
WPBeginner Support
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Obrigado pela resposta. É uma pena, pois facilita muito o trabalho. Às vezes acontece de até os números de linha serem copiados para o código usando o método manual. O Elementor tem um widget para o código que tem o botão de copiar e é ótimo. Seguirei a atualização do artigo, se necessário.
Sra. Gray
Olá,
O código pode ser inserido em páginas adicionadas por plugins de terceiros, como o Woocommerce?
WPBeginner Support
Sim, você poderá inserir código nessas páginas.
Admin
Ravish
Olá, antes de mais nada, obrigado por este blog.
Quero adicionar códigos para qualquer problema em diferentes linguagens (por exemplo, Python e C++). Como podemos fazer isso?
WPBeginner Support
Este plugin ainda deve funcionar para essas linguagens também
Admin
Nimesh
Isso é ótimo.
Se não fosse por isso, eu teria usado um plugin separado para trechos de código de entrada.
Eu ainda estou usando o editor clássico do WordPress e adicionarei os trechos de código às minhas postagens conforme mencionado aqui.
Obrigado por este compartilhamento incrível!
WPBeginner Support
Glad our guide was able to help
Admin
Induwara
Obrigado,
Este artigo é muito útil. Instalei o plugin e ele funciona bem. Há um problema com o meu tema que, quando coloco um código do editor de blocos, o tema o exibe com a cor de fundo, então é impossível ver o código. Sou um grande fã do WpBegginer!
WPBeginner Support
Ficamos felizes que nosso guia foi útil, você deve entrar em contato com o suporte do seu tema para obter assistência com esse problema.
Admin
Manju
Você pode sugerir uma maneira de exibir o código de um repositório do Github em postagens do WordPress?
WPBeginner Support
Você poderia inserir o código como fizemos neste artigo e anotar abaixo de onde ele veio do Github. Pode haver opções de plugins também para incorporar o código diretamente
Admin
Kunal Mandalia
Obrigado pela dica sobre as tags de "código" – funcionou perfeitamente.
WPBeginner Support
You’re welcome
Admin
Mahesh
Boa. Obrigado pela dica.
WPBeginner Support
Thank you and you’re welcome
Admin
perveen
precisamos de codificação no wordpress, pensei que não precisaríamos de codificação no wordpress.
WPBeginner Support
Não é obrigatório, mas para sites que desejam mostrar código aos seus usuários, estes são alguns métodos que eles podem usar.
Admin
Adamu Malte
Obrigado @Syed pelo seu ótimo tutorial.
manasa
Bom blog com excelente informação. Obrigado, continue compartilhando.
Anh
Ótimo, só queria saber como você pode postar o código dentro
1-click Use in WordPress
e ainda fazer o código parecer texto.
Como você pode postar este código
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
em seu post sem alterar como ele aparece no post.
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Plugin Synatx Highlighter Evolved
Ahmed
Obrigado Syed…. Ótimo tutorial. Quero perguntar como podemos mudar o tamanho da fonte do código?
Dave Mackey
Acho que há um problema com o Syntax Highlighter Evolved nas versões mais recentes do WordPress. Eu, e outros, estamos tendo problemas para exibir corretamente as entidades html. Veja os fóruns de suporte para mais informações.
Md Abul Bashar
Como mostrar código sem plugin, apenas codificando?
John D
Pessoalmente, eu uso WP-GeSHi-Highlight, que usa os códigos GeSHi padrão. Acho que usei um predecessor do plugin apresentado aqui, mas tive dificuldade em encontrar os códigos de linguagem.
Ajay
Ultimamente, tenho achado mais fácil usar GISTs para exibir código e depois apenas incorporar o Gist na postagem.
Mikhail S.
@AJAY, por favor, me diga mais sobre como usar GIST para exibir exemplos de código.
Obrigado!
Thomas A. Reinert
Concordo totalmente. Eles são bem formatados e com destaque de sintaxe, são forkable e também versionáveis. Então, WP GIST é o caminho a seguir para mim, pelo menos.