Instalación de Plugin iG:Syntax Hiliter para WordPress

Para quienes nunca han instalado un plugin en WordPress, lo normal es que descargues el plugin, descomprimas en tu ordenador en un directorio cualquiera y después lo subes vía FTP al sitio, en el siguiente directorio "../wp-content/plugins/", para finalmente activarlo desde el panel de administración.

Ok, éso es lo que normalmente hacemos para instalar la mayoría de los plugins de wordpress, pero existen otros que son un poco más complicados, como el que a continuación voy a describir.

Plugin iG:Syntax Hiliter V 3.5.

Características.

• Sirve para que puedas mostrar código en tus post.
  
  Muestra el número de línea y además lo colorea.
  
  
• Tipos de código.
  
  • ActionScript
    
  • ASP
    
  • C
    
  • C++
    
  • C#
    
  • CSS
    
  • DELPHI
    
  • HTML
    
  • JAVA
    
  • JavaScript
    
  • MySQL
    
  • PERL
    
  • PHP
    
  • PYTHON
    
  • RUBY
    
  • SMARTY
    
  • SQL
    
  • Visual Basic
    
  • VB.NET
    
  • XML

Instalación:

• Descargar el plugin.
  
• Descomprimir el archivo iG_Syntax_Hiliter.zip
  
• Una vez que descomprimes el archivo, te generará la carpeta "iG-Syntax Hiliter".
  
  Dentro de la que encontrarás lo siguiente:
  
  
• La Carpeta llamada "ig_syntax hiliter plugin" (nótese que está con minúsculas) es la que hay que subir al sitio y colocarla en el directorio "../wp-content/plugins/".
  

Configuración:

• A continuación tienes que ir a tu panel de administración de WordPress y seleccionando la ceja "Opciones" te aparecerá la ceja "IG:Syntax Hiliter".

• Al seleccionar la ceja "IG:Syntax Hiliter" te aparecen las opciones a configurar:

1.- Show Plain Text Code Option:

Esta opción te sirve para elegir si muestras o no un botón "PLAIN TEXT".

2.- Show Plain Text Code In:


En caso de elegir (en la opción No. 1) que si muestre el botón "PLAIN TEXT", tienes la opción de que al presionarlo te muestre texto plano dentro de la misma ventana o en una ventana nueva (popup) como se vé en la siguiente imágen.

3.- Show Language Name:


Esta opción sirve para que muestre el tipo de lenguaje o no.

4.- Hilite Code in Comments:


Aquí eliges si quieres mostrar o no, código en los comentarios.

5.- Show Line Numbers:


Esta opción es para mostrar o no el número de línea.

6.- Show Fancy Line Numbers:


Aquí eliges si quieres mostrar el número de línea intercalando 2 colores, o de uno sólo para todas las líneas.

Los puntos 7 y 8 sirven para elegir el color del número de línea.

Bueno, ya casi estamos listos, pero todavía falta un paso muy importante.
Para hacernos la vida más fácil, el creador del plugin todavía nos tiene reservada una sorpresa más, y es como implementar los QuickTags.

Nota: Esto sólo funciona si tienes desactivado el editor visual, para desactivarlo es necesario ir a tu panel de administración de WordPress, al dar click en la ceja "Usuarios" te aparecerá la ceja "Perfil" y al dar click ahí, en la parte baja encontrarás la opción, si está activo, dá click en el recuadro "Utilizar el editor visual para escribir" y luego presiona el botón "Actualizar Perfil".

• Abrir el archivo quicktags.js, éste se encuentra en el directorio "wp-includes/js/" (lo puedes hacer con cualquier editor de texto como el Notepad).
  
• En la línea # 126 encontrarás lo siguiente:

Código :

edButtons[edButtons.length] = 
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

• En seguida agrega el siguiente código:

Código :

//----- Start iG:Syntax Hiliter Plugin's Quick Tags -----
edButtons[edButtons.length] =
new edButton('ed_shAS'
,'ActionScript'
,'[as]'
,'[/as]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shASP'
,'ASP'
,'[asp]'
,'[/asp]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shC'
,'C'
,'[c]'
,'[/c]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shCPP'
,'C++'
,'[cpp]'
,'[/cpp]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shCSHARP'
,'C#'
,'[csharp]'
,'[/csharp]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shCSS'
,'CSS'
,'[css]'
,'[/css]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shDELPHI'
,'DELPHI'
,'[delphi]'
,'[/delphi]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shHTML'
,'HTML'
,'[html]'
,'[/html]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shJAVA'
,'JAVA'
,'[java]'
,'[/java]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shJS'
,'JavaScript'
,'[js]'
,'[/js]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shMySQL'
,'MySQL'
,'[mysql]'
,'[/mysql]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shPERL'
,'PERL'
,'[perl]'
,'[/perl]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shPHP'
,'PHP'
,'[php]'
,'[/php]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shPYTHON'
,'PYTHON'
,'[python]'
,'[/python]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shRuby'
,'RUBY'
,'[ruby]'
,'[/ruby]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shSMARTY'
,'SMARTY'
,'[smarty]'
,'[/smarty]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shSQL'
,'SQL'
,'[sql]'
,'[/sql]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shVB'
,'Visual Basic'
,'[vb]'
,'[/vb]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shVBNET'
,'VB.NET'
,'[vbnet]'
,'[/vbnet]'
,''
);

edButtons[edButtons.length] =
new edButton('ed_shXML'
,'XML'
,'[xml]'
,'[/xml]'
,''
);
//----- End iG:Syntax Hiliter Plugin's Quick Tags -----

• Guarda el archivo y súbelo de nuevo al sitio.

Eso es todo, ahora ya tienes 20 nuevos botones en tu editor con éstos nombres:
ActionScript, ASP, C, C++, C#, CSS, DELPHI, HTML, JAVA, JavaScript, MySQL, PERL, PHP, PYTHON, RUBY, SMARTY, SQL, Visual Basic, VB.NET y XML que te generarán sus respectivas etiquetas.

En mi caso sólo puse 9 como puedes ver en la imágen.


También puedes aprovechar para incluir otros como < kbd > < /kbd > que no vienen por default, el código a agregar sería el siguiente:

Código :

edButtons[edButtons.length] = 
new edButton('ed_kbd'
,'kbd'
,'<kbd>'
,'</kbd>'
,'kbd'
);

[ descargar ] [ ir al sitio de su creador ]

Temas relacionados:
Agregando Quicktags para ayudar a hacer post semánticos.

 

Tweet