Cómo mostrar código en las publicaciones de WordPress

Uno de los problemas más comunes que encuentran los nuevos usuarios de WordPress es mostrar código en las publicaciones. El problema ocurre cuando un usuario intenta compartir un fragmento de código en sus publicaciones. Por defecto, WordPress filtra el código y se vuelve imposible de leer. En este artículo, te mostraré cómo mostrar código en las publicaciones de WordPress.

Usar entidades HTML para mostrar código en publicaciones de WordPress

Las entidades HTML son códigos especiales que los navegadores interpretan para mostrar el carácter asociado con esa entidad en particular. Por ejemplo:

• & se convierte en &
• &lt; se convierte en <
• &gt; se convierte en >

Usando entidades HTML puedes mostrar código dentro de tus publicaciones de WordPress.

<div class="awesome"> se mostrará en el navegador de esta manera:

<div class="awesome">

Este método es particularmente útil si solo quieres mostrar un par de líneas de código. Sin embargo, este método puede ser difícil de aplicar manualmente para múltiples líneas de código.

Para resolver este problema puedes usar un codificador de entidades HTML en línea, como este. Simplemente ingresa el código que deseas convertir y presiona el botón de codificar. Convertirá tu código en entidades HTML y podrás pegar ese código de forma segura dentro de la etiqueta <code></code>.

Usar un plugin para mostrar código en publicaciones de WordPress

Si compartes frecuentemente fragmentos de código en tus publicaciones, entonces los métodos mencionados anteriormente no te servirán. Lo primero que debes hacer es instalar y activar el plugin SyntaxHighlighter Evolved. Te ahorrará la molestia de convertir código en entidades HTML. No solo eso, sino que resaltará el código para mostrarlo en un formato mucho más legible.

Funciona directamente, todo lo que necesitas hacer es envolver tu contenido con etiquetas de lenguaje específicas. Por ejemplo, si estás compartiendo un código que está principalmente en PHP, entonces envolverías tu código así:

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


Aparecerá en tu sitio, así:

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

Para diferentes lenguajes existen diferentes alias que puedes usar. Algunos de los alias más comúnmente usados son:

• Para mostrar código HTML usa [html] [/html]
• Para CSS usa esto: [css][/css]
• Para MySQL usa esto: [sql][/sql]
• Para Javascript usa esto: [javascript][/javascript]

Espero que este artículo te haya ayudado a mostrar código en las publicaciones y páginas de WordPress.

Si te gustó este artículo, únete a ThemeLab en Twitter y Google+.