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!
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.
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:
- En primer lugar, el uso de una pila de fuentes del sistema aporta beneficios a UX y al rendimiento porque las fuentes nativas ya son compatibles con la mayoría de los sistemas operativos y no requieren un tiempo de carga adicional.
- En segundo lugar, parecen neutrales, por lo que se pueden fusionar sin problemas en cualquier tipo de diseño.
- En tercer, como no requieren que se carguen archivos de fuentes adicionales, es más fácil para los usuarios y desarrolladores personalizar el diseño de un sitio web utilizando el Twenty Twenty-One.
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.
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:
- 20 de octubre de 2020: Beta 1
- 27 de octubre de 2020: Beta 2
- 2 de noviembre de 2020: Beta 3
- 12 de noviembre de 2020: Beta 4
- 17 de noviembre de 2020: RC 1
- 1 de diciembre de 2020: RC 2
- 7 de diciembre de 2020: Prueba de fuego para el lanzamiento de WordPress 5.6
- 8 de diciembre de 2020: Fecha límite para la publicación de WordPress 5.6
Para poner en marcha el tema Twenty Twenty-One, sigue estos pasos:
- Consigue el paquete zip de GitHub.
- Sube el paquete a tu instalación de desarrollo desde el panel de control de WordPress o a través de SFTP.
- Navega hasta Apariencia → Temas y haz clic en el botón Activar en la imagen de vista previa del tema.
- 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.
¿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:
- Enlaces de feeds automáticos
- Etiqueta del título
- Formatos de post
- Post thumbnails
- Elementos HTML5
- Logotipo personalizado
- Actualización selectiva para los widgets
- Fondo personalizado
- Dos menús de navegación
- Una barra lateral
Características del bloque:
- Estilos de los bloques por defecto
- Estilos del editor
- Estilos de edición oscuros (fondo oscuro)
- Alinear el ancho
- Bloques de los tamaños de las fuentes
- Bloques con paletas de colores
- Bloques con preajustes de gradiente
- Contenido inicial
- Incorporación responsiva
- Altura de línea personalizada
- Color de enlace experimental
- Espacios experimentales personalizados
- Unidades personalizadas (eliminadas en WordPress 5.6)
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.
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.
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.
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:
has_blockdetermina si un mensaje o una cadena contiene un tipo de bloque específico (el bloque de la imagen central en este ejemplo).twenty_twenty_one_print_first_instance_of_blockes una función de plantilla Twenty Twenty-One que imprime la primera instancia de un bloque en el contenido y luego se separa.
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.
Esta pantalla incluye:
- Logo personalizado
- Título del sitio
- Descripción Corta
- Icono del sitio
Tamaños de las Fuentes del Editor
Twenty Twenty-One soporta los siguientes tamaños de letra:
- Extra pequeño – 16
- Pequeño – 18
- Normal/Medio – 20
- Grande – 24
- Extra grande – 40
- Enorme – 96
- Gigante – 144
En la hoja de estilo del tema, los tamaños se establecen en unidades rem.
Ajustes de Colores
El Personalizador de Temas proporciona un panel de Colores y Modo Oscuro que incluye dos opciones:
- Un simple selector de colores con 10 paletas de colores predefinidas.
- Una casilla de verificación para activar o desactivar el modo oscuro.
La imagen de abajo muestra un color de fondo amarillo claro con un texto gris oscuro.
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:
- Negro =
'#000000'; - Gris oscuro =
'#28303D'; - Gris =
'#39414D'; - Verde =
'#D1E4DD'; - Azul =
'#D1DFE4'; - Púrpura =
'#D1D1E4'; - Rojo =
'#E4D1D1'; - Naranja =
'#E4DAD1'; - Amarillo =
'#EEEADD'; - Blanco =
'#FFFFFF';
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.
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.
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:
- Permitir a los propietarios de los sitios deshabilitar el soporte del modo oscuro y a los visitantes del sitio activar o desactivar el modo oscuro mientras ven el sitio.
- Permitir a los propietarios de los sitios solo deshabilitar el soporte del modo oscuro (no hay opción para que los visitantes del sitio activen o desactiven el modo oscuro).
- Habilitar el soporte del modo oscuro como «siempre encendido» mientras se permite a los visitantes del sitio alternarlo mientras visitan el sitio.
- Habilitar el soporte del modo oscuro como «siempre encendido» y evitando que los visitantes del sitio activen o desactiven el modo oscuro.
- No soportar el modo oscuro en absoluto.
Después de una discusión profunda, el Modo Oscuro se añadió al tema. Ahora:
- La compatibilidad con el Modo Oscuro está disponible como una opción para los propietarios del sitio.
- El botón de interruptor se ha eliminado de la interfaz del editor y solo está disponible en Personalización.
- El botón de interruptor del Modo Oscuro está situado en la esquina inferior derecha (a la izquierda en RTL) y desaparece cuando el visitante del sitio se desplaza por la página.
- Con el Modo Oscuro habilitado, los visitantes del sitio pueden activarlo o desactivarlo dependiendo de sus preferencias personales, e independientemente de la configuración de su sistema operativo o navegador.
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.
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.
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.
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);
}
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:
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.
Actualmente, el tema proporciona los siguientes patrones:
- Texto grande
- Área de enlaces: Un texto enorme seguido de redes sociales y enlaces a direcciones de correo electrónico.
- Título multimedia y texto: Un bloque Multimedia y Texto con una gran imagen a la izquierda y un encabezado a la derecha. El encabezado va seguido de un separador y un párrafo de descripción.
- Imágenes superpuestas: Tres imágenes dentro de un bloque de columnas superpuestas.
- Dos imágenes de muestra: Un bloque de Multimedia y Texto con una imagen grande a la izquierda y otra más pequeña con un marco bordeado a la derecha.
- Imágenes y texto superpuestos: Un bloque de columnas superpuestas con dos imágenes y una descripción de texto.
- Lista de la cartera: Una lista de proyectos con imágenes en miniatura.
- Información de contacto: Un bloque con 3 columnas que muestra información de contacto y enlaces a medios sociales.
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).
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.
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:
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?
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.
- Nombre del tema: El nombre único del tema.
- Tema URI: Donde los usuarios pueden encontrar el código o la documentación del tema.
- Descripción: Texto descriptivo para ayudar a los usuarios a entender lo que hace el tema.
- Autor: Tu nombre
- Autor URI: El sitio web del autor.
- Plantilla: La carpeta donde se almacena el tema principal. Utiliza el nombre de la carpeta y no el nombre del tema. Sin esta línea, el tema no funcionará como un tema hijo.
- Versión: El número de versión
- Licencia: La licencia, que debe ser GNU.
- Licencia URI: El enlace a la información sobre la licencia.
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.
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.
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 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.
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.
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!
Deja una respuesta