Como Exibir Código em Posts do WordPress

Um dos problemas mais comuns que novos usuários do WordPress encontram é a exibição de código em posts. O problema ocorre quando um usuário tenta compartilhar um trecho de código em seus posts. Por padrão, o WordPress filtra o código e ele se torna impossível de ler. Neste artigo, mostrarei como exibir código em posts do WordPress.

Usando Entidades HTML para Exibir Código em Posts do WordPress

Entidades HTML são códigos especiais que são interpretados pelos navegadores para exibir o caractere associado a essa entidade específica. Por exemplo:

• & se torna &
• &lt; se torna <
• &gt; se torna >

Usando entidades HTML, você pode exibir código dentro de seus posts do WordPress.

<div class="awesome"> será exibido no navegador assim:

<div class="awesome">

Este método é particularmente útil se você quiser apenas exibir algumas linhas de código. No entanto, este método pode ser difícil de aplicar manualmente para várias linhas de código.

Para resolver este problema, você pode usar um codificador de Entidades HTML online, como este. Simplesmente insira o código que deseja converter e clique no botão codificar. Ele converterá seu código em entidades HTML e você poderá colar esse código com segurança dentro da tag <code></code>.

Usando um Plugin para Exibir Código em Posts do WordPress

Se você compartilha frequentemente trechos de código em suas postagens, então os métodos mencionados acima não funcionarão para você. A primeira coisa que você precisa fazer é instalar e ativar o plugin SyntaxHighlighter Evolved. Ele o livrará do incômodo de converter código em entidades HTML. Não só isso, ele realçará o código para exibi-lo em um formato muito mais legível.

Funciona de imediato, tudo o que você precisa fazer é envolver seu conteúdo com tags de idioma específicas. Por exemplo, se você estiver compartilhando um código que é principalmente em PHP, então você envolveria seu código assim:

[php]
<?php
function themelab_demo_code() {
$i = 1;
while ($i <= 10):
echo $i."<br />";
$i++;
endwhile;
}
themelab_demo_code();
?>
[/php]


Ele aparecerá em seu site, assim:

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

Para diferentes idiomas, existem diferentes aliases que você pode usar. Alguns dos aliases mais comumente usados são:

• Para exibir código HTML use [html] [/html]
• Para CSS use isto: [css][/css]
• Para MySQL use isto: [sql][/sql]
• Para Javascript use isto: [javascript][/javascript]

Espero que este artigo tenha ajudado você a exibir código em posts e páginas do WordPress.

Se você gostou deste artigo, então junte-se ao ThemeLab no Twitter e no Google+.