La forma más segura de publicar código en WordPress es usar el bloque Código, no pegarlo dentro de un párrafo normal. Así se conservan los espacios, los saltos de línea y los caracteres especiales sin que el editor intente interpretar el fragmento como HTML.
El artículo original hablaba de WordPress 4 y recomendaba Simple Code Highlighter, un plugin que ya no debe ser la base de una instalación nueva. La situación ha cambiado: el editor de bloques incluye su propio bloque para mostrar código y el directorio oficial ofrece extensiones actuales para añadir resaltado de sintaxis, números de línea o un botón de copia.
<, > y & cuando escribas código dentro del HTML del post.Desde el editor de bloques puedes abrir el insertador con el botón +, buscar Código y añadirlo en el punto que quieras. También puedes escribir /code en una línea nueva. El bloque mantiene el espaciado y los tabuladores del fragmento, algo que un párrafo normal no hace de forma fiable.
La documentación oficial de Code block de WordPress permite cambiar el color del texto y del fondo, la tipografía, el tamaño, el borde y el espaciado. En la documentación del bloque core/code se define como un bloque estático: el contenido se guarda dentro del post y se muestra como código, no como una instrucción que el navegador deba ejecutar.
Ese último matiz es importante. Si pegas <script>, una función PHP o una consulta SQL dentro de un bloque Código, WordPress la enseñará como texto. No se ejecutará por el simple hecho de aparecer en el artículo. Para insertar un ejemplo HTML que el navegador sí deba renderizar necesitas otro bloque y debes valorar con cuidado el riesgo de permitir HTML personalizado.
Abre el post, coloca el cursor donde quieras mostrar el ejemplo y añade un bloque Código. Pega el fragmento dentro de ese bloque, no en el editor visual de un párrafo. Guarda el borrador y revisa la vista previa en escritorio y móvil antes de publicar.
Cuando el código procede de una web externa, un editor o un documento con formato enriquecido, puede arrastrar espacios invisibles, comillas curvas o caracteres especiales. Si el ejemplo no se copia bien, pégalo primero en un editor de texto plano y comprueba las sangrías. En fragmentos pequeños merece la pena revisar también que no se hayan convertido las comillas simples en comillas tipográficas.
Si trabajas directamente con el marcado del post, recuerda que los signos menor y mayor deben aparecer escapados dentro de HTML. Este ejemplo representa una etiqueta, no la ejecuta:
<a href="https://ejemplo.com">Enlace de ejemplo</a>Lenguaje del código: HTML, XML (xml)En el bloque Código del editor normalmente puedes pegar <a> directamente, porque WordPress se encarga de almacenarlo como contenido del bloque. La necesidad de escapar los signos aparece sobre todo cuando preparas el HTML a mano, generas contenido mediante una API o insertas un ejemplo dentro de otro bloque HTML.
Un artículo técnico no necesita llenar la pantalla de fragmentos. Es mejor explicar qué hace cada ejemplo, indicar dónde se coloca y añadir una advertencia si modifica la configuración del sitio. Estos son cuatro formatos habituales.
Si muestras un filtro de WordPress, indica que debe añadirse en un plugin propio o mediante una herramienta de snippets, y que conviene probarlo antes en staging. No presentes la edición directa de functions.php como única opción, porque un cambio con un error de sintaxis puede dejar el tema sin cargar.
add_filter( 'the_title', function ( $title ) {
if ( is_admin() ) {
return $title;
}
return $title . ' · WordPress';
} );Lenguaje del código: PHP (php)El bloque anterior solo muestra el código. Para que tenga efecto hay que colocarlo en el contexto adecuado y comprobar que no entra en conflicto con otros filtros. Cuando publiques snippets, explica también cómo retirarlos.
<div class="aviso-wordpress">
<p>Este texto es un ejemplo.</p>
</div>Lenguaje del código: HTML, XML (xml).aviso-wordpress {
border-left: 4px solid #3858e9;
padding: 1rem;
}Lenguaje del código: CSS (css)Separar HTML y CSS ayuda a entender qué parte crea la estructura y cuál cambia su aspecto. Si el lector solo necesita copiar un bloque visual, añade una explicación sobre dónde debe cargar el CSS y evita mezclar estilos en línea sin motivo.
document.querySelectorAll('.aviso-wordpress').forEach((aviso) => {
aviso.addEventListener('click', () => {
aviso.classList.toggle('is-open');
});
});Lenguaje del código: JavaScript (javascript)Un ejemplo de JavaScript debería aclarar si depende de una librería, si necesita cargarse después del HTML y qué ocurre cuando no existe el selector. No aconsejes insertar scripts sin filtrar en widgets o campos que puedan editar usuarios sin confianza.
{
"post_type": "post",
"status": "publish",
"per_page": 10
}Lenguaje del código: JSON / JSON con comentarios (json)JSON no admite comentarios y exige comillas dobles para las claves y los valores de texto. Un carácter sobrante basta para que falle la petición. Si el ejemplo forma parte de una llamada a la REST API, incluye el endpoint y los permisos necesarios, pero no publiques tokens, contraseñas ni cookies de sesión.
El bloque nativo es suficiente si buscas legibilidad y compatibilidad. Si publicas muchos tutoriales de desarrollo, una extensión puede añadir colores por lenguaje, numeración de líneas, líneas destacadas, títulos de archivo o un botón para copiar el fragmento. Instala una sola y comprueba qué recursos carga en el frontend.
Syntax-highlighting Code Block amplía el bloque Código de WordPress y genera el resaltado en el servidor. Su ficha oficial explica que no necesita cargar JavaScript para colorear los snippets, ofrece detección automática del lenguaje, selección manual, líneas destacadas, números de línea y opción para ajustar el salto de línea. Es una alternativa interesante cuando el rendimiento y la ausencia de un destello de código sin colorear pesan más que los controles interactivos.
WebberZone Code Block Highlighting también trabaja sobre el bloque nativo core/code, en lugar de sustituirlo por shortcodes propios. Permite elegir el lenguaje, mostrar números de línea, destacar rangos, añadir una etiqueta de archivo, limitar la altura y activar un botón de copia. Incluye un modo con Prism.js en el navegador y otro con highlight.php en el servidor.
Code Block Pro ofrece un bloque propio basado en el motor de VS Code, temas visuales, resaltado de líneas, desenfoque selectivo y un botón de copia. Puede encajar en una web donde el aspecto del código sea parte importante del diseño, pero conviene revisar que sus funciones de interacción y sus estilos se carguen como esperas. La propia ficha señala que algunas funciones necesitan JavaScript y CSS adicionales, así que no es la opción más contenida para todos los sitios.
| Necesidad | Opción razonable | Qué debes comprobar |
|---|---|---|
| Mostrar snippets sin añadir plugins | Bloque Código nativo | Lectura en móvil, contraste y copia manual. |
| Resaltado con pocos recursos en frontend | Syntax-highlighting Code Block | Lenguaje detectado, estilos del tema y compatibilidad. |
| Lenguajes, números de línea y botón de copia | WebberZone Code Block Highlighting | Modo de renderizado y scripts cargados. |
| Diseño visual más elaborado | Code Block Pro | Dependencia de JavaScript, CSS y configuración por bloque. |
La elección no debería basarse solo en la cantidad de lenguajes. Comprueba la fecha de actualización, la versión mínima de WordPress y PHP, el foro de soporte, la licencia, los recursos que añade y qué queda guardado si desactivas el plugin. Las extensiones que amplían core/code suelen dejar el contenido en bloques estándar, algo que facilita volver al bloque nativo.
Un snippet no está completo porque tenga colores bonitos. Mantén un contraste suficiente, evita que las líneas queden cortadas en móvil y permite que el lector seleccione y copie el contenido. Los números de línea deben ser decorativos, no formar parte del texto que se copia. Si el plugin los mezcla con el código, comprueba el resultado con un teclado y con un lector de pantalla.
Explica cada fragmento con texto normal. Los buscadores y las herramientas de lectura necesitan saber qué problema resuelve, qué requisitos tiene y qué resultado se espera. No conviertas el artículo en una sucesión de bloques de código sin contexto. Un buen título, encabezados descriptivos, ejemplos cortos y enlaces a la documentación oficial ayudan mucho más que repetir palabras clave.
Si el tutorial habla de rendimiento, enlaza con nuestra guía para mejorar el rendimiento de WordPress. Si incluye funciones que afectan a usuarios, roles o archivos, puedes ampliar la parte de protección con nuestros consejos de seguridad para WordPress. Para aprender a trabajar con bloques personalizados, consulta también la guía de bloques personalizados.
Antes de recomendar código, clasifica lo que hace. Un ejemplo que cambia un color no tiene el mismo riesgo que otro que crea usuarios, ejecuta consultas, modifica permisos, procesa archivos subidos o acepta datos de una petición. Esa diferencia debe aparecer en el texto, aunque el fragmento sea corto.
Cuando el snippet se ejecuta mediante un plugin de snippets, usa una cuenta con permisos limitados y conserva una copia de seguridad. Si editas archivos del tema, un tema hijo o un plugin propio, documenta el cambio para que otra persona pueda mantenerlo después. Nuestra guía de temas hijo explica por qué no conviene modificar directamente el tema padre.
white-space incorrecto.Para la mayoría de artículos basta con el bloque Código que trae WordPress. Respeta el formato, mantiene el snippet separado del texto y no ejecuta las instrucciones que contiene. Si publicas tutoriales de forma habitual, Syntax-highlighting Code Block, WebberZone Code Block Highlighting y Code Block Pro ofrecen caminos distintos para añadir colores, números de línea o copia rápida.
El plugin antiguo del artículo original queda como referencia histórica. Hoy importa más conservar un bloque estándar, explicar el contexto y probar el código con seguridad que llenar cada ejemplo de efectos. Una publicación técnica útil deja claro qué hace el fragmento, dónde se utiliza y qué puede salir mal.
Fuentes: documentación oficial del bloque Código, referencia del bloque core/code, fichas oficiales de Syntax-highlighting Code Block, WebberZone Code Block Highlighting y Code Block Pro.
Andre says:
Es lo que estaba buscando, seria genial si me mostrara el numero de lineas. Muchas gracias.
Juan Boris says:
Hola muy bueno, y como lo haría para cambiar el color de fondo u otras personalizaciones
Rod says:
Excelente, Muchas Gracias.
Me has sacado de apuros, se me estaba dificultando el poder publicar un código, y lo peor es que ni me habia dado cuenta que el codigo que habia publicado no servía, porque se reemplazaron las «» de forma automática…
Oliver de la Rosa says:
¡Estupendo! Muchas gracias Jorge, es justo lo que buscaba para un post que quiero escribir. Me has salvado el día.