{"id":85630,"date":"2026-11-09T08:24:51","date_gmt":"2026-11-09T07:24:51","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=85630&preview=true&preview_id=85630"},"modified":"2026-11-12T11:53:55","modified_gmt":"2026-11-12T10:53:55","slug":"tema-ipsum-para-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tema-ipsum-para-wordpress\/","title":{"rendered":"Descubre el tema Ipsum para WordPress y c\u00f3mo ampliarlo"},"content":{"rendered":"

Con el lanzamiento de WordPress 7.2 en diciembre, se avecina un nuevo tema predeterminado. Rompiendo con la tradici\u00f3n, deja de lado el habitual sistema de nomenclatura basado en el a\u00f1o natural para optar por un nombre m\u00e1s significativo.<\/p>\n

Bautizado como Ipsum<\/a>, este nuevo tema es minimalista, ligero y modular, dise\u00f1ado para la Edici\u00f3n Completa del Sitio<\/a> (FSE) y que cumple estrictamente con los est\u00e1ndares modernos del editor de bloques.<\/p>\n

Como su nombre indica, Ipsum<\/strong> agiliza la experiencia de escribir en el blog y funciona nada m\u00e1s instalarlo, en cuanto empiezas a escribir. Su dise\u00f1o es discreto en cada detalle, desde los sutiles subrayados punteados hasta la tipograf\u00eda incluida y un conjunto cuidadosamente seleccionado de variaciones de estilo<\/a>, centradas en la accesibilidad y la legibilidad.<\/p>\n

Pero no te dejes enga\u00f1ar por su naturaleza minimalista. Ipsum te ofrece el lienzo en blanco ideal para dar vida a tu visi\u00f3n creativa como bloguero. Vamos a sumergirnos en el \u00faltimo tema predeterminado y a explorar c\u00f3mo sacarle el m\u00e1ximo partido utilizando las funcionalidades nativas de WordPress.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Ipsum: un tema minimalista pensado para la accesibilidad<\/h2>\n

Ipsum<\/a> presenta un dise\u00f1o minimalista enfocado claramente en la legibilidad.<\/p>\n

\"Vista
Vista previa de una entrada individual creada con el tema Ipsum.<\/figcaption><\/figure>\n

El nuevo tema predeterminado define seis tonos de gris con combinaciones de alto contraste, junto con un \u00fanico color de acento. El fondo predeterminado (#fcfcfc<\/code>) y el texto del cuerpo (#000000bf<\/code>) alcanzan una relaci\u00f3n de contraste<\/a> (CR) de 10,26:1, lo que les permite obtener f\u00e1cilmente la calificaci\u00f3n AAA de las WCAG.<\/p>\n

\"Encabezados,
Encabezados, citas y bloques de tablas en el tema Ipsum.<\/figcaption><\/figure>\n

Ipsum es compatible con la navegaci\u00f3n por teclado nativa de WordPress y muestra un enlace \u00abIr al contenido\u00bb en cada p\u00e1gina. Esto permite a los usuarios que navegan con la tecla Tab saltar directamente al contenido principal sin tener que recorrer los enlaces de navegaci\u00f3n del encabezado.<\/p>\n

\"Enlace
Enlace para ir directamente al contenido en el tema Ipsum.<\/figcaption><\/figure>\n

El tema tambi\u00e9n resalta los enlaces seleccionados con su color de acento, lo que permite a los usuarios del teclado identificar r\u00e1pidamente el elemento activo.<\/p>\n

\"Un
Un encabezado en forma de acorde\u00f3n resaltado durante la navegaci\u00f3n con el teclado.<\/figcaption><\/figure>\n

La tipograf\u00eda juega un papel fundamental a la hora de hacer que Ipsum resulte agradable a la vista, ya que ofrece cinco tama\u00f1os de fuente preestablecidos y es compatible con la tipograf\u00eda fluida<\/a>.<\/p>\n

\"Una
Una vista previa de las familias tipogr\u00e1ficas de Ipsum en WordPress 7.2.<\/figcaption><\/figure>\n

Los enlaces solo se distinguen por un sutil subrayado punteado. Aunque encaja con la est\u00e9tica minimalista del tema, esto puede hacer que sean dif\u00edciles de detectar, dependiendo de los colores de la p\u00e1gina.<\/p>\n

Dicho esto, los enlaces siguen siendo f\u00e1ciles de identificar cuando navegas con el teclado gracias al contorno de selecci\u00f3n en color de contraste.<\/p>\n

\"Enlaces
Enlaces claramente resaltados durante la navegaci\u00f3n con el teclado en el tema Ipsum.<\/figcaption><\/figure>\n

Ahora, vamos a echar un vistazo m\u00e1s de cerca a las funcionalidades espec\u00edficas de Ipsum.<\/p>\n

Plantillas y patrones<\/h2>\n

Ipsum incluye un conjunto integrado de plantillas<\/a> que delegan los dise\u00f1os de p\u00e1gina a patrones internos. A modo de ejemplo, aqu\u00ed tienes el c\u00f3digo de la plantilla page.html<\/code>:<\/p>\n

<!-- wp:pattern {\"slug\":\"ipsum\/hidden-page\"} \/-->\n<\/code><\/pre>\n
Esta \u00fanica l\u00ednea de c\u00f3digo llama al patr\u00f3n oculto hidden-page.php<\/code>, que controla el dise\u00f1o y establece los metadatos necesarios:<\/p>\n
\/**\n * Title: Pages\n * Slug: ipsum\/hidden-page\n * Template Types: page\n * Inserter: no\n *\n * @package Ipsum\n * @since Ipsum 1.0\n *\/<\/code><\/pre>\n
El tema registra variantes de plantillas personalizadas, como index-sidebar<\/code> y archive-sidebar<\/code>, directamente a trav\u00e9s de PHP para que puedas seleccionarlas en el Editor del sitio.<\/p>\n
\"Una
Puedes configurar la plantilla de la p\u00e1gina en el editor de entradas.<\/figcaption><\/figure>\n
Por ahora, hay unos 60 patrones disponibles para ayudarte a crear y dar formato a tu contenido.<\/p>\n
\"Explorando
Explorando patrones en el Editor del Sitio.<\/figcaption><\/figure>\n
Aunque algunos de estos patrones est\u00e1n reservados (ocultos) para las plantillas principales del tema, la mayor\u00eda son totalmente accesibles para que los uses en tus p\u00e1ginas.<\/p>\n
Contenido din\u00e1mico con la API de Block Bindings<\/h3>\n
Un detalle t\u00e9cnico interesante para los desarrolladores es c\u00f3mo los patrones implementan la API de Block Bindings<\/a>. Por ejemplo, el patr\u00f3n archive-full.php<\/code> utiliza los enlaces de la siguiente manera:<\/p>\n
<!-- wp:paragraph \n{\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"ipsum\/comments-cta\"\n\t\t\t}\n\t\t},\n\t\t\"name\":\"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>\"\n\t},\n\t\"style\":{\n\t\t\"typography\":{\n\t\t\t\"fontStyle\":\"normal\",\"fontWeight\":\"600\"\n\t\t}\n\t},\n\t\"fontSize\":\"small\",\"fontFamily\":\"manrope\"\n} \n-->\n<p class=\"has-manrope-font-family has-small-font-size\" style=\"font-style:normal;font-weight:600\"><?php esc_html_e( 'Join the conversation', 'ipsum' ); ?><\/p>\n<!-- \/wp:paragraph -->\n<\/code><\/pre>\n
\n
El c\u00f3digo fuente subyacente est\u00e1 registrada en el archivo functions.php<\/code> del tema:<\/p>\n<\/div>\n
if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :\n\t\/**\n\t * Returns the comments call to action for the current post.\n\t *\n\t * @since Ipsum 1.0\n\t * @param array    $source_args    Block binding source arguments.\n\t * @param WP_Block $block_instance The block instance.\n\t * @return string The call to action text.\n\t *\/\n\tfunction ipsum_comments_cta_binding( $source_args, $block_instance ) {\n\t\t$post_id = $block_instance->context['postId'] ?? get_the_ID();\n\n\t\tif ( get_comments_number( $post_id ) > 0 ) {\n\t\t\t$text = __( 'Join the conversation', 'ipsum' );\n\t\t} else {\n\t\t\t$text = __( 'Be the first to comment', 'ipsum' );\n\t\t}\n\n\t\treturn '<a href=\"' . esc_url( get_comments_link( $post_id ) ) . '\">' . esc_html( $text ) . '<\/a>';\n\t}\nendif;\n\nif ( ! function_exists( 'ipsum_register_block_bindings' ) ) :\n\t\/**\n\t * Registers the comments call-to-action block binding source.\n\t *\n\t * @since Ipsum 1.0\n\t * @return void\n\t *\/\n\tfunction ipsum_register_block_bindings() {\n\t\tregister_block_bindings_source(\n\t\t\t'ipsum\/comments-cta',\n\t\t\tarray(\n\t\t\t\t'label'              => __( 'Comments call to action', 'ipsum' ),\n\t\t\t\t'get_value_callback' => 'ipsum_comments_cta_binding',\n\t\t\t\t'uses_context'       => array( 'postId' ),\n\t\t\t)\n\t\t);\n\t}\nendif;\nadd_action( 'init', 'ipsum_register_block_bindings' );<\/code><\/pre>\n
En resumen, la fuente de enlace ipsum\/comments-cta<\/code> devuelve din\u00e1micamente \u00ab\u00danete a la conversaci\u00f3n\u00bb o \u00abS\u00e9 el primero en comentar\u00bb, dependiendo de si la entrada actual ya tiene comentarios.<\/p>\n
Tipograf\u00eda fluida y plantillas tipogr\u00e1ficas<\/h2>\n
El archivo theme.json<\/code>\u00a0de Ipsum registra varias familias tipogr\u00e1ficas proporcionadas como fuentes variables<\/a> en formato .woff2<\/code>. Entre ellas hay fuentes sans-serif (Manrope, Inter, Archivo, Archivo Condensed), serif (Besley, STIX Two Text) y monoespaciadas (JetBrains Mono), siendo Inter la fuente predeterminada para el cuerpo del texto.<\/p>\n
\"Ipsum
Ipsum usa JetBrains Mono para dar estilo al c\u00f3digo.<\/figcaption><\/figure>\n
Las fuentes se alojan localmente, lo que elimina dependencias de terceros como Google Fonts<\/a> y te da m\u00e1s control sobre la carga de las fuentes.<\/p>\n
El archivo theme.json<\/code> define tama\u00f1os de fuente tanto fijos como variables, que se convierten autom\u00e1ticamente en funciones CSS clamp()<\/code><\/a>\u00a0din\u00e1micas:<\/p>\n
\"fontSizes\": [\n\t...\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"1.75rem\",\n\t\t\t\"min\": \"1.5rem\"\n\t\t},\n\t\t\"name\": \"X-Large\",\n\t\t\"size\": \"1.75rem\",\n\t\t\"slug\": \"x-large\"\n\t},\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"2.1875rem\",\n\t\t\t\"min\": \"1.625rem\"\n\t\t},\n\t\t\"name\": \"2X-Large\",\n\t\t\"size\": \"2.1875rem\",\n\t\t\"slug\": \"2-x-large\"\n\t}\n],<\/code><\/pre>\n
Ipsum tambi\u00e9n incluye cinco configuraciones tipogr\u00e1ficas predefinidas que puedes seleccionar directamente desde el panel Estilos Globales del Editor del Sitio.<\/p>\n
Cada preajuste anula el array fontFamilies<\/code> para cambiar las combinaciones de tipograf\u00edas sin afectar a la combinaci\u00f3n de colores activa de tu sitio.<\/p>\n
\"Preajustes
Preajustes tipogr\u00e1ficos de Ipsum en el Editor del Sitio.<\/figcaption><\/figure>\n
Variaciones de estilo<\/h2>\n
Las 7 variaciones de Estilos Globales<\/a> ofrecen diferentes combinaciones de paleta de colores, filtro de duotono predeterminado y tipograf\u00eda.<\/p>\n
\"Una
Panel de estilos globales de Ipsum en el Editor de sitios de WordPress.<\/figcaption><\/figure>\n
Para ver c\u00f3mo se define una variaci\u00f3n de estilo, el c\u00f3digo que aparece a continuaci\u00f3n registra la variaci\u00f3n Golden Hour<\/b>. Define el filtro en dos tonos Peach on maroon<\/b>, introduce una nueva paleta de colores y establece la familia tipogr\u00e1fica Manrope<\/b> para la tipograf\u00eda general de tu sitio.<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"title\": \"Golden Hour\",\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#7a1000\",\n\t\t\t\t\t\t\"#ffd9bd\"\n\t\t\t\t\t],\n\t\t\t\t\t\"name\": \"Peach on maroon\",\n\t\t\t\t\t\"slug\": \"duotone-1\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#7a1000\",\n\t\t\t\t\t\"name\": \"Color 1\",\n\t\t\t\t\t\"slug\": \"theme-1\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd\",\n\t\t\t\t\t\"name\": \"Color 2\",\n\t\t\t\t\t\"slug\": \"theme-2\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ff8c52\",\n\t\t\t\t\t\"name\": \"Color 3\",\n\t\t\t\t\t\"slug\": \"theme-3\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd40\",\n\t\t\t\t\t\"name\": \"Color 4\",\n\t\t\t\t\t\"slug\": \"theme-4\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd1a\",\n\t\t\t\t\t\"name\": \"Color 5\",\n\t\t\t\t\t\"slug\": \"theme-5\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#fff1e8\",\n\t\t\t\t\t\"name\": \"Color 6\",\n\t\t\t\t\t\"slug\": \"theme-6\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t\"custom\": {\n\t\t\t\"controlScheme\": \"dark\"\n\t\t}\n\t},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-featured-image\": {\n\t\t\t\t\"filter\": {\n\t\t\t\t\t\"duotone\": \"var:preset|duotone|duotone-1\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"elements\": {\n\t\t\t\"heading\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\"fontWeight\": \"500\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\"fontWeight\": \"400\"\n\t\t}\n\t}\n}<\/code><\/pre>\n
El resto de variaciones de estilo global siguen la misma estructura con diferentes combinaciones de colores y familias tipogr\u00e1ficas.<\/p>\n
Variaciones de estilo de bloques<\/h3>\n
Ipsum tambi\u00e9n incluye variaciones de estilo para algunos bloques. Algunas de estas variaciones se registran mediante archivos JSON almacenados en el directorio styles\/blocks\/<\/code> del tema. Otras variaciones se registran en el archivo de funciones.<\/p>\n
Puedes ver y personalizar las variaciones de estilo de los bloques en el panel Estilos Globales del Editor del Sitio, dentro de la secci\u00f3n Bloques y Elementos<\/strong>.<\/p>\n
\"Una
Variaciones de estilo del bloque P\u00e1rrafo en el panel Estilos Globales del Editor del Sitio.<\/figcaption><\/figure>\n
Las variaciones est\u00e1n disponibles en la barra lateral Configuraci\u00f3n del Bloque del Editor de Entradas para que puedas aplicarlas a bloques concretos con un solo clic.<\/p>\n
\"Una
Aplicando variaciones de estilo de bloque desde la barra lateral de configuraci\u00f3n del bloque.<\/figcaption><\/figure>\n
Personalizar Ipsum con un tema hijo<\/h2>\n
La mejor forma de ampliar un tema de WordPress es crear un tema hijo<\/a>. En el siguiente ejemplo, aprender\u00e1s a hacerlo introduciendo un dise\u00f1o de archivo con cuadr\u00edcula asim\u00e9trica de Bento sobre Ipsum.<\/p>\n
Estos son los pasos que debes seguir:<\/p>\n