Añádelo como fuente preferida en Google
Con el lanzamiento de WordPress 7.2 en diciembre, se avecina un nuevo tema predeterminado. Rompiendo con la tradición, deja de lado el habitual sistema de nomenclatura basado en el año natural para optar por un nombre más significativo.
Bautizado como Ipsum, este nuevo tema es minimalista, ligero y modular, diseñado para la Edición Completa del Sitio (FSE) y que cumple estrictamente con los estándares modernos del editor de bloques.
Como su nombre indica, Ipsum agiliza la experiencia de escribir en el blog y funciona nada más instalarlo, en cuanto empiezas a escribir. Su diseño es discreto en cada detalle, desde los sutiles subrayados punteados hasta la tipografía incluida y un conjunto cuidadosamente seleccionado de variaciones de estilo, centradas en la accesibilidad y la legibilidad.
Pero no te dejes engañar por su naturaleza minimalista. Ipsum te ofrece el lienzo en blanco ideal para dar vida a tu visión creativa como bloguero. Vamos a sumergirnos en el último tema predeterminado y a explorar cómo sacarle el máximo partido utilizando las funcionalidades nativas de WordPress.
Ipsum: un tema minimalista pensado para la accesibilidad
Ipsum presenta un diseño minimalista enfocado claramente en la legibilidad.
El nuevo tema predeterminado define seis tonos de gris con combinaciones de alto contraste, junto con un único color de acento. El fondo predeterminado (#fcfcfc) y el texto del cuerpo (#000000bf) alcanzan una relación de contraste (CR) de 10,26:1, lo que les permite obtener fácilmente la calificación AAA de las WCAG.
Ipsum es compatible con la navegación por teclado nativa de WordPress y muestra un enlace «Ir al contenido» en cada página. Esto permite a los usuarios que navegan con la tecla Tab saltar directamente al contenido principal sin tener que recorrer los enlaces de navegación del encabezado.
El tema también resalta los enlaces seleccionados con su color de acento, lo que permite a los usuarios del teclado identificar rápidamente el elemento activo.
La tipografía juega un papel fundamental a la hora de hacer que Ipsum resulte agradable a la vista, ya que ofrece cinco tamaños de fuente preestablecidos y es compatible con la tipografía fluida.
Los enlaces solo se distinguen por un sutil subrayado punteado. Aunque encaja con la estética minimalista del tema, esto puede hacer que sean difíciles de detectar, dependiendo de los colores de la página.
Dicho esto, los enlaces siguen siendo fáciles de identificar cuando navegas con el teclado gracias al contorno de selección en color de contraste.
Ahora, vamos a echar un vistazo más de cerca a las funcionalidades específicas de Ipsum.
Plantillas y patrones
Ipsum incluye un conjunto integrado de plantillas que delegan los diseños de página a patrones internos. A modo de ejemplo, aquí tienes el código de la plantilla page.html:
<!-- wp:pattern {"slug":"ipsum/hidden-page"} /-->
Esta única línea de código llama al patrón oculto hidden-page.php, que controla el diseño y establece los metadatos necesarios:
/**
* Title: Pages
* Slug: ipsum/hidden-page
* Template Types: page
* Inserter: no
*
* @package Ipsum
* @since Ipsum 1.0
*/El tema registra variantes de plantillas personalizadas, como index-sidebar y archive-sidebar, directamente a través de PHP para que puedas seleccionarlas en el Editor del sitio.
Por ahora, hay unos 60 patrones disponibles para ayudarte a crear y dar formato a tu contenido.
Aunque algunos de estos patrones están reservados (ocultos) para las plantillas principales del tema, la mayoría son totalmente accesibles para que los uses en tus páginas.
Contenido dinámico con la API de Block Bindings
Un detalle técnico interesante para los desarrolladores es cómo los patrones implementan la API de Block Bindings. Por ejemplo, el patrón archive-full.php utiliza los enlaces de la siguiente manera:
<!-- wp:paragraph
{
"metadata":{
"bindings":{
"content":{
"source":"ipsum/comments-cta"
}
},
"name":"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>"
},
"style":{
"typography":{
"fontStyle":"normal","fontWeight":"600"
}
},
"fontSize":"small","fontFamily":"manrope"
}
-->
<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>
<!-- /wp:paragraph -->
El código fuente subyacente está registrada en el archivo functions.php del tema:
if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :
/**
* Returns the comments call to action for the current post.
*
* @since Ipsum 1.0
* @param array $source_args Block binding source arguments.
* @param WP_Block $block_instance The block instance.
* @return string The call to action text.
*/
function ipsum_comments_cta_binding( $source_args, $block_instance ) {
$post_id = $block_instance->context['postId'] ?? get_the_ID();
if ( get_comments_number( $post_id ) > 0 ) {
$text = __( 'Join the conversation', 'ipsum' );
} else {
$text = __( 'Be the first to comment', 'ipsum' );
}
return '<a href="' . esc_url( get_comments_link( $post_id ) ) . '">' . esc_html( $text ) . '</a>';
}
endif;
if ( ! function_exists( 'ipsum_register_block_bindings' ) ) :
/**
* Registers the comments call-to-action block binding source.
*
* @since Ipsum 1.0
* @return void
*/
function ipsum_register_block_bindings() {
register_block_bindings_source(
'ipsum/comments-cta',
array(
'label' => __( 'Comments call to action', 'ipsum' ),
'get_value_callback' => 'ipsum_comments_cta_binding',
'uses_context' => array( 'postId' ),
)
);
}
endif;
add_action( 'init', 'ipsum_register_block_bindings' );En resumen, la fuente de enlace ipsum/comments-cta devuelve dinámicamente «Únete a la conversación» o «Sé el primero en comentar», dependiendo de si la entrada actual ya tiene comentarios.
Tipografía fluida y plantillas tipográficas
El archivo theme.json de Ipsum registra varias familias tipográficas proporcionadas como fuentes variables en formato .woff2. 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.
Las fuentes se alojan localmente, lo que elimina dependencias de terceros como Google Fonts y te da más control sobre la carga de las fuentes.
El archivo theme.json define tamaños de fuente tanto fijos como variables, que se convierten automáticamente en funciones CSS clamp() dinámicas:
"fontSizes": [
...
{
"fluid": {
"max": "1.75rem",
"min": "1.5rem"
},
"name": "X-Large",
"size": "1.75rem",
"slug": "x-large"
},
{
"fluid": {
"max": "2.1875rem",
"min": "1.625rem"
},
"name": "2X-Large",
"size": "2.1875rem",
"slug": "2-x-large"
}
],Ipsum también incluye cinco configuraciones tipográficas predefinidas que puedes seleccionar directamente desde el panel Estilos Globales del Editor del Sitio.
Cada preajuste anula el array fontFamilies para cambiar las combinaciones de tipografías sin afectar a la combinación de colores activa de tu sitio.
Variaciones de estilo
Las 7 variaciones de Estilos Globales ofrecen diferentes combinaciones de paleta de colores, filtro de duotono predeterminado y tipografía.
Para ver cómo se define una variación de estilo, el código que aparece a continuación registra la variación Golden Hour. Define el filtro en dos tonos Peach on maroon, introduce una nueva paleta de colores y establece la familia tipográfica Manrope para la tipografía general de tu sitio.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Golden Hour",
"settings": {
"color": {
"duotone": [
{
"colors": [
"#7a1000",
"#ffd9bd"
],
"name": "Peach on maroon",
"slug": "duotone-1"
}
],
"palette": [
{
"color": "#7a1000",
"name": "Color 1",
"slug": "theme-1"
},
{
"color": "#ffd9bd",
"name": "Color 2",
"slug": "theme-2"
},
{
"color": "#ff8c52",
"name": "Color 3",
"slug": "theme-3"
},
{
"color": "#ffd9bd40",
"name": "Color 4",
"slug": "theme-4"
},
{
"color": "#ffd9bd1a",
"name": "Color 5",
"slug": "theme-5"
},
{
"color": "#fff1e8",
"name": "Color 6",
"slug": "theme-6"
}
]
},
"custom": {
"controlScheme": "dark"
}
},
"styles": {
"blocks": {
"core/post-featured-image": {
"filter": {
"duotone": "var:preset|duotone|duotone-1"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--manrope)",
"fontStyle": "normal",
"fontWeight": "500"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--manrope)",
"fontStyle": "normal",
"fontWeight": "400"
}
}
}El resto de variaciones de estilo global siguen la misma estructura con diferentes combinaciones de colores y familias tipográficas.
Variaciones de estilo de bloques
Ipsum también incluye variaciones de estilo para algunos bloques. Algunas de estas variaciones se registran mediante archivos JSON almacenados en el directorio styles/blocks/ del tema. Otras variaciones se registran en el archivo de funciones.
Puedes ver y personalizar las variaciones de estilo de los bloques en el panel Estilos Globales del Editor del Sitio, dentro de la sección Bloques y Elementos.
Las variaciones están disponibles en la barra lateral Configuración del Bloque del Editor de Entradas para que puedas aplicarlas a bloques concretos con un solo clic.
Personalizar Ipsum con un tema hijo
La mejor forma de ampliar un tema de WordPress es crear un tema hijo. En el siguiente ejemplo, aprenderás a hacerlo introduciendo un diseño de archivo con cuadrícula asimétrica de Bento sobre Ipsum.
Estos son los pasos que debes seguir:
- Paso 1: Configurar el tema hijo
- Paso 2: Crea el patrón de archivo de Bento
- Paso 3: Crea el patrón de cuadrícula de Bento
- Paso 4: Crea la hoja de estilos de Bento
- Paso 5: Registra la plantilla personalizada
Paso 1: Configura el tema hijo
Primero, crea una nueva carpeta para tu tema hijo en wp-content/themes/, y llámala ipsum-child o algo parecido. Dentro de esta carpeta, añade dos archivos: style.css y functions.php.
El archivo style.css contiene los metadatos que WordPress usa para identificar y gestionar el tema. Empieza añadiendo el siguiente código:
/*
Theme Name: Ipsum Child
Theme URI: https://example.com/
Description: A custom child theme for the Ipsum default theme
Author: Your Name
Author URI: https://example.com
Template: ipsum
Version: 1.0.0
Text Domain: ipsum-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Ipsum usa get_stylesheet_directory_uri() para registrar la hoja de estilos del tema en functions.php. Cuando un tema hijo está activo, esta función apunta al directorio del tema hijo, por lo que WordPress omite la carga de la hoja de estilos del tema padre.
En el caso concreto de Ipsum, para evitar perder el estilo del tema principal, tienes que añadirlo correctamente a la cola dentro del archivo functions de tu tema hijo.
Dicho esto, añade el siguiente código al archivo functions de tu tema hijo:
<?php
/**
* Ipsum Child functions and definitions.
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
if ( ! function_exists( 'ipsum_child_styles' ) ) :
function ipsum_child_styles() {
wp_deregister_style( 'ipsum-style' );
wp_register_style(
'ipsum-style',
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme( get_template() )->get( 'Version' )
);
wp_enqueue_style(
'ipsum-child-style',
get_stylesheet_uri(),
array( 'ipsum-style' ),
wp_get_theme()->get( 'Version' )
);
}
endif;
add_action( 'wp_enqueue_scripts', 'ipsum_child_styles', 20 );El fragmento de código anterior vuelve a registrar el identificador ipsum-style utilizando get_template_directory_uri() para restaurar la hoja de estilos del tema principal. A continuación, añade la hoja de estilos secundaria a la cola justo después de ella.
Una vez configurado el tema hijo, el siguiente paso es crear la plantilla de archivo de cuadrícula de Bento.
Paso 2: Crear el patrón de archivo de Bento
Para mostrar un archivo con el formato de cuadrícula de Bento, vamos a reutilizar código que ya está disponible en el tema principal.
Para la estructura del patrón, usaremos algunos patrones integrados de Ipsum:
archive-photographic.phppara la consulta de la cuadrícula.archive-columns.php: para el título, la fecha, el mensaje de sin resultados y la paginación.hidden-archive.php, para el diseño del contenedor de la plantilla.
Dentro del directorio de tu tema hijo, crea las carpetas patterns/ y templates/ y añade los siguientes archivos:
patterns/archive-bento.phppatterns/hidden-archive-bento.phptemplates/archive.html
La estructura de tu tema hijo ahora debería tener este aspecto:
ipsum-child/
├── style.css
├── functions.php
├── patterns/
│ ├── archive-bento.php
│ └── hidden-archive-bento.php
└── templates/
└── archive.htmlA continuación, copia el código del patrón hidden-archive.php del tema padre y pégalo en el archivo hidden-archive-bento.phpde tu tema hijo. Después, actualiza los metadatos del encabezado, el dominio de texto y la llamada al slug del patrón de la siguiente manera:
<?php
/**
* Title: All Archives Bento
* Slug: ipsum-child/hidden-archive-bento
* Template Types: archive, category, tag
* Inserter: no
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
?>
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","metadata":{"name":"<?php echo esc_html_x( 'Body', 'Group block defining the main content area', 'ipsum-child' ); ?>"},"layout":{"type":"default"}} -->
<main class="wp-block-group"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Section Title', 'Group containing the archive title', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive"} /--></div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"ipsum-child/archive-bento"} /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
<!-- wp:template-part {"slug":"search-bar","className":"sticky-bottom"} /-->Básicamente, hemos adaptado el patrón hidden-archive.php de la página principal a nuestro patrón ipsum-child/hidden-archive-bento.
Paso 3: Crear el patrón Bento
Ahora tenemos que crear el patrón Bento propiamente dicho dentro de patterns/archive-bento.php. En este caso también vamos a aprovechar el código que ya hay en Ipsum.
A continuación tienes el código completo del patrón archive-bento.php, con notas sobre el origen de cada fragmento de código:
<?php
/**
* Title: Archive Bento Grid
* Slug: ipsum-child/archive-bento
* Categories: posts
* Block Types: core/query
* Viewport width: 1280
* Description: A bento grid of posts: one large card, wide and tall cards, and small cards, repeating every ten posts.
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
?>
<?php
/**
* Query Loop
* Origin: archive-columns.php.
* Changed: perPage, name, text domain.
*/
?>
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Bento Grid', 'Name of the Archive Bento Grid query', 'ipsum-child' ); ?>"},"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"bento-grid","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":4}} -->
<?php
/**
* Post Template
* Origin: archive-photographic.php.
* Changed: gap, columns.
* New: class bento-grid.
*/
/** Card
* Origin: hero-colophon.php, cta-membership.php.
* New: name, justifyContent stretch.
*/
?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Bento Card', 'Name of the group holding a bento card', 'ipsum-child' ); ?>"},"className":"is-style-crop-contents","style":{"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"theme-5","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group is-style-crop-contents has-theme-5-background-color has-background" style="border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"sizeSlug":"large"} /-->
<?php
/** Featured image
* Origin: archive-standard.php
* Changed: removed padding.
*/
?>
<?php
/** Title and Meta
* Origin: archive-columns.php.
* Changed: removed selfStretch, gap.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Title and Meta', 'Name of the group holding the post title and meta', 'ipsum-child' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
<?php
/**
* Post Title and Post Date
* Origin: archive-columns.php.
*/ ?>
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<?php
/** No results
* Origin: archive-columns.php.
* Changed: text domain only.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'No Results Wrapper', 'Name of the group shown when a query has no results', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p><?php esc_html_e( 'No posts have been published in this section yet.', 'ipsum-child' ); ?></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:group -->
<?php
/**
* Pagination
* Origin: archive-columns.php.
* Changed: text domain only.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pagination Wrapper', 'Name of the group wrapping the pagination', 'ipsum-child' ); ?>"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query -->
En el código anterior, hemos reutilizado y recombinado los bloques de construcción integrados que ofrece Ipsum.
Estos son los principales cambios:
- Bloque de consulta: En el bucle de consulta, hemos actualizado el parámetro
perPagea10. Esto es fundamental para la representación visual de la cuadrícula de Bento, ya que las reglas CSS del siguiente paso se aplican a un ciclo repetitivo de 10 elementos (10n) y repiten dinámicamente una secuencia alterna de tarjetas grandes, anchas, altas y compactas. - Bloque Plantilla de entrada: Hemos añadido la clase CSS personalizada
bento-gridpara controlar la cuadrícula mediante CSS y aplicar el diseño asimétrico. - Bloque Grupo: El bloque Grupo utiliza un diseño flex vertical, mientras que el CSS configura cada tarjeta para que ocupe su área de la cuadrícula y permite que la imagen destacada se expanda dentro del espacio disponible.
- Dominio de texto: Se han actualizado todas las cadenas para que utilicen el dominio de texto
ipsum-child.
Con estos cambios, la estructura de bloques del patrón está completa. Ahora solo tenemos que definir las propiedades CSS que darán forma a su diseño visual.
Paso 4: Crea la hoja de estilos de Bento
Abre el archivo style.css del tema hijo y pega el siguiente código:
.bento-grid {
grid-auto-flow: dense;
grid-auto-rows: minmax(18rem, auto);
}
.bento-grid > li:nth-child(10n + 1) {
grid-column: span 2;
grid-row: span 2;
}
.bento-grid > li:nth-child(10n + 6) {
grid-column: span 2;
}
.bento-grid > li:nth-child(10n + 7),
.bento-grid > li:nth-child(10n + 8) {
grid-row: span 2;
}
.bento-grid > li > .wp-block-group {
height: 100%;
}
.bento-grid .wp-block-post-featured-image {
position: relative;
flex: 1 1 0;
min-height: 8rem;
margin: 0;
}
.bento-grid .wp-block-post-featured-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 781px) {
.bento-grid.is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento-grid > li:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
.bento-grid > li:nth-child(10n + 1),
.bento-grid > li:nth-child(10n + 6) {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.bento-grid.is-layout-grid {
grid-template-columns: minmax(0, 1fr);
}
.bento-grid > li:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
}Aquí tienes un desglose de esta hoja de estilo:
grid-auto-flow: dense: habilita el empaquetamiento denso en CSS Grid. Cada fila de la cuadrícula tiene una altura mínima de18rem..bento-grid > li:nth-child(10n + 1): El patrón de cuadrícula se basa en un ciclo de 10 entradas (10n). El primer elemento del bucle (10n + 1) se convierte en la tarjeta principal, que ocupa 2 columnas y 2 filas.li:nth-child(10n + 6): La sexta entrada ocupa dos columnas. La séptima y la octava entrada ocupan cada una dos filas..wp-block-post-featured-image img: La imagen destacada se coloca de forma absoluta dentro de un contenedor flex con base cero (flex: 1 1 0) yobject-fit: cover. Esto garantiza que la imagen se adapte perfectamente a la fila de la cuadrícula.
Las consultas de medios redefinen el número de columnas de la cuadrícula para pantallas más pequeñas.
Paso 5: Registra la plantilla personalizada
A continuación, abre templates/archive.html y añade el siguiente código:
<!-- wp:pattern {"slug":"ipsum-child/hidden-archive-bento"} /-->
El nombre del archivo templates/archive.html sigue la jerarquía estándar de plantillas de WordPress y anula la plantilla de archivo predeterminada del tema principal cuando no hay ninguna plantilla más específica que tenga prioridad.
Si también quieres cambiar el diseño de la página de índice, solo tienes que copiar el mismo código en un archivo templates/index.html.
El código que hay dentro simplemente recurre al patrón de contenedor hidden-archive-bento, lo que mantiene la estructura de la plantilla limpia y modular.
Es hora de probarlo. Sube tu tema hijo y actívalo. Después, pasa a la siguiente sección.
El resultado
Tus plantillas ya están listas para usarlas en los archivos de tu sitio web. También puedes añadir el patrón Bento a páginas estáticas, estableciendo inherit en false y configurando los parámetros de consulta necesarios, si hace falta.
Como ya hemos dicho, para aplicar el mismo diseño a la página de inicio del sitio, también tendrás que crear un archivo templates/index.html con la misma referencia al patrón.
La imagen final muestra la página de inicio de nuestro sitio staging con un atractivo diseño en cuadrícula Bento.
Un tema ligero y accesible
Ipsum combina las modernas funcionalidades de edición de WordPress, patrones reutilizables y opciones de estilo flexibles en un diseño deliberadamente minimalista. Una vez que entiendas cómo encajan sus patrones y plantillas, podrás ampliar el tema mucho más allá de sus diseños predeterminados para blogs. La cuadrícula Bento que se muestra en esta guía es solo un ejemplo de lo que puedes crear con un tema hijo basado en Ipsum.
Si la velocidad y el rendimiento son tus principales prioridades, recuerda que el código es solo la mitad de la ecuación. Los sitios web rápidos también dependen del almacenamiento en caché, las optimizaciones, la configuración del sitio y la infraestructura de alojamiento. Echa un vistazo a nuestros planes y encuentra el que mejor se adapte a las necesidades de tu sitio.
