Este es el blog personal de Roberto Ross (Rab Ross), puedes seguirme en TwitterPoner codigo en los post de WordPress (Guía definitiva) (1.498 Lecturas)
Aveces queremos poner código en nuestro blog para que otros puedan sacar provecho de lo que (a algunos) hemos conseguido o descubierto para personalizar nuestros blog a base de esfuerzo.
Escribo esto, porque tuve que indagar en varios sitios para encontrar la información que me permitiera hacer mis tutoriales para poner comentarios anidados en wordpress y luego darles estilo.
Lo que te voy a explicar trata de hacerlo sin plugin, ya que considero (porque lo he ledio en blogs de gente que sabe de esto) que cuanto más plugins, mas se ralentiza el blog.
Si tu te dedicas a poner código (y mucho) en la mayoría de tus post, entonces si que te recomiendo que utilices algún plugin para poner código en wordpress. Puedes ver algunos en carlosleopoldo.
Pero si solo lo usas alguna vez, o para poner muy poco código, te recomiendo que lo hagas de esta manera (anieto2k no usa plugin por ejemplo, y el 80% de sus post van con código).
Lo primero te cuento como se estructura:
<pre><code><?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?></code></pre>Esto es lo que tu tendrás que escribir para mostrar el código, cambiandolo por el código que quieras mostrar claro.
¿Como vamos a lograrlo?, pues en unos sencillo pasos que te explico ahora. No pierdas detalle!!
Estilo CSS de PRE y CODE
Esto es importante y necesario que lo hagas, de no hacerlo te descuadrara la página si el código es muy largo.
Abre tu archivo style.css y añade algo asi:
pre {
background-color:#FFFFFF;
border-left:2px solid #000000;
color:#000000;
font-family:’Courier New’,Courier,monospace;
margin-top:10px;
overflow:auto;
padding:10px 2px 10px 10px;
}
code {
color: #000000
}Puedes cambiar los colores, el tipo de fuente… pero NUNCA quites overflow: auto; es la propiedad que te mantendrá en orden el codigo.
Solucionar problema con las comillas en WordPress
WordPress formatea ciertos caracteres, como las comillas, deberás cambiar esto si quieres que tu código funcione siempre cuando lo copien.
- Respaldamos el fichero formatting.php de la carpeta wp-include/ de nuestro instalación de WordPress.
- Abrimos el fichero formatting.php
- Buscamos la línea siguiente:
$dynamic_replacements = array('’$1','$1‘', '$1″', '$1′', '$1’$2', '$1“$2', '”$1', '’$1', '$1×$2');- Y la cambiamos por:
$dynamic_replacements = array(''$1','$1'', '$1″', '$1′', '$1'$2', '$1“$2', '”$1', ''$1', '$1×$2');Listo, seguimos adelante.
Convertir el código a HTML
Tenemos que convertir el código a caracteres para que no se ejecute si lo escribimos tal cual, nada más fácil que ir a este Conversor de Texto a HTMl e introducir el texto a convertir, y en el recuadro de abajo tundras el texto listo para insertar.
Escribir el Código en un post
Pon el editor en HTML y no lo cambie después a vista normal (por si acaso te cambia caracteres)
Utiliza el texto recién convertido metiendolo dentro de las etiquetas: <pre><code>texto convertido</code></pre>.
En un ejemplo esto es lo que tendrías que ver tu:
<pre><code><?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?></code></pre>Pues con todo esto ya estas listo para empezar a meter código en tu blog!! Comparte con el mundo todo lo que has aprendido!!
