{"id":79378,"date":"2025-06-12T08:58:02","date_gmt":"2025-06-12T06:58:02","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=79378&preview=true&preview_id=79378"},"modified":"2025-06-16T09:12:09","modified_gmt":"2025-06-16T07:12:09","slug":"temas-hibridos","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/temas-hibridos\/","title":{"rendered":"Temas H\u00edbridos de WordPress: Un enfoque para usuarios y desarrolladores"},"content":{"rendered":"

WordPress 5.9<\/a> ha introducido una nueva forma de crear sitios web: la Edici\u00f3n Completa del Sitio<\/a> (Full Site Editing o FSE). Esto ha supuesto un punto de inflexi\u00f3n para los usuarios de WordPress, ya que ha cambiado por completo la forma en que se crean y funcionan los temas de WordPress.<\/p>\n

La introducci\u00f3n de FSE tambi\u00e9n supuso la aparici\u00f3n de una distinci\u00f3n entre los temas que son totalmente compatibles con las nuevas funcionalidades de creaci\u00f3n de sitios, tambi\u00e9n conocidos como Temas de Bloques, y los temas tradicionales basados en PHP, que ahora llamamos Temas Cl\u00e1sicos.<\/p>\n

Con el tiempo, muchas funcionalidades creadas para los Temas de Bloques se han ampliado a los Temas Cl\u00e1sicos. Esto ha dado lugar a una tercera categor\u00eda de temas, los Temas H\u00edbridos, que siguen estando construidos con la l\u00f3gica y la estructura de los Temas Cl\u00e1sicos, pero con soporte para varias funcionalidades dise\u00f1adas para los Temas de Bloques.<\/p>\n

Este art\u00edculo explora los Temas H\u00edbridos, sus funcionalidades clave, c\u00f3mo los desarrolladores pueden mejorarlos y cu\u00e1ndo elegirlos en lugar de los Temas de Bloques.<\/p>\n

\u00a1Empecemos!<\/p>\n

\"Una
Twenty Twenty-Two es el primer tema de WordPress compatible con la Edici\u00f3n Completa del Sitio<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

\u00bfTemas Cl\u00e1sicos o H\u00edbridos?<\/h2>\n

Antes de la introducci\u00f3n de los Temas de Bloques con Twenty Twenty-Two<\/a> y WordPress 5.9, no exist\u00edan los Temas Cl\u00e1sicos. El t\u00e9rmino surgi\u00f3 para distinguirlos de los Temas de Bloques. Los temas cl\u00e1sicos son todos los temas de WordPress que no son compatibles con las funcionalidades de bloques.<\/p>\n

\"Vista
Una vista previa del tema H\u00edbrido de Twenty Twenty-One<\/figcaption><\/figure>\n

Hoy en d\u00eda, no es f\u00e1cil encontrar Temas Cl\u00e1sicos puros porque, desde la versi\u00f3n 5.9, estos temas se han mejorado con muchas funcionalidades creadas para los Temas de Bloques, lo que ha hecho que la experiencia de edici\u00f3n y dise\u00f1o de las dos categor\u00edas de temas sea cada vez m\u00e1s similar con el paso del tiempo.<\/p>\n

Dicho esto, la forma de trabajar con los Temas H\u00edbridos sigue siendo diferente a la de los Temas de Bloques.<\/p>\n

Funcionalidades b\u00e1sicas de los Temas H\u00edbridos<\/h2>\n

Con los Temas H\u00edbridos, tu sitio puede aprovechar las capacidades de edici\u00f3n del editor de bloques de WordPress sin dejar de ser compatible con los plugins y funcionalidades tradicionales de WordPress, como widgets, men\u00fas y plantillas de p\u00e1gina.<\/p>\n

El Personalizador de WordPress<\/h3>\n

Los Temas H\u00edbridos suelen ser compatibles con el Personalizador de WordPress<\/a>, un entorno de configuraci\u00f3n visual que te permite ajustar la apariencia de tu sitio web de WordPress y previsualizar tus cambios en tiempo real.<\/p>\n

El tema predeterminado Twenty Twenty-One<\/a> es un buen ejemplo de tema h\u00edbrido que proporciona los ajustes m\u00e1s comunes del Personalizador, como Identidad del Sitio, Colores y Modo Oscuro, Imagen de fondo, Men\u00fas, Widgets, Ajustes de la p\u00e1gina de inicio, etc.<\/p>\n

\"El
El Personalizador con el tema Twenty Twenty-One<\/figcaption><\/figure>\n

Los temas pueden registrar controles espec\u00edficos del Personalizador, por lo que la funcionalidad var\u00eda seg\u00fan el tema. La siguiente imagen muestra el Personalizador de Neve<\/a>, un tema h\u00edbrido ligero de ThemeIsle.<\/p>\n

\"Una
Una vista previa del Personalizador del tema Neve de WordPress<\/figcaption><\/figure>\n

Los temas tambi\u00e9n pueden registrar funcionalidades avanzadas para ofrecer a los usuarios un control granular sobre aspectos espec\u00edficos del dise\u00f1o del sitio. Neve, por ejemplo, proporciona un potente constructor para crear encabezados y pies de p\u00e1gina del sitio.<\/p>\n

\"Neve
Neve tiene un constructor de cabeceras en el Personalizador<\/figcaption><\/figure>\n

Widgets de bloques<\/h3>\n

Los Temas H\u00edbridos te permiten personalizar las \u00c1reas de Widgets mediante bloques, gracias al editor de widgets basado en bloques<\/a>. Esta funcionalidad se introdujo por primera vez con WordPress 5.8<\/a> y puedes probarla con cualquier tema cl\u00e1sico que utilice widgets.<\/p>\n

\"La
La pantalla de Widgets en Twenty Twenty-One<\/figcaption><\/figure>\n

La interfaz del Editor de Widgets es similar a la interfaz del Editor de Entradas. La siguiente imagen muestra un bloque Imagen en el \u00e1rea de widgets Pie de p\u00e1gina del tema Twenty Twenty-One.<\/p>\n

\"Captura
El editor de widgets aporta funcionalidades de bloques a los widgets cl\u00e1sicos.<\/figcaption><\/figure>\n

Los widgets cl\u00e1sicos como Categor\u00edas, Archivos, Entradas Recientes o Comentarios Recientes siguen siendo compatibles con los Temas H\u00edbridos. El Editor de Widgets complementa los widgets cl\u00e1sicos de WordPress permitiendo a los usuarios crear los suyos propios a trav\u00e9s de su interfaz basada en bloques.<\/p>\n

Libro de estilo y patrones de bloques<\/h3>\n

Con los recientes cambios introducidos con WordPress 6.8<\/a>, los Temas H\u00edbridos compatibles con los estilos del editor<\/a> pueden utilizar el Libro de Estilo<\/strong>, una interfaz visual<\/a> que permite a los usuarios previsualizar cualquier bloque que pueda utilizarse en sus sitios web sin tener que utilizar esos bloques en su contenido.<\/p>\n

Puedes acceder al Libro de Estilo en Temas H\u00edbridos desde Apariencia<\/strong> > Dise\u00f1o<\/strong> > Estilos<\/strong>.<\/p>\n

La siguiente imagen muestra el Libro de Estilo del tema h\u00edbrido Kadence.<\/p>\n

\"El
El Libro de estilo del tema h\u00edbrido Kadence<\/figcaption><\/figure>\n

En la misma interfaz, puedes explorar y gestionar Patrones.<\/p>\n

\"Patrones
Patrones del tema Blocksy<\/figcaption><\/figure>\n

Para los Temas H\u00edbridos que los admiten, los patrones est\u00e1n disponibles para su uso en el Editor de Entradas<\/a>, que est\u00e1 activado por defecto en todas las instalaciones de WordPress desde la versi\u00f3n 5.0<\/a>, a menos que lo hayas desactivado con el plugin Editor Cl\u00e1sico<\/a>.<\/p>\n

\"La
La secci\u00f3n Patrones en el insertador de bloques del Editor de entradas con el tema Twenty Twenty-One<\/figcaption><\/figure>\n

Estructura del tema: Visi\u00f3n general de un desarrollador<\/h2>\n

Los temas Cl\u00e1sicos y de Bloques no solo son diferentes en cuanto a funcionalidad para el usuario final. Tambi\u00e9n son diferentes desde el punto de vista estructural.<\/p>\n

Temas Cl\u00e1sicos<\/h3>\n

Los Temas Cl\u00e1sicos se basan en unos pocos archivos clave, el m\u00e1s importante de todos ellos es el archivo style.css<\/code>. Este archivo proporciona los metadatos del tema<\/a> y determina la apariencia del sitio en el front end.<\/p>\n

Adem\u00e1s de la hoja de estilo del tema, los Temas Cl\u00e1sicos suelen tener un archivo functions.php<\/code><\/a> que se utiliza<\/span> para crear la funcionalidad y el soporte del tema.<\/p>\n

Los Temas Cl\u00e1sicos tambi\u00e9n se basan en plantillas PHP que definen la estructura de una p\u00e1gina y sus \u00e1reas principales: encabezado, cuerpo, sidebars y pie de p\u00e1gina. Cuando un usuario visita una entrada o p\u00e1gina, WordPress determina qu\u00e9 plantilla utilizar para mostrar el contenido en la pantalla seg\u00fan un estricto sistema de reglas conocido como jerarqu\u00eda de plantillas<\/a>. Las plantillas m\u00e1s utilizadas son index.php<\/code>, page.php<\/code>, single.php<\/code>, y muchas otras.<\/p>\n

Los Temas Cl\u00e1sicos pueden utilizar funciones PHP espec\u00edficas (hooks de acci\u00f3n y de filtro<\/a>), que se ejecutan en momentos concretos de la vida de WordPress, lo que permite a los desarrolladores ampliar la funcionalidad de un tema utilizando c\u00f3digo PHP en el archivo functions.php<\/code> de un tema hijo<\/a>.<\/p>\n

Puede que pienses que personalizar un tema cl\u00e1sico es especialmente dif\u00edcil para los usuarios sin conocimientos de programaci\u00f3n.<\/p>\n

Temas de Bloques<\/h3>\n

Los Temas de Bloques tambi\u00e9n necesitan un style.css<\/code> para proporcionar a WordPress los metadatos del tema, pero dependen en gran medida de un archivo theme.json<\/code><\/a>, un archivo de configuraci\u00f3n que define estilos y ajustes globales para un tema. Contiene un objeto JSON<\/a> cuyas propiedades definen los ajustes iniciales<\/a> necesarios para crear el dise\u00f1o y definir la apariencia<\/a> de las p\u00e1ginas del sitio.<\/p>\n

Los Temas de Bloques tambi\u00e9n utilizan plantillas y partes de plantillas, pero \u00e9stas son estructuralmente diferentes de las plantillas PHP de los temas cl\u00e1sicos. En los Temas de Bloques, las plantillas y las partes de plantillas son archivos HTML que contienen marcas espec\u00edficas y objetos JSON. Por ejemplo, consideremos la plantilla home.html<\/code> del tema predeterminado Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Esta plantilla consta de elementos estructurados en forma de etiquetas HTML y comentarios. Los comentarios pueden hacer referencia a otros elementos t\u00edpicos de un tema de bloques, como partes de plantillas y patrones, que est\u00e1n compuestos por bloques u otros elementos anidados.<\/p>\n
A\u00f1adir funcionalidades de bloque a los Temas H\u00edbridos<\/h2>\n
Como hemos mencionado antes, con los Temas Cl\u00e1sicos, necesitas a\u00f1adir c\u00f3digo personalizado para alterar el dise\u00f1o o la funcionalidad de un sitio, lo que a menudo implica archivos de plantilla o functions.php<\/code>. En cambio, los Temas de Bloques permiten a los no desarrolladores un mayor control sobre el dise\u00f1o y la apariencia del sitio.<\/p>\n
Los Temas H\u00edbridos ofrecen menos funcionalidades de bloque que los Temas de Bloques, pero a\u00fan as\u00ed pueden proporcionar un mayor control de la disposici\u00f3n y el estilo a trav\u00e9s de patrones y estilos globales.<\/p>\n
Vamos a explorar algunas potentes funcionalidades de bloques que puedes integrar en tu tema cl\u00e1sico y aprender a implementarlas de forma eficaz.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Estilos globales<\/h3>\n
WordPress 5.8<\/a> introdujo los Estilos Globales, una interfaz visual que permite a los usuarios controlar el aspecto de su sitio web desde una interfaz centralizada, y a los desarrolladores controlar los estilos de sus sitios de WordPress a trav\u00e9s de un archivo theme.json<\/code>.<\/p>\n
Para activar esta funcionalidad en tu tema h\u00edbrido, s\u00f3lo tienes que a\u00f1adir un archivo theme.json<\/code> a la carpeta ra\u00edz del tema. Veamos algunas de las caracter\u00edsticas clave que puedes a\u00f1adir a tu tema h\u00edbrido con theme.json<\/code>.<\/p>\n
Tipograf\u00eda<\/h4>\n
Supongamos que quieres a\u00f1adir compatibilidad con tres familias de fuentes a tu tema cl\u00e1sico. En este ejemplo, utilizaremos Twenty Twenty-One<\/a>.<\/p>\n
Primero, crea una carpeta fonts<\/code> en assets<\/code> y sube algunas fuentes de tu elecci\u00f3n. Vamos a a\u00f1adir tres fuentes: Manrope<\/code>, Fira Code<\/code>, y Beiruti<\/code>. Puedes obtener estas fuentes del tema Twenty Twenty-Five<\/a>.<\/p>\n
\"Tres
A\u00f1adimos tres fuentes y un archivo theme.json al tema Twenty Twenty-One<\/figcaption><\/figure>\n
Abre tu editor de texto y crea el siguiente archivo theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
La propiedad settings.typography.fontFamilies<\/code> te permite registrar cualquier n\u00famero de familias de fuentes personalizadas<\/a>. Para cada fuente, tendr\u00e1s que declarar las siguientes propiedades:<\/p>\n