Como Añadir Código en tus Posts

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

Para poner código en WordPress tenemos el siguiente plugin: SyntaxHighlighter Evolved. También hemos instalado la extensión para PHP5.

Cómo poner código PHP con SyntaxHighlighter Evolved:

Nos situamos en el editor en HTML (no en Visual) y escribimos el código PHP entre las etiquetas php y /php ambas entre corchetes [etiqueta]:

[php] [/php]

Cómo poner código HTML con SyntaxHighlighter Evolved:

Nos situamos en el editor en HTML (no en Visual) y escribimos el código HTML entre las etiquetas html y /html ambas entre corchetes [etiqueta]:

[html]

PHP Code Example

PHP Code Example

 

This line is highlighted.

This is an
example of smart
tabs.

WordPress
[/html]

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 …

01 // Cambia SECRET_KEY a una frase única.  No tendrás que recordarla después,
02 // asi que hazla larga y complicada. Visita https://www.grc.com/passwords.htm
03 // para crear  una clave larga, o pon la que quieras.
04 define('SECRET_KEY', 'pon aqui tu frase unica'); // Cambia esto a una frase única.
05
06 // Puedes tener varias instalaciones en una sola base de datos si les das un prefijo único
07 $table_prefix  = 'wp_';   // Solo numeros, letras y subrayado!
08
09 // 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)

Fuente ayudawp.com

Comments

comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *