Si eres desarrollador o escribes tutoriales técnicos, seguro que te has enfrentado al bloque de «Código» nativo de WordPress. Es funcional, sí, pero visualmente es… aburrido. Texto gris sobre fondo gris. No invita a leer.
Existen plugins para colorear el código (syntax highlighting), pero la mayoría son pesados o crean bloques nuevos que, si mañana desinstalas el plugin, rompen todo tu contenido.
Hoy vamos a hacer algo mejor: vamos a «vitaminar» el bloque nativo de WordPress. Crearemos un plugin ligero que añade un selector de lenguaje (PHP, JS, CSS) directamente en la barra lateral del editor y aplica estilos profesionales usando la librería Highlight.js. Y lo mejor: si algún día borras el plugin, tu código seguirá ahí, intacto.
Manos a la obra.
Paso 1: Prepara el terreno
Lo primero es crear la «casa» para nuestro código. Entra a tu servidor (vía FTP o desde el panel de tu hosting), ve a la carpeta wp-content/plugins/ y crea una nueva carpeta llamada wp-highlight-pro.
Dentro de esa carpeta vamos a necesitar solo dos archivos.
Paso 2: El motor del plugin (PHP)
Crea un archivo llamado wp-highlight-pro.php. Este será el encargado de decirle a WordPress que existimos y de cargar los estilos en la parte visual de la web.
Copia y pega este código:
<?php
/**
* Plugin Name: WP Highlight Pro (con Selector)
* Description: Añade un selector de lenguajes al bloque de código nativo y aplica Highlight.js.
* Version: 2.0
* Author: laboratoriowp-z9t9.labwp.link/
*/
if ( ! defined( 'ABSPATH' ) ) exit;
// 1. Cargar Highlight.js en el Frontend
function whp_frontend_assets() {
wp_enqueue_script( 'hljs-lib', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js', [], '11.9.0', true );
wp_enqueue_style( 'hljs-style', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css', [], '11.9.0' );
// Script pequeño para activar el resaltado automáticamente
wp_add_inline_script( 'hljs-lib', "
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
});
" );
}
add_action( 'wp_enqueue_scripts', 'whp_frontend_assets' );
// 2. Cargar el script que modifica el editor
function whp_editor_assets() {
wp_enqueue_script(
'whp-editor-js',
plugins_url( 'editor-script.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-hooks' ),
'1.0',
true
);
}
add_action( 'enqueue_block_editor_assets', 'whp_editor_assets' );
// 3. Inyectar la clase CSS correcta en el frontend
function whp_render_block_filter( $block_content, $block ) {
// Solo actuamos si es el bloque de código nativo
if ( 'core/code' === $block['blockName'] ) {
// ¿El usuario seleccionó un lenguaje?
if ( isset( $block['attrs']['language'] ) && ! empty( $block['attrs']['language'] ) ) {
$lang = esc_attr( $block['attrs']['language'] );
// Añadimos la clase necesaria para que Highlight.js funcione
$block_content = str_replace( '<code>', '<code class="language-' . $lang . '">', $block_content );
}
}
return $block_content;
}
add_filter( 'render_block', 'whp_render_block_filter', 10, 2 );
Paso 3: La magia del editor (JavaScript)
Ahora viene la parte divertida. Vamos a modificar la interfaz de Gutenberg para añadir nuestro propio menú desplegable.
Crea un archivo llamado editor-script.js en la misma carpeta y pega esto:
(function(wp) {
var el = wp.element.createElement;
var addFilter = wp.hooks.addFilter;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var SelectControl = wp.components.SelectControl;
var createHigherOrderComponent = wp.compose.createHigherOrderComponent;
// 1. Añadimos un atributo nuevo al bloque para guardar el lenguaje
function addLanguageAttribute(settings, name) {
if (name !== 'core/code') {
return settings;
}
return Object.assign({}, settings, {
attributes: Object.assign({}, settings.attributes, {
language: {
type: 'string',
default: ''
}
})
});
}
addFilter(
'blocks.registerBlockType',
'whp/add-language-attribute',
addLanguageAttribute
);
// 2. Dibujamos el selector en la barra lateral
var withLanguageControl = createHigherOrderComponent(function(BlockEdit) {
return function(props) {
// Si no es un bloque de código, no hacemos nada
if (props.name !== 'core/code') {
return el(BlockEdit, props);
}
var language = props.attributes.language;
function onChangeLanguage(newLanguage) {
props.setAttributes({ language: newLanguage });
}
// Aquí puedes añadir más lenguajes si los necesitas
var languageOptions = [
{ label: 'Auto / Texto Plano', value: '' },
{ label: 'PHP', value: 'php' },
{ label: 'JavaScript', value: 'javascript' },
{ label: 'CSS', value: 'css' },
{ label: 'HTML / XML', value: 'xml' },
{ label: 'Python', value: 'python' },
{ label: 'SQL', value: 'sql' },
{ label: 'Bash / Shell', value: 'bash' },
{ label: 'JSON', value: 'json' }
];
return el(
wp.element.Fragment,
{},
el(BlockEdit, props), // Renderizamos el bloque original
el(
InspectorControls,
{},
el(
PanelBody,
{ title: 'Configuración Highlight.js', initialOpen: true },
el(SelectControl, {
label: 'Lenguaje de Programación',
value: language,
options: languageOptions,
onChange: onChangeLanguage,
help: 'Elige el lenguaje para que los colores se apliquen correctamente.'
})
)
)
);
};
}, 'withLanguageControl');
addFilter(
'editor.BlockEdit',
'whp/with-language-control',
withLanguageControl
);
})(window.wp);
¿Cómo usarlo?
- Ve a tu panel de WordPress, sección Plugins, y activa «WP Highlight Pro».
- Crea una nueva entrada y añade un bloque de «Código».
- Escribe algo de código PHP o JS dentro.
- Fíjate en la barra lateral derecha. ¡Sorpresa! Ahora tienes un panel llamado «Configuración Highlight.js».
- Selecciona el lenguaje correcto y guarda.
Cuando visites la entrada, verás tu código con un tema oscuro elegante (Atom One Dark) y los colores de sintaxis perfectos.
Glosario Técnico del Tutorial
CDN (Content Delivery Network) Es una red de servidores que sirve archivos (como imágenes o scripts) desde la ubicación más cercana al usuario. En este tutorial, cargamos la librería Highlight.js desde un CDN para que sea muy rápido y no tengas que descargar archivos a tu servidor.
InspectorControls Es el componente de WordPress que controla la barra lateral derecha del editor. Gracias a él podemos «inyectar» nuestro menú desplegable justo donde están los ajustes de tipografía o color.
Higher Order Component (HOC) Es una técnica de programación avanzada en React. Imagínalo como una «matrioska»: cogemos el bloque de código original, lo metemos dentro de nuestro componente personalizado (que tiene el menú desplegable) y devolvemos el conjunto. Así añadimos funciones sin romper el bloque original.
Render Block Filter Es un filtro de PHP que se ejecuta justo antes de que el bloque se muestre en la pantalla del visitante. Lo usamos para buscar la etiqueta <code> y pegarle la clase CSS (por ejemplo class="language-php") que necesita la librería de colores para funcionar.
Highlight.js Una librería de JavaScript muy famosa que lee texto plano, detecta patrones de código (variables, funciones, comentarios) y los envuelve en etiquetas <span> con colores. Es el estándar de la industria para mostrar código en la web.
