Ya hemos tratado varias veces este asunto de como incluir código en tus posts de modo que no se ejecute el código añadido pero, tras muchas pruebas y experimentos, por fin he dado con el método perfecto para hacerlo, y encima de un modo sencillo y sin fallos.

Para conseguirlo nos vamos a ayudar del plugin IG Syntax Hiliter el cual nos permitirá, con el uso de etiquetas, insertar todo tipo de códigos en nuestras entradas pero sin que se ejecuten; en su lugar se mostrarán de un modo visualmente muy atractivo, dentro de una caja de código y con la opción de mostrar el "texto plano" por si nuestro lector quiere copiar el código original. Perfecto.

Instalarlo es bien sencillo …

  1. Descarga el plugin original o la versión ya traducida al español por Ayuda WordPress
  2. Descomprime el zip y sube a la carpeta de plugins de WordPress (wp-content/plugins/) los archivos contenidos en el directorio "ig_syntax hiliter plugin". No esa carpeta sino los archivos y carpetas incluidos en la misma.
  3. Activa el plugin.
  4. Configura las opciones disponibles en tu panel de administración

Una vez activo el modo de uso es el siguiente

En el editor HTML de tu blog debes añadir las etiquetas del lenguaje de programación correspondiente de este modo:

[lenguaje]Aquí tu código[/lenguaje]

Donde LENGUAJE puede ser cualquier de los soportados.

La lista de los lenguajes soportados es la siguiente:

  • ActionScript
  • ASP
  • C
  • C++
  • C#
  • CSS
  • DELPHI
  • HTML
  • JAVA
  • JavaScript
  • MySQL
  • PERL
  • PHP
  • PYTHON
  • RUBY
  • SMARTY
  • SQL
  • Visual Basic
  • VB.NET
  • XM

Pero ahí no queda la cosa. También puedes añadir "quicktags" a tu editor para facilitarte la tarea de utilizarlo. En el fichero "MANUAL.html" que viene en el zip del plugin tienes el código que tienes que añadir y donde hacerlo (fichero 'quicktags.js' de tu instalación de WordPress)

Por supuesto, no tienes que pegar todos los bloques sino solo aquellos relativos a los botones que quieras que se muestren en tu editor HTML

  • Guardas el archivo y ya lo tienes. La siguiente vez que abras el Editor HTML tendrás mas QuickTags para insertar tu código. Nosotros tenemos estos …

  • Es muy fácil de usar, seguro que a partir de ahora ya puedes insertar código en tus posts como nosotros. Aquí tienes una muestra …

    PHP:
    1. // Cambia SECRET_KEY a una frase única.  No tendrás que recordarla después,
    2. // asi que hazla larga y complicada. Visita https://www.grc.com/passwords.htm
    3. // para crear  una clave larga, o pon la que quieras.
    4. define('SECRET_KEY', 'pon aqui tu frase unica'); // Cambia esto a una frase única.
    5.  
    6. // Puedes tener varias instalaciones en una sola base de datos si les das un prefijo único
    7. $table_prefix  = 'wp_';   // Solo numeros, letras y subrayado!
    8.  
    9. // Cambia esto para traducir WordPress.  Un fichero MO para el
    10. // idioma elegido debe instalarse en wp-content/languages.
    11. // Por ejemplo, instalad de.mo en wp-content/languages y establece WPLANG a 'de'
    12. // para tenerlo en aleman.
    13. define ('WPLANG', 'es_ES');
    14.  
    15. /* Eso es todo, deja de modificar cosas. Buen blogging. */
    16.  
    17. define('ABSPATH', dirname(__FILE__).'/');
    18. require_once(ABSPATH.'wp-settings.php');
    19. ?>

    (NOTA: por algún motivo que no alzanzo a descubrir, todos estos plugins se llevan mal con el editor visual, así que una vez insertes el código ya no regreses al editor visual porque se "borra" el código insertado entre las etiquetas)

    ¿Te gustó este post? ¡Compártelo!
    • Bitacoras.com
    • TwitThis
    • Facebook
    • Meneame
    • Google Bookmarks
    • del.icio.us
    • Live
    • Technorati
    • Ping.fm
    • Wikio
    • Turn this article into a PDF!
    • E-mail this story to a friend!
    • Print this article!

    También te puede interesar:

    cursos formación continua

      23 comentarios en “Como Añadir Código en tus Posts – La Solución Definitiva”

    1. Rafa (20 comentarios) dijo:

      Muy util para aquellos que quieran mostrar código sin tener que pelearse con el formato. Yo lo probaré aunque dudo que lo use ya que no suelo hablar de código en mi blog, pero lo que pueda pasar en el futuro quien lo sabe...

    2. Saji (2 comentarios) dijo:

      Me pasa solo a mi o no funciona el link para descargar el plugin traducido?

      Probaremos entonces el plugin original.

    3. G. Bigotes (1 comentarios) dijo:

      Está muy bueno el IG Syntax Hiliter, ya he visto que lo utilizan en muchos blogs. Yo particularmente prefiero usar el WP-Sintax que es muy similar ya que también usa GeSHI. En el caso de este plugin, no es necesaria la opción de "texto plano" ya que se puede copiar directamente en la vista normal.

    4. Fernando Tellado (2313 comentarios) dijo:

      No te pasa a ti solo, ahora cambio el link Saji, metí mal el enlace. sorry. Ya debe funcionar, al menos a mi si.

      G.Bigotes, yo usaba el WP-syntax pero metía espacios sobrantes en el código php y daba muchos errores a los lectores a la hora de copiar código. Este me parece mas completo y carece de errores (que yo haya comprobado) ;)

    5. Saji (2 comentarios) dijo:

      Muchas gracias. Probaremos a ver que tal está ;-)

    6. Casidiablo (3 comentarios) dijo:

      Ummm... sigo prefiriendo el que uso: SyntaxHighlither.

      Un saludo!

    7. Cristobal (12 comentarios) dijo:

      Tengo un problema extraño, lo vengo utilizando desde hace tiempo, antes de wp 2.5. Ahora no me deja modificar las opciones del plugin, me sale esto:

      No tienes NIVEL 8 o mas de USUARIO & así que no puedes configurar iG:Syntax Hiliter. Si tienes NIVEL 8 o mas de USUARIO, entonces Sal y vuelve a Entrar de nuevo.

      ¿Sabéis a qué se puede deber esto? En mi opción en inglés ya me ha salido, y ahora me sale en la de español.

      Gracias :-)

    8. Fernando Tellado (2313 comentarios) dijo:

      Eso te indica que tu usuario no tiene nivel de administrador del blog.

    9. juanguis (5 comentarios) dijo:

      Fernando, sería bueno que aclares en el post que tienen que publicar el post estando en HTML, no volver a la solapa de edición visual porque se caga todo d enuevo.
      Saludetes

    10. Cristobal (12 comentarios) dijo:

      Sí ya lo se, pero es que sólo me pasa con este plugin y de repente con wp2.5, ¿no será un bug?
      Gracias

      • El único problema que le encuentro a este plugin es que, al utilizarlo, nuestro blog no valida correctamente. Por lo demás, una solución sencilla y útil para quienes no quieran cansarse de escribir < y >.

    11. Fernando Tellado (2313 comentarios) dijo:

      Si que es verdad Juanguis. Todos estos plugins de meter código pecan de lo mismo, Si entras en el editor visual se pierde todo (para mi que es cosa del WP) ;)

      Ahora lo anoto :)

      @Cristobal, pues no se que decirte, yo lo tengo instalado (el plugin y WP 2.5) en varios blogs y no me da problemas. Luego miro a ver si tiene algun apaño ;)

    12. [...] Como Añadir Código en tus Posts - La Solución Definitiva. [Ayuda WordPress] [...]

    13. [...] para redimensionar imágenes en el editor visual de WP, o el hecho (descuajaringante) de que en el editor HTML  ejecuta el código en vez de mostrarlo, haciendo prácticamente imposible insertar código de [...]

    14. [...] Como Añadir Código en tus Posts - La Solución Definitiva [...]

    15. [...] Ayuda Wordpress Publicado en la categoría » Plugins, Wordpress Compártelo en: Twitter Menéame [...]

    16. guss (9 comentarios) dijo:

      Es compatitle con Wordpress 2.7?
      saludos!

    17. guss (9 comentarios) dijo:

      Ya lo instale, solo checare que tal se en mi blog, saludos!

    18. José Moreno (14 comentarios) dijo:

      Ví que en la entrada y en los comentarios se habla de un problema que tengo hace un tiempo que es que cuando estoy escribiendo una entrada y la guardo me corta una parte de esta y la publica incompleta. No pasa siempre pero si bastante seguido, puede ser que el problema lo cause algún plugin?

    19. [...] momento es el único método fiable. Existe un plugin, IG Syntax Hiliter, pero tiene el problema de no validar correctamente, por lo que desaconsejamos su [...]

    20. [...] lenguaje especifico (php) que Wordpress no permite, para ello se recomienda usar un plugin llamado IG Syntax Hiliter que cumple éste cometido, tuve problemas para instalarlo y encontré otra opción en [...]

    21. [...] descargable con la traduccion del plugin para tenerlo en castellano y le damos las gracias a Fernando que lo puso a disposicion de todos nosotros. Despues de comentar esto he de decir un par de [...]

    Escribe un Comentario

    XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



    Comentarios adicionales gracias BackType

    Subir

    Anúnciese aquí
    Expertos en WordPress
    Evolución Euribor
    Consigue 28 themes premium por menos de 14 euros
    Participa en el Debate
    • Macgrafic: @Jose esta aplicación es para el iPhone y Puedes gestionar tu blog de tu dominio o de...
    • fff:
    • Abundancia33: Actualicé en algunos blogs y si hay un problema, con esta versión desaparece el...
    • Hugo Alfaro: Wow!… esta utilidad me ha sido de gran utilidad… ideal para los sitios...
    • Jose: P.D. Enhorabuena por la web! Sois magnificos!
    Noticias Breves
  • BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.

    [#3]

  • Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.

    [#6]

  • ¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).

    [#26]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H