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

Uno de los problemas más comunes con los que se encuentran los nuevos usuarios de WordPress es la visualización de código en las entradas. El problema se produce cuando un usuario intenta compartir un fragmento de código en sus mensajes. Por defecto WordPress filtra el código y se vuelve imposible de leer. En este artículo, voy a mostrar cómo mostrar el código en los mensajes de WordPress.

Usando Entidades HTML para Mostrar Código en Entradas de WordPress

Las entidades HTML son código especial que es analizado por los navegadores para mostrar el carácter asociado con esa entidad en particular. Por ejemplo:

• & se convierte en &
• &lt; se convierte en <
• &gt; pasa a ser >

Usando entidades HTML puede mostrar código dentro de sus entradas de WordPress.

<div class="awesome"&gt; se mostrará en el navegador así:

<div class="awesome">

Este método es particularmente útil si sólo desea 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 utilizar un codificador de entidades HTML en línea, como éste. Simplemente pon el código que quieres convertir y pulsa el botón de codificar. Convertirá tu código en entidades HTML y podrás pegarlo con seguridad dentro de la etiqueta <code></code>.

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

Si compartes frecuentemente fragmentos de código en tus entradas, entonces los métodos mencionados anteriormente no van a funcionar para ti. Lo primero que tienes que hacer es instalar y activar el plugin SyntaxHighlighter Evolved. Le ahorrará la molestia de convertir el código en entidades HTML. No sólo eso, sino que resaltará el código para mostrarlo en un formato mucho más legible.

Funciona de inmediato, 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
función themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

Aparecerá en su sitio, así:

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

Para los diferentes idiomas hay diferentes alias que puede utilizar. Algunos de los alias más utilizados son:

• Para mostrar código HTML usa
• Para CSS use esto:
• Para MySQL utilice: .
• Para Javascript, utilice: .

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

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