WordPress 5.9 ha introducido una nueva forma de crear sitios web: la Edición Completa del Sitio (Full Site Editing o FSE). Esto ha supuesto un punto de inflexión para los usuarios de WordPress, ya que ha cambiado por completo la forma en que se crean y funcionan los temas de WordPress.
La introducción de FSE también supuso la aparición de una distinción entre los temas que son totalmente compatibles con las nuevas funcionalidades de creación de sitios, también conocidos como Temas de Bloques, y los temas tradicionales basados en PHP, que ahora llamamos Temas Clásicos.
Con el tiempo, muchas funcionalidades creadas para los Temas de Bloques se han ampliado a los Temas Clásicos. Esto ha dado lugar a una tercera categoría de temas, los Temas Híbridos, que siguen estando construidos con la lógica y la estructura de los Temas Clásicos, pero con soporte para varias funcionalidades diseñadas para los Temas de Bloques.
Este artículo explora los Temas Híbridos, sus funcionalidades clave, cómo los desarrolladores pueden mejorarlos y cuándo elegirlos en lugar de los Temas de Bloques.
¡Empecemos!
¿Temas Clásicos o Híbridos?
Antes de la introducción de los Temas de Bloques con Twenty Twenty-Two y WordPress 5.9, no existían los Temas Clásicos. El término surgió para distinguirlos de los Temas de Bloques. Los temas clásicos son todos los temas de WordPress que no son compatibles con las funcionalidades de bloques.
Hoy en día, no es fácil encontrar Temas Clásicos puros porque, desde la versión 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ón y diseño de las dos categorías de temas sea cada vez más similar con el paso del tiempo.
Dicho esto, la forma de trabajar con los Temas Híbridos sigue siendo diferente a la de los Temas de Bloques.
Funcionalidades básicas de los Temas Híbridos
Con los Temas Híbridos, tu sitio puede aprovechar las capacidades de edición del editor de bloques de WordPress sin dejar de ser compatible con los plugins y funcionalidades tradicionales de WordPress, como widgets, menús y plantillas de página.
El Personalizador de WordPress
Los Temas Híbridos suelen ser compatibles con el Personalizador de WordPress, un entorno de configuración visual que te permite ajustar la apariencia de tu sitio web de WordPress y previsualizar tus cambios en tiempo real.
El tema predeterminado Twenty Twenty-One es un buen ejemplo de tema híbrido que proporciona los ajustes más comunes del Personalizador, como Identidad del Sitio, Colores y Modo Oscuro, Imagen de fondo, Menús, Widgets, Ajustes de la página de inicio, etc.
Los temas pueden registrar controles específicos del Personalizador, por lo que la funcionalidad varía según el tema. La siguiente imagen muestra el Personalizador de Neve, un tema híbrido ligero de ThemeIsle.
Los temas también pueden registrar funcionalidades avanzadas para ofrecer a los usuarios un control granular sobre aspectos específicos del diseño del sitio. Neve, por ejemplo, proporciona un potente constructor para crear encabezados y pies de página del sitio.
Widgets de bloques
Los Temas Híbridos te permiten personalizar las Áreas de Widgets mediante bloques, gracias al editor de widgets basado en bloques. Esta funcionalidad se introdujo por primera vez con WordPress 5.8 y puedes probarla con cualquier tema clásico que utilice widgets.
La interfaz del Editor de Widgets es similar a la interfaz del Editor de Entradas. La siguiente imagen muestra un bloque Imagen en el área de widgets Pie de página del tema Twenty Twenty-One.
Los widgets clásicos como Categorías, Archivos, Entradas Recientes o Comentarios Recientes siguen siendo compatibles con los Temas Híbridos. El Editor de Widgets complementa los widgets clásicos de WordPress permitiendo a los usuarios crear los suyos propios a través de su interfaz basada en bloques.
Libro de estilo y patrones de bloques
Con los recientes cambios introducidos con WordPress 6.8, los Temas Híbridos compatibles con los estilos del editor pueden utilizar el Libro de Estilo, una interfaz visual que permite a los usuarios previsualizar cualquier bloque que pueda utilizarse en sus sitios web sin tener que utilizar esos bloques en su contenido.
Puedes acceder al Libro de Estilo en Temas Híbridos desde Apariencia > Diseño > Estilos.
La siguiente imagen muestra el Libro de Estilo del tema híbrido Kadence.
En la misma interfaz, puedes explorar y gestionar Patrones.
Para los Temas Híbridos que los admiten, los patrones están disponibles para su uso en el Editor de Entradas, que está activado por defecto en todas las instalaciones de WordPress desde la versión 5.0, a menos que lo hayas desactivado con el plugin Editor Clásico.
Estructura del tema: Visión general de un desarrollador
Los temas Clásicos y de Bloques no solo son diferentes en cuanto a funcionalidad para el usuario final. También son diferentes desde el punto de vista estructural.
Temas Clásicos
Los Temas Clásicos se basan en unos pocos archivos clave, el más importante de todos ellos es el archivo style.css. Este archivo proporciona los metadatos del tema y determina la apariencia del sitio en el front end.
Además de la hoja de estilo del tema, los Temas Clásicos suelen tener un archivo functions.php que se utiliza para crear la funcionalidad y el soporte del tema.
Los Temas Clásicos también se basan en plantillas PHP que definen la estructura de una página y sus áreas principales: encabezado, cuerpo, sidebars y pie de página. Cuando un usuario visita una entrada o página, WordPress determina qué plantilla utilizar para mostrar el contenido en la pantalla según un estricto sistema de reglas conocido como jerarquía de plantillas. Las plantillas más utilizadas son index.php, page.php, single.php, y muchas otras.
Los Temas Clásicos pueden utilizar funciones PHP específicas (hooks de acción y de filtro), 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ódigo PHP en el archivo functions.php de un tema hijo.
Puede que pienses que personalizar un tema clásico es especialmente difícil para los usuarios sin conocimientos de programación.
Temas de Bloques
Los Temas de Bloques también necesitan un style.css para proporcionar a WordPress los metadatos del tema, pero dependen en gran medida de un archivo theme.json, un archivo de configuración que define estilos y ajustes globales para un tema. Contiene un objeto JSON cuyas propiedades definen los ajustes iniciales necesarios para crear el diseño y definir la apariencia de las páginas del sitio.
Los Temas de Bloques también utilizan plantillas y partes de plantillas, pero éstas son estructuralmente diferentes de las plantillas PHP de los temas clásicos. En los Temas de Bloques, las plantillas y las partes de plantillas son archivos HTML que contienen marcas específicas y objetos JSON. Por ejemplo, consideremos la plantilla home.html del tema predeterminado Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Esta plantilla consta de elementos estructurados en forma de etiquetas HTML y comentarios. Los comentarios pueden hacer referencia a otros elementos típicos de un tema de bloques, como partes de plantillas y patrones, que están compuestos por bloques u otros elementos anidados.
Añadir funcionalidades de bloque a los Temas Híbridos
Como hemos mencionado antes, con los Temas Clásicos, necesitas añadir código personalizado para alterar el diseño o la funcionalidad de un sitio, lo que a menudo implica archivos de plantilla o functions.php. En cambio, los Temas de Bloques permiten a los no desarrolladores un mayor control sobre el diseño y la apariencia del sitio.
Los Temas Híbridos ofrecen menos funcionalidades de bloque que los Temas de Bloques, pero aún así pueden proporcionar un mayor control de la disposición y el estilo a través de patrones y estilos globales.
Vamos a explorar algunas potentes funcionalidades de bloques que puedes integrar en tu tema clásico y aprender a implementarlas de forma eficaz.
Estilos globales
WordPress 5.8 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és de un archivo theme.json.
Para activar esta funcionalidad en tu tema híbrido, sólo tienes que añadir un archivo theme.json a la carpeta raíz del tema. Veamos algunas de las características clave que puedes añadir a tu tema híbrido con theme.json.
Tipografía
Supongamos que quieres añadir compatibilidad con tres familias de fuentes a tu tema clásico. En este ejemplo, utilizaremos Twenty Twenty-One.
Primero, crea una carpeta fonts en assets y sube algunas fuentes de tu elección. Vamos a añadir tres fuentes: Manrope, Fira Code, y Beiruti. Puedes obtener estas fuentes del tema Twenty Twenty-Five.
Abre tu editor de texto y crea el siguiente archivo theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}La propiedad settings.typography.fontFamilies te permite registrar cualquier número de familias de fuentes personalizadas. Para cada fuente, tendrás que declarar las siguientes propiedades:
name: Un título requerido legible por humanos para la familia de fuentes.slug: Un slug requerido para la familia de fuentes. Se añadirá a una propiedad personalizada CSS generada:--wp--preset--font-family--{slug}.fontFamily: Un valor requerido que se asignará al valor CSS font-family.fontFace: Un array opcional de tipos de letra que se asignan a la regla CSS@font-face. Sólo lo necesitas con fuentes web personalizadas.
Guarda tu theme.json y accede a tu panel de control de WordPress. Crea una nueva entrada o página, añade un párrafo con un texto de muestra y abre la barra lateral de bloques. Haz clic en el botón Opciones de tipografía y selecciona Fuente. Deberías encontrar opciones para las familias de fuentes que acabas de añadir a tu tema.
Las siguientes imágenes muestran el aspecto de la barra lateral del bloque Párrafo antes y después de añadir el theme.json mostrado anteriormente.
Las propiedades de estilo globales varían según el tema. Aparte de typography, las propiedades comúnmente admitidas te permiten controlar la paleta de colores, el diseño y los estilos personalizados. Los siguientes ejemplos se han probado en Twenty Twenty-One.
Paleta de colores, degradados y filtros duotono
Puedes añadir soporte para colores personalizados utilizando la propiedad settings.color a nivel de tema o de bloque individual. Por ejemplo, el siguiente código añade dos colores a la paleta predeterminada:
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Puedes utilizar la propiedad settings.color.palette para registrar tantos colores como desees.
También puedes añadir soporte para degradados y filtros duotono:
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Diseño
También puedes personalizar la configuración predeterminada del diseño. La propiedad settings.layout te permite establecer el ancho predeterminado del contenido y el ancho de la alineación horizontal. Aquí tienes un ejemplo:
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Para obtener una descripción más detallada de theme.json, consulta nuestro completo tutorial sobre theme.json y la documentación oficial de WordPress.
Variaciones de estilos de bloque
Las variaciones de estilo de bloques, introducidas por primera vez con WordPress 5.3, permiten a los desarrolladores crear estilos alternativos para bloques específicos.
En pocas palabras, los estilos de bloque son clases CSS que se añaden al elemento envolvente de un bloque en la forma .is-style-{name}.
Las variaciones de estilos de bloque aparecen en el panel Estilos de la barra lateral de bloques y te permiten seleccionar un estilo para el bloque con un solo clic.
Puedes registrar tus variaciones de estilos de bloque de varias formas.
En primer lugar, puedes registrar estilos de bloque utilizando la función PHP register_block_style(). Por ejemplo, puedes registrar la siguiente variación de estilo en el archivo functions de tu tema:
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() acepta dos argumentos:
$block_name: El nombre de un tipo de bloque o un array de tipos de bloque$style_properties: Un array que contiene las propiedades de estilo. En este ejemplo, hemos utilizadoname,label, yinline_style.
El código anterior genera una variación de estilo de bloque con una única propiedad CSS. Una vez añadido este código al archivo functions.php de tu tema o tema hijo, aparece un botón en el panel de estilos de bloque para que el usuario pueda establecer el estilo con un solo clic.
La siguiente imagen muestra la variación de estilos del bloque en el front-end. El tema sigue siendo Twenty Twenty-One.
Puedes añadir tus estilos inline en tu código PHP, como en el ejemplo anterior, pero tu código puede volverse difícil de mantener rápidamente a medida que los estilos se vuelven más complejos y elaborados. En estos casos, puedes registrar la variación de estilo como vimos anteriormente, pero definir los estilos en tu archivo theme.json.
En el siguiente ejemplo, creamos una variación de estilo Azul oscuro para el bloque Título.
Primero, registra la variación de estilo en el archivo de functions del tema:
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}A continuación, define los estilos de variación en tu archivo theme.json:
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Ahora, los usuarios de tu tema pueden elegir entre dos variaciones de estilo para el bloque Encabezado, como se muestra en la siguiente imagen.
Variaciones de bloque
Las variaciones de bloque son versiones alternativas de cualquier bloque registrado. Mientras que las variaciones de estilo de bloque (o estilos de bloque) son versiones personalizadas de un estilo de bloque que los usuarios pueden añadir al contenido con un solo clic, las variaciones de bloque son versiones alternativas de la configuración de un bloque. Permiten a los usuarios insertar rápidamente un bloque con ajustes preconfigurados sin tener que establecer las mismas configuraciones para cada instancia de bloque.
La API de Variaciones de Bloque permite a los Temas Híbridos registrar variaciones de bloque mediante JavaScript. En los casos más sencillos, crear un script y ponerlo en cola puede ser suficiente, pero si trabajas mucho con JavaScript y bloques de Gutenberg, es posible que te interese incorporar herramientas de construcción a tu flujo de trabajo. (Lectura recomendada).
Supongamos que quieres crear una variación de bloque con un conjunto de opciones preconfiguradas para que tu variación pueda insertarse rápidamente en tus entradas o páginas con una configuración adicional mínima.
El primer paso es crear un archivo JavaScript vacío y cargarlo en el editor. Tendrás que ponerlo en cola en el archivo functions.php de tu tema utilizando wp_enqueue_script() y el hook de acción enqueue_block_editor_assets.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );En el código anterior, utilizamos ?cache_bust=' . time() para añadir una marca de tiempo única a la URL de block-variations.js (por ejemplo, block-variations.js?cache_bust=1698765432). Esto es especialmente útil durante el desarrollo, ya que garantiza que el navegador, el servidor o la CDN carguen siempre la última versión del script, evitando que una versión obsoleta almacenada en caché bloquee la visualización de los cambios.
A continuación, tienes que registrar tu variación de bloque en tu script utilizando la función registerBlockVariation proporcionada por la API de Variaciones de Bloque.
Esta es la firma de la función:
const registerBlockVariation = ( blockName, variation )blockName: El nombre del bloque (es decir,core/query.)variation: Un objeto que describe una variación para el tipo de bloque.
El objeto variation puede incluir cualquiera de los siguientes parámetros:
name: (cadena) Un identificador único de la variación.title: (cadena) Un título de la variación legible por humanos.description: (cadena) Una descripción detallada.category: (cadena) Una categoría utilizada en las interfaces de búsqueda.keywords: (Array) Un array de términos que ayudan a los usuarios a descubrir la variación.icon: (WPIcon) Un icono para mostrar en el insertador de bloques.isDefault: (booleano) Si la variación actual es la predeterminada. Por defecto es false.isActive: (Función/Array) Una función o un array de atributos de bloque utilizados para determinar si la variación está activa cuando se selecciona el bloque. SinisActive, WordPress no sabría distinguir tu variación de un bloque estándar o de otras variaciones, lo que provocaría un comportamiento incoherente en el editor.attributes: (Objeto) Valores de los atributos que anulan los valores predeterminados del bloque.innerBlocks: (Array[]) Configuración inicial del bloque anidado.example: (Objeto) Datos estructurados para la vista previa del bloque. Establécelo como indefinido para desactivar la vista previa.scope: (WPBlockVariationScope[]) La lista de ámbitos en los que es aplicable la variación. Si no se proporciona, asume todos los ámbitos disponibles. Las opciones disponibles sonblock,inserter, ytransform. Por defecto asumeblockyinserter.
Ahora puedes añadir el JavaScript al archivo block-variations.js:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Este código añade un nuevo tipo de bloque con el icono de un avión al insertador de bloques. Cuando haces clic en el avión, se añade a la página una nueva variación del bloque Encabezado con tu configuración personalizada. Establecemos el nivel del encabezado (H2), centramos el texto, establecemos un marcador de posición y definimos los colores del texto y del fondo del encabezado.
Nota: Para que este código funcione como es debido, asegúrate de que tu tema híbrido es compatible con funciones del editor como 'editor-color-palette', editor-styles, y otras. Para obtener una lista más completa de compatibilidades, consulta la API de Variaciones de Bloque.
Patrones de bloques
Los patrones de bloques son grupos preconstruidos de bloques que puedes añadir a tu contenido y personalizar utilizando la interfaz del editor de bloques.
Los Temas de Bloques suelen proporcionar un número variable de patrones de bloques que puedes añadir a tu contenido directamente desde el insertador de bloques. Los Temas Híbridos pueden añadir compatibilidad con patrones para que los usuarios de temas clásicos puedan beneficiarse de esta potente funcionalidad.
Puedes crear una carpeta patterns en la raíz de tu tema e incluir tus patrones de bloques, o puedes registrarlos en los archivos functions.php u otros .php de tu tema.
Para mantener las cosas en orden, puedes crear un archivo inc/block-patterns.php e incluirlo en el function.php de tu tema con el siguiente código:
require get_template_directory() . '/inc/block-patterns.php';Una vez hecho esto, puedes crear tu patrón en el editor, copiar el código y registrar tu patrón y categoría de patrón en inc/block-patterns.php utilizando las funciones register_block_pattern_category y register_block_pattern():
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Puedes previsualizar tu patrón en tu panel de WordPress en Apariencia > Diseño > Patrones > Mi tema híbrido y utilizarlo en tu contenido.
También puedes duplicar y exportar tu patrón e importarlo a otros sitios web de WordPress.
Partes de la plantilla
Aunque los Temas Híbridos utilizan las clásicas plantillas PHP y partes de plantilla, puedes añadir soporte para partes de plantilla en bloque en el archivo functions.php de tu tema:
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Una vez que hayas añadido soporte para partes de plantilla, puedes incluir cualquier parte de plantilla en cualquier archivo de plantilla de tu tema híbrido utilizando la función block_template_part.
Veamos un ejemplo práctico. Empieza creando una carpeta /parts en la raíz de tu tema y cargando en ella un archivo footer.html. Para este ejemplo, hemos copiado el pie de página del tema Twenty Twenty-Five:
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Ahora puedes incluir esta parte de la plantilla en una plantilla clásica con la función block_template_part:
<?php block_template_part( 'footer' ); ?> Por ejemplo, puedes incluirla en el archivo footer.php de Twenty Twenty-One. La siguiente imagen muestra el resultado en pantalla.
También puedes incluir partes de plantilla en una plantilla de bloque utilizando el siguiente código:
<!-- wp:template-part {"slug":"footer"} /-->
Por ejemplo, puedes copiar el código de la plantilla page.html de Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Guarda esta plantilla en tu carpeta /templates y llámala page.html. WordPress la cargará automáticamente según la jerarquía de plantillas. Esta plantilla incluirá automáticamente las partes de las plantillas header.html y footer.html de la carpeta /parts de tu tema híbrido.
Cuándo elegir Temas Híbridos en lugar de Temas de Bloques
Un tema híbrido puede ser la mejor opción en los siguientes casos:
- Cuando quieras utilizar algunas de las funcionalidades modernas de los Temas de Bloques sin reestructurar completamente un sitio existente.
Los Temas Híbridos te permiten aprovechar las funcionalidades de los bloques, como el editor de bloques, los estilos globales y los patrones de bloques. Los Temas Híbridos también son compatibles con las APIs del editor de bloques, como la API Block Bindings, la API Interactivity y la API HTML. Esto significa que puedes crear sitios web modernos sin tener que pasar por una migración compleja. - Cuando quieras mantener la compatibilidad con plugins o widgets clásicos pero no quieras renunciar a algunas potentes funcionalidades de los Temas de Bloques.
Las versiones antiguas de algunos plugins pueden tener problemas de compatibilidad con los Temas de Bloques, como las versiones antiguas de Contact Form 7, NextGEN Gallery, Custom Post Type UI y otros plugins. Aunque se recomienda actualizar los plugins a las últimas versiones para evitar vulnerabilidades de seguridad, algunos sitios de WordPress pueden tener instaladas versiones antiguas de un plugin. Si aún no estás preparado para actualizar todos tus plugins, puedes plantearte instalar un tema híbrido. - Cuando intentas encontrar el mejor compromiso entre diseño y rendimiento.
Algunos Temas Híbridos populares están optimizados para la velocidad y pueden proporcionar un rendimiento significativamente mejor que los Temas de Bloques. Sin embargo, son compatibles con el enfoque no-code/low-code (no-código/bajo-código) de los Temas de Bloques, proporcionando una mejor experiencia de diseño que los Temas Clásicos. Los Temas Híbridos optimizados para el rendimiento, como Neve o Kadence, te permiten crear sitios web de aspecto moderno sin comprometer el rendimiento. - Cuando quieras una transición suave a FSE.
A veces, la transición de la antigua a la nueva lógica de diseño puede llevar tiempo, especialmente cuando se trabaja en equipo en sitios grandes, y la curva de aprendizaje es una preocupación. Un tema híbrido permite a tu equipo experimentar con la funcionalidad de los bloques mientras mantiene herramientas de diseño familiares como el Personalizador y las plantillas PHP clásicas.
Sin embargo, también hay escenarios en los que los Temas Híbridos no son la mejor opción. Por ejemplo:
- Cuando las herramientas de diseño del sitio tienen prioridad sobre el rendimiento general.
Cuando quieres utilizar algunas funcionalidades específicas de la Edición Completa del Sitio, como el Editor del Sitio, la edición completa de plantillas mediante bloques y la interfaz de Estilos Globales, un tema híbrido no es una opción porque estas funcionalidades no son compatibles o sólo lo son parcialmente en los Temas Híbridos. - Con sitios WordPress headless basados en la API REST de WordPress.
En este caso, son preferibles los Temas de Bloques porque los datos en bloque se exponen fácilmente a través de la API REST (véase, por ejemplo, el endpoint/wp/v2/blocks) o WPGraphQL, mientras que los Temas Híbridos podrían añadir mayor complejidad. - Cuando se prefiere un enfoque sin código para la construcción del sitio.
Los Temas Híbridos no admiten la creación o edición de plantillas a través del editor del sitio. Aunque se puede añadir soporte para partes de plantillas, actualmente este soporte es limitado, y la gestión de plantillas se basa principalmente en PHP.
La conclusión es que no hay una regla rígida y rápida para elegir entre Temas híbridos y de bloques. Depende de muchos factores, como las habilidades disponibles en tu equipo, el tipo de sitio que se está construyendo, los requisitos de rendimiento, la compatibilidad con versiones anteriores y mucho más.
Resumen
La Edición Completa del Sitio y los Temas de Bloques han cambiado radicalmente nuestra forma de crear sitios web de WordPress. La filosofía de bloques da a los usuarios más poder para crear diseños complejos y ajustar cada aspecto de un sitio web.
Pero si aún no estás preparado para dar el salto porque puede que tu sitio no sea totalmente compatible con los Temas de Bloques o porque requiere funcionalidades específicas de un tema clásico, los Temas Híbridos son una opción que te permite tener lo mejor de ambos mundos al permitirte utilizar algunas potentes funcionalidades de los Temas de Bloques manteniendo la compatibilidad con las funcionalidades de los plugins y los Temas Clásicos.
Por no hablar del rendimiento. Los Temas de Bloques pueden consumir muchos recursos debido a la gran cantidad de bloques y al uso de JavaScript. Los Temas Híbridos optimizados para el rendimiento pueden hacer que tu sitio sea más ligero y funcione mejor al reducir la carga de JavaScript necesaria.
