Insertar código en las entradas WordPress

Escrito por Jose M Ramirez en . Publicado en Desarrollo Web

Insertar código en las entradas WordPress

Desde que uso wordpress he buscado incesantemente una forma efectiva insertar código en las entradas sin que este sea interpretado por el cms después de su publicación. Fue una tarea difícil ya que todos los plugins que probaba no funcionaban de forma óptima, había que retocarlos y ajustarlos a cada a actualización de wordpress, lo que hacía que fuera poco práctico hasta para los desarrolladores más experimentados.

Cuando tienes un sitio de desarrollo web o programación es necesario que de vez en cuando compartas código, bien sea “html, php o simplemente css.” El problema empieza cuando quieres que este se muestre como tal y que wordpress no lo interprete ya que esa es su función (interpretar el código de las entradas). !Allí empezó mi procesión por la búsqueda del plugins definitivo para insertar líneas de códigos en las entradas de wordpress.!

La solución se trata de SyntaxHighlighter, un excelente plugins que hace todo el trabajo duro por ti, perfectamente personalizable y actualizado a las últimas versiones de wordpress. Aunque este también funciona en base a etiquetas shortcode, es muy sencillo usarlo y a continuación explicare como incluir código y los lenguajes que soporta.

Lo primero que debemos hacer es descargar el plugins del repositorio oficial de wordpress en el apartado del plugin: SyntaxHighlighter

Luego instalas y activas como lo hacemos con todos sin necesidad de editar plantilla o agregados avanzados.

Nota: Si no sabes cómo instalar un plugins puedes visitar mi guía de instalación de plugins wordpress.

Luego puedes acceder a las opciones de configuración del plugins para personalizar la forma como se muestra el código en tus entradas. Puedes escoger la versión del plugins, color del theme, mostrar o no números en las líneas de código, enlaces con vínculos, resaltar el código en un documento de texto para que pueda ser copiado más fácilmente y hasta incluir tu propio css si así lo deseas entre otras cosas.

“Si no quieres complicarte solo déjalo como muestro en la imagen y serás un blogger muy feliz.”

Configuracion SyntaxHighlighter

Para incluir el código en tus entradas solo debe cerrar y abrir con corchete ‘[]’ y cerrar de la misma forma [/] más la barra, incluyendo dentro el lenguaje que estas colocando.

Insertar Codigo

El resultado sería este en tus entradas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de YoGeekOnline.com</title>
</head>

<body><a href="http://yogeekonline.com">Enlace></a>
</body>
</html>

.

Etiquetas:, ,

Trackback desde tu sitio.

Comentarios (3)

  • Calevano

    |

    Hola yogeekonline tu post me sirvio de mucho… actualmente estoy posteando algo de programacion asi que buscandi un plugin para mi theme en wordpress me encontre con el tuyo…gracias Cuidate mucho y Exitos

    Responder

  • Claudia

    |

    Hola disculpa este plugin tmbn sirve para javascript ???
    muy buen post!! 🙂

    Responder

    • Jose M Ramirez

      |

      Gracias Claudia. Si sirve, el plugins muestra cualquier codigo sin interpretarlo. Saludos.

      Responder

Dejar un Comentario

Sigueme en Twitter

Twitter

Suscribete al Feed

RSS-Feed

Enlaces

TecnoBinario

Red de Blogs

Red de Blogs iBlogLabs