Twenty Twenty-One es el nuevo tema por defecto de WordPress que viene con WordPress 5.6. Si estás esperando un tema de WordPress completo, puede que te decepciones un poco.

Twenty Twenty-One es un tema minimalista que se ve y actúa como un lienzo en blanco altamente personalizable. Al igual que sus predecesores, el nuevo tema por defecto se basará principalmente en el Editor de Bloques para la construcción de páginas.

En este post, repasaremos las características más interesantes del tema Twenty Twenty-One y te mostraremos cómo personalizar el aspecto de un sitio web de WordPress con un simple child theme (tema hijo) de Twenty Twenty-One.

¿Listo? ¡Vamos a sumergirnos en el tema!

Twenty Twenty-One

Avance del tema Twenty Twenty-One (Fuente de la imagen: Make WordPress Core)

Un Primer Vistazo al Tema de WordPress Twenty Twenty-One

Al igual que Twenty Twenty, el nuevo tema por defecto que viene con WordPress 5.6 no está construido desde cero, sino que está basado en un tema que viene de la comunidad.

Twenty Twenty-One ha sido desarrollado sobre un nuevo tema de Automattic, el tema Seedlet, que proporciona una estructura limpia y bien ordenada de propiedades personalizadas CSS anidadas. Debido al gran uso de las propiedades CSS en la hoja de estilo del tema, la construcción de child themes sobre el Twenty Twenty-One es rápida y fácil.

El tema de Seedlet WordPress

El tema de Seedlet WordPress

Twenty Twenty-One es un tema de WordPress muy accesible y minimalista con una sola columna, una barra lateral al pie y dos ubicaciones de menú: Navegación principal y navegación a pie de página.

El nuevo tema utiliza una pila de fuentes del sistema. Esto debería tener varios beneficios tanto para los usuarios como para los desarrolladores:

El tema Twenty Twenty-One utiliza una paleta de colores minimalista basada en colores de fondo verde pastel y dos tonos de gris como colores de primer plano. El tema proporciona varias paletas de color pastel adicionales.

En este punto, Mel Choyse-Dwan, Jefe de Diseño de los Temas por Defecto, explica:

Agruparemos el tema con algunas paletas de color adicionales, incluyendo un esquema de color blanco y negro. ¿Por qué verde pastel? Los pasteles y los colores apagados están muy de moda ahora mismo.

Twenty Twenty-One colores

Colores de Twenty Twenty-One (Fuente de la imagen: Make WordPress Core)

Twenty Twenty-One es el nuevo tema por defecto de WordPress que viene con WordPress 5.6! 👁‍🗨 Conoce todas sus características principales en esta guía en profundidad!Click to Tweet

Cómo Instalar Twenty Twenty-One

En el momento de escribir este documento, el Twenty Twenty-One está en desarrollo activo y aún no está disponible para su descarga en el Directorio de Temas de WordPress. Pero puedes conseguir una versión en progreso del tema en Github.

El repositorio Github quedará obsoleto una vez que el tema se fusione con el núcleo, y lo encontrarás en el Directorio de Temas. Como Twenty Twenty-One sigue el calendario de lanzamiento de WordPress 5.6, puede que quieras guardar las siguientes fechas:

Para poner en marcha el tema Twenty Twenty-One, sigue estos pasos:

  1. Consigue el paquete zip de GitHub.
  2. Sube el paquete a tu instalación de desarrollo desde el panel de control de WordPress o a través de SFTP.
  3. Navega hasta Apariencia → Temas y haz clic en el botón Activar en la imagen de vista previa del tema.
  4. Ir a Apariencia → Personalizar para configurar Twenty Twenty-One.

Ahora puedes empezar a hacer tus pruebas en un sitio web staging o en tu entorno local.

dark mode issue

Twenty Twenty-One Número #620 en Github

¿No estás listo para hacer tus pruebas?

No te preocupes, hemos diseccionado el tema y te mostraremos lo que puedes esperar del Twenty Twenty-One.

Las Características del Tema y el Bloque de Twenty Twenty-One

Al igual que el Twenty Twenty, el nuevo tema por defecto de WordPress no es un tema con todas las características, sino que es un tema minimalista que se basa en el editor de bloques para la construcción de páginas. El tema también tiene como objetivo proporcionar una gran accesibilidad. En palabras de Mel Choyce-Dwan:

Por último, nos encantaría que el tema cumpliera con las directrices relevantes del WCAG 2.1 nivel AAA. Nos encantó la idea cuando +make.wordpress.org/accessibility/ la planteó, y apreciaríamos cualquier y toda la orientación de nuestra comunidad a11y expertos para ayudar a hacer esto posible.

El tema soporta un buen número de características de tema y de bloque, entre las que se incluyen las siguientes:

Características del tema:

Características del bloque:

La siguiente lista incluye las características que pueden ser más relevantes cuando se construye un sitio web basado en el Twenty Twenty-One.

Menús de Navegación

Twenty Twenty-One soporta dos ubicaciones de menús, la Navegación Primaria, ubicada en la esquina superior derecha del encabezado, y la Navegación de Pie de Página.

Twenty Twenty-One lugares del menú

Twenty Twenty-One ubicaciones del menú

Si se añade al menú de pie de página, los enlaces sociales se detectan automáticamente y se convierten en iconos SVG para los medios sociales soportados.

Iconos sociales

Menú social Twenty Twenty-One

Formato de los Posts

Twenty Twenty-One soporta nueve formatos de posts (entradas): enlace, aparte, galería, imagen, cita, estado, video, audio, chat. Puedes elegir el formato de publicación en el panel de Estado y Visibilidad de la configuración del editor.

formatos de publicación

Twenty Twenty-One soporta nueve formatos de posts

Para ver cómo el tema Twenty Twenty-One maneja los formatos de los posts, navega a la carpeta de plantillas-partes-exteriores y elige la plantilla. Por ejemplo, abre el archivo excerpt-image.php en tu editor de código favorito. En ese archivo verás el siguiente código:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

El código se explica por sí mismo, pero vamos a mirar más de cerca:

Así, si un visitante de un sitio requiere un archivo de posts del formato ‘imagen’, WordPress mostrará una imagen en la parte superior para cada post del archivo. Siguiendo la misma lógica, puedes sumergirte en cualquier formato de post comprobando las partes correspondientes de la plantilla.

Identidad del sitio y Logotipo Personalizado

Twenty Twenty-One proporciona soporte para un logo personalizado de 300×100 px. Puedes encontrar la configuración del logo personalizado en el panel de Identidad del Sitio.

Identidad del sitio en el Twenty Twenty-One

Identidad del sitio en el Twenty Twenty-One

Esta pantalla incluye:

Tamaños de las Fuentes del Editor

Twenty Twenty-One soporta los siguientes tamaños de letra:

En la hoja de estilo del tema, los tamaños se establecen en unidades rem.

Twenty Twenty-One soporta siete tamaños de letra

Twenty Twenty-One soporta siete tamaños de letra

Ajustes de Colores

El Personalizador de Temas proporciona un panel de Colores y Modo Oscuro que incluye dos opciones:

La imagen de abajo muestra un color de fondo amarillo claro con un texto gris oscuro.

Colores y ajustes del Modo Oscuro

Colores y ajustes del Modo Oscuro en el Twenty Twenty-One

El color de fondo es por defecto un verde pastel ('#d1e4dd'), pero los administradores del sitio pueden cambiar fácilmente entre las siguientes alternativas de colores de fondo:

Los mismos colores están disponibles como paletas de colores de bloque en la configuración de bloque del editor.

Además, Twenty Twenty-One soporta varios preajustes de gradiente para los bloques que soportan esta característica. La imagen de abajo muestra los gradientes predeterminados en los ajustes del bloque Columnas.

ajustes de gradiente

Ocho ajustes de gradiente en los ajustes de color de un bloque

Desde el punto de vista de la accesibilidad, la compatibilidad con el Modo Oscuro es una novedad absoluta para un tema por defecto.

¡Vamos a sumergirnos un poco más!

Soporte del Modo Oscuro en el Tema Twenty Twenty-One

Después de una discusión en el canal Slack de #core-themes, Mel Choyce-Dwan introdujo el soporte del Modo Oscuro para el Twenty Twenty-One.

Habilitando el modo oscuro en macOS

Habilitando el modo oscuro en macOS

Al principio, no estaba claro cómo se podría haber implementado esta función en Twenty Twenty-One si se hubiera incorporado como una función del tema o como un proyecto separado incluido en un plugin.

Había cinco opciones posibles para elegir:

Después de una discusión profunda, el Modo Oscuro se añadió al tema. Ahora:

Modo oscuro activado en el Personalizador y desactivado en la página web principal

Modo oscuro activado en Personalización y desactivado en la página web principal

Incluso si el Modo Oscuro se considera una mejora de accesibilidad, no es obvio que las páginas de tu sitio sean más accesibles en todos los contextos.

Las mayores preocupaciones están relacionados con los logotipos oscuros y las imágenes transparentes. Cambiar de una plantilla de luz por defecto a un color de fondo oscuro podría causar problemas de legibilidad que pueden disminuir la usabilidad y arruinar la apariencia de tu sitio web.

Por ejemplo, un logotipo oscuro sobre un fondo claro puede desaparecer por completo si tus lectores habilitan el Modo Oscuro en su lado. Preocupaciones similares se relacionan con el brillo y el contraste de la imagen y la opacidad de los bordes, divisores y separadores.

Por esta razón, si  estás planeando proporcionar soporte de Modo Oscuro para tu sitio web, también debes tener en cuenta cómo se verá tu sitio web con un fondo oscuro.

Modo oscuro habilitado en el Personalizador y habilitado en el sitio frontal

Modo oscuro habilitado en Personalizador y habilitado en el sitio frontal

Los colaboradores del tema son conscientes de estas cuestiones y el debate continúa en Github. Para tener una visión más cercana de los temas de usabilidad del Modo Oscuro y una oportunidad de involucrarse en la discusión, revisa la lista completa de temas en Github.

Las preferencias del Modo Oscuro se almacenan en el LocalStorage y se pueden ver en las herramientas de desarrollo del navegador.

En Google Chrome, inicia Chrome WebTools y haz clic en la pestaña Aplicación. Busca la sección Almacenamiento y amplía el menú Almacenamiento local.

Preferencias de usuario del Modo Oscuro en el almacenamiento local del Brave Browser

Preferencias de usuario del Modo Oscuro en el almacenamiento local del Brave Browser

Para ser honesto, el Modo Oscuro no es algo común en el contexto de los sitios web de hoy en día. Sin embargo, como el nuevo tema predeterminado de WordPress ahora soporta el modo oscuro, podríamos esperar un cambio en esta área específica de accesibilidad, ya que WordPress es el software CMS más utilizado.

Los desarrolladores que quieran profundizar en el tema de la tecnología no deberían perderse esta guía sobre el modo oscuro en la web.

Estilos y Propiedades CSS Personalizadas

Dicho esto, es hora de explorar las características más interesantes de Twenty Twenty-One para los desarrolladores de temas.

Comencemos con las Propiedades Personalizadas de CSS.

Como se mencionó anteriormente, Twenty Twenty-One está basado en Seedlet, un tema de dos columnas, con una barra lateral al pie de página y tres ubicaciones de menú. El estilo de Seedlet está completamente basado en las propiedades personalizadas de CSS y esto facilita a los desarrolladores de temas y a los usuarios avanzados la construcción de child themes sobre el tema de Automattic.

Lo mismo ocurre con el Twenty Twenty-One. El nuevo tema por defecto viene con un diseño de una sola columna, una barra lateral al pie de página y dos ubicaciones de menú. La hoja de estilos refleja el sistema de propiedades personalizadas anidadas que proporciona Seedlet y esto hace del Twenty Twenty-One un lienzo perfecto para construir temas hijos y sitios web altamente personalizados.

Las propiedades personalizadas de CSS (también conocidas como variables CSS) son entidades especiales que contienen valores específicos que pueden ser reutilizados en cualquier parte de tu hoja de estilo.

Por lo tanto, si necesitas cambiar un acento de color específico en tu documento, no necesitas realizar una búsqueda global para encontrar cualquier ocurrencia de ese color en toda la hoja de estilo. Solo necesitas establecer un valor de propiedad diferente dentro del bloque :root.

Propiedades personalizadas del CSS en Twenty Twenty-One

Propiedades personalizadas del CSS en Twenty Twenty-One

Como ejemplo de personalización simple, digamos que quieres establecer un color de fondo personalizado. No necesitas construir un child theme para eso. Solo necesitas incluir dos declaraciones CSS en el editor de código del panel de CSS adicional:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
CSS personalizado

CSS personalizado en Personalización de Twenty Twenty-One

Las propiedades personalizadas de CSS son seguras de usar, ya que son soportadas por todos los principales navegadores, como se muestra en la siguiente imagen de Can I Use:

Las propiedades personalizadas de CSS son soportadas por la mayoría de los navegadores web modernos

Las propiedades personalizadas de CSS son soportadas por la mayoría de los navegadores web modernos

Si quieres profundizar en las propiedades personalizadas de CSS, revisa la documentación de MDN.

Patrones de Bloques de Twenty Twenty-One

Twenty Twenty-One ofrece varios patrones para el Editor de Bloques. En un post anterior del blog, definimos los patrones de bloque como disposiciones de bloque predefinidas que permiten a los usuarios añadir rápidamente estructuras complejas de bloques anidados a sus páginas.

WordPress 5.5 introdujo un puñado de patrones de bloque y muchos más deberían venir con WordPress 5.6. Además, Twenty Twenty-One viene con su propio conjunto de patrones de bloque.

En Twenty Twenty-One, los patrones de bloque se definen en el archivo inc/block-patterns.php. Twenty Twenty-One patrones varían desde patrones simples como el patrón de Texto Grande, que contiene un solo elemento H2, hasta patrones más complejos, como Imágenes y Texto Superpuestos y Medios y Título de Artículo de Texto.

Patrón de bloqueo del título de los medios y del artículo de texto en el Twenty Twenty-One

Patrón de bloque del título de los medios y del artículo de texto en el Twenty Twenty-One

Actualmente, el tema proporciona los siguientes patrones:

Las imágenes superpuestas bloquean el patrón en el Twenty Twenty-One

Las imágenes superpuestas del patrón de bloque en el Twenty Twenty-One

La disponibilidad de tantos patrones de bloques es genial tanto para los usuarios como para los desarrolladores. Los usuarios podrán añadir rápida y fácilmente bloques complejos de código a sus publicaciones y páginas, los desarrolladores pueden utilizar esos patrones como plantillas útiles sobre las que construir cuando codifiquen los suyos.

El Experimento de Twenty Twenty-One Blocks

Twenty Twenty-One Blocks es una versión experimental del tema Twenty Twenty-One. Su propósito es compartir y mantener a todos actualizados sobre lo que está pasando en el experimento de edición del sitio completo, dando a todos la oportunidad de sumergirse en las nuevas características del FSE antes de que formen parte del núcleo de WordPress.

Es poco probable que veamos esta versión experimental fusionada en el núcleo con WordPress 5.6. Según Carolina Nymark,

El tema necesitará que Gutenberg y el experimento de la edición completa del sitio estén activados. No será parte del núcleo, pero una vez completado estará disponible en el directorio del tema.

En el momento de escribir esto, Twenty Twenty-One Blocks requieren el plugin de Gutenberg. Una vez instalado y activado tanto el tema como el plugin, un elemento del menú del Editor de Sitio aparece en el menú de administración de WordPress (ya no es necesario activar el experimento de Edición Completa del Sitio).

El elemento de menú del Editor del Sitio en el experimento de Twenty Twenty-One Bloques

El elemento de menú del Editor del Sitio en el experimento de Twenty Twenty-One Blocks

Ahora, haz clic en el nuevo elemento de menú Editor de sitios para abrir la interfaz de edición de todo el sitio y empezar a editar cualquier elemento de la página utilizando el editor de bloques.

Edición completa del sitio en Twenty Twenty-One bloques

Edición completa del sitio de Twenty Twenty-One Blocks

Aquí no nos vamos a sumergir en las cosas técnicas. Basta con decir que los temas clásicos y los basados en bloques son estructuralmente diferentes.

La imagen de abajo muestra el contenido de la carpeta de Twenty Twenty-One Blocks:

La carpeta de los Bloques Twenty Twenty-One

La carpeta de Twenty Twenty-One Blocks

Notarás el archivo experimental-tema.json y las carpetas de plantillas y partes de plantillas de bloques.

La principal diferencia entre los temas tradicionales de WordPress y los temas basados en bloques es que los temas basados en bloques incluyen plantillas que están enteramente compuestas de bloques.

Por ejemplo, abre block-template-parts/header.html en tu editor de código. Deberías ver el siguiente código:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Como puedes ver, el clásico archivo de plantilla header.php ha sido reemplazado por un archivo .html que contiene varios bloques.

Puedes coger la versión en progreso del tema de Twenty Twenty-One blocks del proyecto de experimentos sobre Github.

Si eres un desarrollador de temas, la documentación oficial proporciona todo lo que necesitas saber sobre los temas basados en bloques.

Si te gustaría contribuir al experimento de edición del sitio completo, envía tus comentarios aquí.

Cómo Crear un Tema Hijo en el Twenty Twenty-One

Los temas por defecto de WordPress son un buen punto de partida para aprender los fundamentos del desarrollo de los temas y comenzar a construir temas hijo personalizados.

Los temas predeterminados siguen las directrices de las normas de codificación oficiales de WordPress y cumplen con los estándares de la web.

¿Hay algún lugar mejor para aprender a codificar?

¿Necesitas un alojamiento rápido, seguro y fácil de desarrollar para los sitios de tus clientes? Kinsta está construido teniendo en cuenta a los desarrolladores de WordPress y proporciona muchas herramientas y un poderoso panel de control. Echa un vistazo a nuestros planes

Los child themes son una gran funcionalidad de WordPress que te permite personalizar el diseño, las funcionalidades y la estructura de tus páginas. Con los siguientes ejemplos, nos sumergiremos en cada aspecto de la personalización de los temas.

Crea Tu Tema Hijo

Crear un tema hijo de WordPress es un proceso de 3 pasos:

1. Crea la Carpeta de Temas Hijo

Crea una nueva carpeta en wp-content/themes y ponle el nombre que quieras. Pero recuerda que debe ser un nombre único. El manual The Child Themes recomienda usar el mismo nombre que el tema principal, con -child adjunto al final.

Así que podríamos nombrar la nueva carpeta como «twentytwentytone-child».

2. Crea un Archivo style.css

Ahora dirígete al directorio de temas hijos y crea un nuevo archivo style.css que incluya el siguiente código:

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

La información del encabezado permite que WordPress maneje adecuadamente tu tema hijo.

Debajo de ese texto, puedes añadir tus bloques de declaraciones CSS, como te mostraré en un momento.

3. Crea un Archivo functions.php

Con Twenty Twenty-One, también necesitarás un archivo functions.php. Así que, crea el tuyo en el directorio del tema hijo, ábrelo en tu editor de código, y añade el siguiente código:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Como el tema Twenty Twenty-One utiliza get_template_directory() para cargar tu hoja de estilos, necesitas poner en cola la hoja de estilos del tema hijo utilizando la acción wp_enqueue_scripts.

Después de eso, guarda tus archivos, abre tu panel de control WordPress, navega a Apariencia -> Temas, y activa el tema hijo de tu Twenty Twenty-One.

Añadamos ahora nuestras personalizaciones.

Cómo Añadir Estilos Personalizados

Cuando se trata de personalizar el diseño de tu sitio web de WordPress, tienes varias opciones para añadir tu código CSS personalizado. El panel de CSS adicional del personalización podría ser suficiente para pequeños cambios.

Pero un tema hijo sería una mejor opción si tienes que hacer personalizaciones avanzadas, o si necesitas exportar tu código a diferentes sitios web de WordPress.

Vamos a intentarlo con una simple personalización: cambiar la pila de fuentes por defecto.

Digamos que quieres cargar una pila de fuentes diferente, o simplemente añadir tu fuente favorita a las familias de fuentes predeterminadas Twenty Twenty-One.

¿Cómo lo haces?

Aquí te mostraré cómo cambiar la fuente por defecto para los encabezados H1, pero puedes cambiar la familia de fuentes para cualquier elemento de texto de tu sitio web.

Primero, abre el archivo style.css de Thenty Twenty-One y encuentra el siguiente bloque de CSS:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Como puedes ver, la familia de fuentes para las cabeceras se establece en la variable --heading--font-family.

Ahora ve al bloque :root{} y encuentra la siguiente declaración:

--heading--font-family: var(--global--font-primary);

--heading--font-family depende de la variable --global--font-primary, que se define en la parte superior del bloque :root{}:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

¡Ahora ya sabemos qué hay que cambiar!

Copia la declaración --global--font-primary de la hoja de estilos principal y pégala en el style.css de tu hijo. Luego, cambia el nombre y el valor de la propiedad como se muestra a continuación:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Una vez que hayas declarado tu pila de fuentes personalizadas, puedes usarla donde quieras en tu hoja de estilo. Títulos H1 en nuestro ejemplo:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Guarda el style.css de tu hijo y recarga la página. Deberías ver Ubuntu como la nueva familia de fuentes por defecto para las cabeceras de tu página.

Familia de fuentes predeterminada vs. familia de fuentes personalizadas en Twenty Twenty-One

Familia de fuentes predeterminada vs. familia de fuentes personalizadas en Twenty Twenty-One

Ahora que ya sabes cómo personalizar el estilo del Twenty Twenty-One con un tema hijo, podemos explorar características más avanzadas.

Cómo Añadir Nuevos Patrones de Bloques

En este ejemplo, construiremos un patrón de bloque personalizado que incluye un bloque de dos columnas con una imagen redondeada a la izquierda, una cabecera H4 y un párrafo a la derecha.

Puedes construir tu patrón directamente en el Editor de Bloques o personalizando el código de un patrón de bloques existente.

Si eliges construir tu patrón en el Editor de Bloques, solo tienes que añadir los bloques necesarios a un post o borrador de página, y luego cambiar al Editor de Código y copiar el código correspondiente.

Un bloque de dos columnas en el editor de código

Un bloque de dos columnas en el editor de código

Ahora podemos registrar nuestro patrón en el archivo functions.php del tema hijo:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

El código de arriba registra la categoría de patrones personalizados y el patrón de Bio del autor.

Fíjate en el código que usamos para construir el elemento img:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

La función get_stylesheet_directory_uri() proporciona la URI del directorio del tema hijo (la imagen se añadió previamente a la carpeta de activos del tema hijo).

Guarda tus cambios y crea una nueva entrada o página.

Ahora deberías encontrar el nuevo patrón en el insertador de bloques.

Un patrón de bloque personalizado añadido al Twenty Twenty-One

Un patrón de bloque personalizado añadido al Twenty Twenty-One

Personalización de un Archivo de Plantilla

Si quieres crear un nuevo archivo de plantilla para un archivo específico, o un solo post/página, necesitarás crear una nueva plantilla .php de acuerdo con la Jerarquía de Plantillas de WordPress.

Pero si solo quieres editar una plantilla existente (o una parte de la plantilla), solo tienes que copiar la plantilla original del tema principal y pegarla en la posición correspondiente del tema hijo (lee más sobre este tema en nuestra guía ampliada de temas hijo).

Digamos que quieres personalizar el texto de «Proudly powered by WordPress». Tienes varias opciones para eliminar o personalizar esa línea. Para nuestro ejemplo, cambiémosla manualmente.

Para ello, copia el archivo de plantilla footer.php de la carpeta principal y pégalo en la raíz del tema hijo. Cuando termines, abre el footer.php del tema hijo en tu editor de código y encuentra el siguiente código:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Ahora, puedes hacer tus cambios. Digamos que quieres dar créditos a tu web host, solo tienes que reemplazar el elemento a como se muestra a continuación:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Para eliminar ese texto, simplemente elimina el elemento div.powered-by:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

Y eso es todo. Ahora, pasando de los simples ejemplos anteriores, puedes hacer personalizaciones más emocionantes y llevar tu sitio web potenciado con el tema Twenty Twenty-One al siguiente nivel.

Mira las novedades del tema de WordPress, desde el Modo Oscuro hasta los temas basados en bloques, en este completo resumen de Twenty Twenty-One 🌅Click to Tweet

Resumen

El tema Twenty Twenty-One es el tercer intento de permitir que personas sin conocimientos técnicos avanzados construyan sitios web. Es un tema minimalista, de buen rendimiento y accesible para WordPress que también se ajusta a una amplia gama de casos de uso. Los sitios de WordPress que utilizan el tema Twenty Twenty-One tienen todo tipo de formas y tamaños. Para saber si un tema utiliza Twenty Twenty-One, comprueba nuestra práctica herramienta de detección de temas de WordPress.

Diseñado con el editor de bloques en mente, el nuevo tema predeterminado es fácil de personalizar tanto para los usuarios como para los desarrolladores.

Ahora te toca a ti: ¿Ya has instalado el tema Twenty Twenty-One? ¿Cuál es tu experiencia con él? ¡Comparte tus pensamientos en la sección de comentarios!


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.