Tiempo de lectura aprox: 3 minutos, 57 segundos
Cómo escribir código en WordPress.
Uno de los retos constantes para los que escribimos bitácoras con ciertos conocimientos técnicos, es cómo escribir las secuencias de código, de forma que no sean mal interpretadas por el servidor ni por el navegador del usuario.
Por defecto, la forma en que un trozo de código escrito o «pegado» en una entrada se interpreta, depende de cómo estemos usando el editor de entradas, en formato «html» o «visual».
Cómo escribir código en WordPress
El editor «visual» considera el código como texto plano ordinario y, convierte (codifica) los caracteres < y > como las entidades html correspondientes, por lo que el código no es interpretado ni por el servidor ni por el navegador.
Los paréntesis curvos y cuadrados también son interpretados por defecto y además, el WordPress interpreta (por medio de los filtros), varios otros caracteres de forma que se adapte el texto dependiendo de las características del idioma local.
El editor «HTML» por su parte, no hace ninguna de estas interpretaciones ni conversiones, por lo que los trozos de código html y CSS pueden ser interpretados por el navegador del cliente y puede producirse una mezcla de código y una presentación completamente desordenada de las páginas.
Ten en cuenta que este comportamiento puede variar con respecto a la versión de WordPress, el editor usado o los plugin que tengas instalados.
Pero también ten en cuenta que la aparición del editor de bloques «Gutenberg» en la versión 5.0, de alguna forma agravó el problema al desaparecer la edición «visual» o «html» que se consideran partes del «editor clásico».
Código entre párrafos
En lenguaje html, la etiqueta <code> es indicativo de que a continuación y hasta que se encuentre el final marcado con la etiqueta </code>, los caracteres no deben interpretarse.
Anteriormente se usaba también la etiqueta <tt> que indicaba texto de teletipo, que hoy está obsoleta en HTML5.
En WordPress se ha mantenido la misma convención que en html y, l presencia de esa etiqueta hace que el texto aparezca con fuente monospace
Por ejemplo, en un párrafo puedes escribir:
Esto es un ejemplo de cómo poner código dentro de un párrafo, nombrando las funcioneswp_title(),wp_content()ywp_footer(), que son de uso muy común en WordPress.
Esto está muy bien para elementos de texto no-html que quieres que aparezcan como código, pero ¿qué pasa si quieres escribir etiquetas html que quieres realmente mostrar?
Busca la sección del archivo «header.php» que pone: <code><div class="header"></code> y cámbiala por el encabezado <code><h1></code>.
Usar la etiqueta <code> no indica a WordPress que encapsule el marcado HTML o lo elimine de la entrada. WordPress piensa que estás usando esa etiqueta para dar formato y la deja intacta luego, el navegador ve la etiqueta <code> seguida de <div> y responde creando un nuevo elemento del DOM en tu página web.
Para evitar estos conflictos, usa lo más posible entidades o caracteres extendidos para representar los corchetes y ángulos, de forma que no sean reconocidos como principio o final de una etiqueta HTML. Por ejemplo:
Busca la sección del archivo «header.php» que pone: & lt;code& gt;& lt;div class="header"& gt;& lt;/code> y cámbiala por el encabezado & lt;code& gt;& lt;h1& gt;& lt;/code>.
Recuerda eliminar el espacio entre el & y el nombre de la entidad.
Para ver una lista de los caracteres y sus entidades equivalentes, mira la página del consorcio en : html entities.
URLs entre párrafos
Por defecto, WordPress querrá cambiar cualquier frase que empiece con http en un enlace.
Si estás escribiendo un ejemplo de cómo crear un enlace dentro de una entrada, en lugar de escribir http://example.com/index.php?p=453 que será convertido a un enlace, utiliza entidades para las barras, de forma que quede algo parecido a:
… esto es un enlace a una página de WordPress sin usar los «permalink»: http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453
Recuerda eliminar el espacio entre el & y amp;.
Usando la etiqueta <pre>
Si quieres resaltar tu código en un recuadro para separarlo del resto del texto, o un trozo de código que quieres copiar desde un archivo fuente, en tu bitácora, puedes hacer uso de la etiqueta <pre>.
La etiqueta <pre> en WordPress tiene el mismo significado y efectos que la etiqueta <pre> en HTML.
«<pre>» instruye al navegador para que use la letra de fuente «monospaced», y que presente la información exactamente como le llega.
Cada salto de línea, cada espacio, cada código, es representado exactamente como está escrito.
Normalmente la diferencia con la etiqueta «<code>» es que esa se usa para código en una solo línea, mientras que «<pre>» se usa para varias líneas.
Ten en cuenta que cuando digo que es exactamente, quiero decir «exactamente», así que si los renglones con espacio son demasiado largos, no se representará, la caja deberá tener un desplazamiento horizontal para poder leer el texto, porque si no cabe, no cabe.
No resulta muy bonito ¿cierto? Pues la solución es truncar las líneas con el editor; ¡ah! que eso hace que el código no funcione cuando lo copias … tú decides, es un compromiso.
Para poder hacer que se ejerza control sobre la longitud de las líneas representadas, así como la fuente, el tamaño y demás aspectos, deberás instalar un plugin.
Si estás familiarizado con el lenguaje de programación que manejas, quizá puedas determinar cuando o cómo hacer saltos de línea.
En un próximo artículo revisaré los mejores plugin para presentar código.
Depurando el código
Escribir código en una bitácora de WordPress puede llegar a ser un reto, quizá llegues a necesitar cambiar parámetros internos de WordPress y usar filtros para poder «arreglar» los fallos de presentación.
Las comillas
Un problema frecuente cuando se inserta código en una entrada, es la «corrección» que realiza WordPress de las comillas.
Esta corrección se realiza inmediatamente, cuando se presenta una página, WordPress traduce «sobre la marcha» y si miras el texto en tu entrada aparece lo que inicialmente has puesto, pero no es lo que se muestra, no es lo que ve quien visita tu sitio.
Y esa corrección puede ser desesperante en algunos casos. Te recomiendo que leas: Las comillas españolas y cómo eliminarlas, dónde explico más sobre este caso.
Otra solución temporal (pues afecta sólo a lo que escribes en el momento) es reemplazar las comillas con sus entidades:
<p class=& #34;red& #34;> <!-- recuerda eliminar el espacio entre & y #
Recuerda que si pasas del modo «HTML» al «visual», las entidades se habrán convertido a caracteres, con lo que perderás parte del trabajo.
Recuerda que el editor «Gutenberg» tiene un tratamiento especial, quizá te interesa repasar cómo usar el bloque clásico en Gutenberg.
Mientras tanto, #QuédateEnCasa, juega, experimenta y, sobre todo, ¡divertirte!
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!