Como um blog do WordPress voltado para a criação de sites, às vezes nos deparamos com leitores que querem colar um trecho de código ou compartilhar um código nos comentários.
No entanto, o WordPress não vem com nenhum destaque de sintaxe incorporado para comentários, posts ou páginas, o que pode ser complicado tanto para quem comenta quanto para outros leitores que tentam entender o código.
Felizmente, descobrimos uma maneira fácil de resolver esse problema. Neste artigo, mostraremos como adicionar facilmente o realce de sintaxe nos comentários do WordPress.
Por que e quando você precisa de realce de sintaxe nos comentários do WordPress?
O realce de sintaxe é uma forma de melhorar a aparência e facilitar a compreensão do código. Ele adiciona cores e números de linha aos trechos de código, tornando-os mais legíveis. Veja um exemplo:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Se você tem um blog no WordPress sobre desenvolvimento web ou codificação, é importante ativar o realce de sintaxe nos comentários do WordPress. Com isso, os leitores podem facilmente escrever códigos de forma legível.
Isso os incentivará a deixar mais comentários e compartilhar seus próprios trechos. Isso não apenas torna os comentários mais interessantes, mas também cria um senso de envolvimento da comunidade.
Além disso, se seus leitores precisarem de ajuda, eles poderão inserir facilmente o código no comentário de uma forma visualmente atraente e fácil de entender para seus colegas comentaristas.
Com isso em mente, vamos ver como você pode adicionar realce de sintaxe no formulário de comentários do seu site WordPress.
Etapa 1: Instale o plug-in Syntax Highlighter Evolved
A maneira mais fácil de adicionar realce de sintaxe no WordPress é com o plug-in Syntax Highlighter Evolved. Ele é muito fácil de usar e permite que você ative o realce de sintaxe em posts, páginas e comentários do WordPress.
No WPBeginner, usamos esse plug-in para inserir e exibir trechos de código. Você pode ler nosso artigo sobre por que usamos o Syntax Highlighter Evolved para obter mais detalhes.
Primeiro, você precisa instalar e ativar o plug-in Syntax Highlighter Evolved. Para obter mais informações, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Depois disso, agora você pode editar um post ou uma página e adicionar código usando o realçador de sintaxe. Esta é a aparência no editor de blocos:
Você pode saber mais sobre como usar o plug-in Syntax Highlighter Evolved em nosso artigo sobre como exibir código no WordPress.
Por padrão, o Syntax Highlighter Evolved permite que os visitantes adicionem código em seus comentários, mas esse código precisa ser agrupado em códigos de acesso.
Esses códigos de acesso têm o nome de todas as linguagens populares de programação e de script. Isso significa que o comentarista só precisa colocar seu código entre colchetes com o nome da linguagem.
Por exemplo, se você quisesse publicar um comentário contendo código PHP, usaria o seguinte:
Hi everyone. I need help with this PHP code: [php]
<?PHP
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]Da mesma forma, se você quisesse publicar algum código HTML como comentário, precisaria envolvê-lo no shortcode HTML:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Agora, o que torna isso complicado é que os usuários não sabem que podem realmente usar o realce de sintaxe com esses códigos de acesso. Portanto, você precisa informá-los por meio de uma mensagem de aviso.
Etapa 2: Adicionar um aviso de destaque de sintaxe no formulário de comentários
Para informar os comentaristas sobre o recurso de realce de sintaxe, você precisa adicionar uma mensagem de aviso acima do formulário de comentários, da seguinte forma:
Você pode fazer isso adicionando um trecho de código personalizado ao seu site do WordPress.
Se você está lendo este tutorial porque tem um blog de codificação, é provável que esteja bastante familiarizado com a codificação.
Mesmo assim, pode ser difícil para os usuários mais avançados manter o controle de todos os trechos de código. Se não forem gerenciados adequadamente, podem ocorrer alguns erros comuns do WordPress ou o site pode ser completamente danificado.
É por isso que recomendamos o uso do WPCode para inserir trechos de código personalizados. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem precisar editar nenhum arquivo principal do WordPress.
Observação: embora a versão gratuita do WPCode esteja disponível, recomendamos o uso da versão Pro do WPCode, pois ela lhe dá acesso à lógica condicional inteligente, acesso a uma biblioteca em nuvem de trechos de código e muito mais.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, vá até Code Snippets “ + Add Snippet.
Aqui, você verá todos os snippets prontos que podem ser adicionados ao seu site do WordPress.
Como queremos adicionar nosso próprio snippet, passe o mouse sobre “Add Your Custom Code (New Snippet)” e clique em “+ Add Custom Snippet”.
Para começar, insira um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet.
Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e escolha “PHP Snippet”.
Agora, basta colar o seguinte snippet no editor de código:
function wpbeginner_comment_text_before($arg) {
// Add a custom notice to inform users about using shortcodes for syntax highlighting
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, or </p>";
// Return the modified comment arguments
return $arg;
}
// Add the filter to apply the custom comment modification function
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Depois disso, abra o menu suspenso “Location” (Localização) e clique em “Run Everywhere” (Executar em todos os lugares).
Em seguida, você está pronto para rolar até a parte superior da tela e clicar no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).
Por fim, clique em “Save Snippet” para ativar o snippet.
Esse código simplesmente mostra um aviso acima do campo de comentários no formulário de comentários do WordPress. No entanto, você não verá esse texto enquanto estiver conectado à sua conta, portanto, será necessário abrir uma nova janela do navegador no modo de navegação anônima ou fazer logout da sua conta.
Se quiser ver se o shortcode realmente funciona, basta acessar seu site no modo anônimo, comentar em uma publicação de blog e usar o shortcode. Quando o comentário tiver sido moderado e aprovado, você verá algo parecido com isto:
Saiba mais maneiras de aumentar o envolvimento com os comentários
Adicionar o recurso de realce de sintaxe não é apenas a única maneira de aumentar o envolvimento com os comentários se você tiver um blog de desenvolvimento da Web.
Outra dica é adicionar gostos e desgostos aos seus comentários. Isso permite que seus leitores expressem facilmente suas opiniões sobre comentários específicos. Isso pode estimular discussões e destacar contribuições valiosas de sua comunidade.
Além disso, você pode notificar os usuários quando eles receberem respostas aos seus comentários. Isso garante que eles permaneçam engajados na conversa e que continuem voltando para mais.
Além disso, talvez você queira adicionar campos personalizados ao formulário de comentários. Isso pode ser feito se você quiser que os leitores forneçam informações específicas junto com os comentários, como a linguagem de programação que estão usando ou a versão de uma estrutura.
Aqui estão outras dicas que você pode implementar para aumentar o engajamento nos comentários:
- Como exibir os posts mais comentados no WordPress
- Como destacar ou enterrar comentários no WordPress
- Como redirecionar a atenção do usuário com o Comment Redirect
Esperamos que este artigo tenha ajudado você a adicionar realce de sintaxe nos comentários do WordPress. Talvez você também queira ver nosso guia sobre como adicionar vídeos e muito mais nos comentários do WordPress e nossas escolhas de especialistas para os melhores plug-ins de comentários do WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Thank you for demonstrating the possibility using a snippet. I already have quite a lot of plugins on the site that I need to run it and at the same time, since I have a technology blog, I wanted to allow users to highlight codes in comments. I use WP Code for other snippets that have an important role on the website, so the possibility to do this with a snippet is very useful. Thank you once again, I will save the snippet to my code library for other sites as well.
Yves
Last update 9 months ago. Non tested with last Wordpress version.
WPBeginner Support
For that not tested warning, we would recommend taking a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Administrador
Seth
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support
Glad our article was helpful
Administrador