blog webempresa

Tema Twenty Twenty-Three: Guía del nuevo tema de WordPress

por | Abr 18, 2023 | Aprender WordPress

Tema Twenty Twenty-Three: Guía del nuevo tema de WordPress

 Actualmente, el tema Twenty Twenty-Three es uno de los que se muestra por defecto en WordPress, desde que se implementó la versión 6.1 de WordPress. Esta versión posee varias características entre las que se destaca su simplicidad, sin imágenes o funciones adicionales que entorpecen a un diseño limpio y minimalista.

Este tema es perfecto para crear plantillas WordPress o estilos personalizados en WordPress, y para probar las últimas características de WordPress, ya que se integra con ellas. Por lo tanto, es una excelente opción para iniciar la creación de tu sitio web o crear blog en WordPress.

El tema en cuestión es muy especial, ya que fue desarrollado por WordPress en colaboración con su comunidad de usuarios. Esto significa que no solo fue creado por los desarrolladores de WordPress, sino que también se tuvo en cuenta la opinión de los usuarios finales en todo momento durante el proceso de desarrollo.

Esta participación activa de la comunidad en el proceso de desarrollo del tema garantiza que sea una opción muy versátil y útil para los usuarios de WordPress. Además, al ser el único tema desarrollado de esta manera, se convierte en una opción única y diferente a los demás temas disponibles.

  Mejoras en diseños y estilos de Twenty Twenty-Three 

 

Como hemos comentado en un inicio, el tema Twenty Twenty-Three es una versión más simple de lo que es el tema anterior a este Twenty Twenty-Two, siendo más ligero y simple de manipular. Este tema se adapta muy bien a las últimas funciones del editor de bloques reutilizables Gutenberg, lo que lo hace muy versátil. Además, permite editar plantillas, estilos globales, tipografía y patrones de bloques de manera fácil y sencilla.

Por eso, en la mayoría de los casos, vemos ejemplos de este tema sin muchas imágenes ni elementos, ya que se puede modificar casi todo el contenido del tema. Por ejemplo, si se publica una entrada sin imagen destacada, se puede cambiar completamente la apariencia al agregar una imagen destacada.

Imagen destacada en entradas

Además de esto se ha incorporado un diseño mucho más minimalista lo que traduce a más rapidez y un tema mucho más ligero para los motores de búsqueda, así mismo logrando que se adapte de forma perfecta a las características nuevas del editor de bloques Gutenberg en WordPress. Aspectos como la creación de plantillas, variaciones de estilos, la tipografía fluida y los patrones en bloques son fundamentales.

Es importante comentar que este tema en gran medida es flexible y se presta a una personalización y pruebas de desarrollo, logrando así crear páginas minimalistas pero con posibilidad de generar nuestros propios bloques de contenido.

Entre las mejoras principales al diseño encontramos la de una mejor paleta de colores, la cual puede editarse directamente del código que provee el propio tema, el archivo que debemos editar para esto es el theme.JSON, este esta ubicado en:

Administrador de archivos  >  Public_html  >  dominio  >  wp-content  >  themes  >  Tenty Twenty-three  >  theme.json

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#9DFF20",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
	}
}
Paleta de colores nuevos

Lo que realmente nos sorprende de este nuevo tema es que podemos elegir entre varias combinaciones de colores. Estas no solo cambian los colores, sino que también ajustan imágenes y estilos generales del sitio para darle un diseño diferente.

El tema Twenty Twenty-Three incluye diez variaciones de estilo globales y cada uno de estos posee combinaciones de colores, fuentes tipográficas y tamaños de letras u elementos para diferenciar cada uno de estos estilos.

Ajustes de estilos a elementos

Si editamos el archivo theme.JSON, podemos cambiar las variaciones globales del tema Twenty Twenty-Three. Este archivo contiene los esquemas de colores que se pueden modificar si se necesita cambiar los colores de las plantillas de forma sencilla.

Si somos desarrolladores y queremos un desglose especializado de cada sección disponible, podemos hacerlo por medio de Figma, en donde se encuentran todas las plantillas para blog y para páginas que son modificables de este tema.

  Mejoras en las tipografía de Twenty Twenty-Three

 

Las tipografías en WordPress son esenciales en cualquier tema de WordPress y en el caso del tema Twenty Twenty-Three, que es minimalista, son igual de importantes. Garantizan que el contenido sea legible y que nuestro sitio sea atractivo para los usuarios que lo visitan.

El tema Twenty Twenty-Three usa fuentes con tipografía fluida que se ajustan automáticamente al tamaño de la pantalla en la que se ve la página web. Esto asegura que el texto siempre se vea legible, sin importar el tamaño de la pantalla.

Esta mejora nos garantiza que si se ve nuestra web en pantallas pequeñas los textos no serán difíciles de leer u ocupen tanto espacio que sobresalgan de los bordes del sitio, todo para permitir que la navegación sea más sencilla y agradable para los visitantes del sitio.

Tipos de letra disponible

 El tema Twenty Twenty-Three como hemos mencionado previamente posee varios tipos de letra que se utilizan para generar un estilo sencillo y rápido de visualizar en cualquier dispositivo, las fuentes son las siguientes:

IBM Plex Mono: Esta fuente forma parte de las nuevas tipografías del tema, y es publicada como su nombre lo indica con las licencias de IBM, esta misma se muestra en el código fuente de la siguiente forma:

– var(–wp–preset–font-family–ibm-plex-mono)

Inter: Esta es la segunda tipografía igualmente gratuita y de código abierto, fue creada por un diseñador y se puede visualizar su familia completa en Google Fonts, en el código la encontramos de la siguiente forma:

– var(–wp–preset–font-family–inter)

Fuente Serif Pro: Esta fuente es parte de Adobe Originals y puede ser utilizada de forma gratuita en nuestro tema Twenty Twenty-Three, en el código lo encontramos de la siguiente forma:

– var(–wp–preset–font-family–source-serif-pro)

DM Sans: El último tipo de letra disponible bajo las licencias de Google disponible en nuestro selector de fuentes, esta al igual que otros casos es diseñada por varias personas y no por una empresa, por lo que el uso puede ser más libre. En el código la encontramos de esta forma:

– var(–wp–preset–font-family–dm-sans)

Tipografía fluida y espaciado

En nuestro tema, tenemos un buen ejemplo de cómo usar una tipografía fluida con espaciados especiales en WordPress. Esta opción se logra gracias a los cambios de WordPress 6.1 y utiliza ajustes predefinidos para que la tipografía cambie su espaciado automáticamente.

Este tipo de ajustes nos ayuda a que sea compatible con otras características básicas de esta versión de WordPress, sin contar, que si eres un programador nos interesa en gran medida que los elementos y las funciones de legibilidad estén en presentes en nuestra web.

Al introducirnos el sistema de espaciado fluido ahora los temas pueden especificar valores de espaciado en términos de espacios relativos. Esto en términos más sencillos le facilita al tema ajustar el tamaño de nuestro texto según sea el caso de la visualización.

Esta función se utiliza para beneficiar tanto al usuario como a nosotros obteniendo mejores métricas de Google Analytics en WordPress al tener un sitio que adapta el contenido según el dispositivo donde se vea.

Ajuste de tamaño en encabezados

  Mejoras en plantillas de Twenty Twenty-Three

 

El tema Twenty Twenty-Three nos permite mejorar y experimentar con sus nuevas funciones, en comparación con su anterior tema. Como la capacidad de crear plantillas personalizadas para nuestros sitios web, en comparación con sus versiones anteriores.

Ingreso a plantillas en tema

La edición de las plantillas es algo importante cuando estamos creando páginas, en este tema no solo podemos editar plantillas como la del error 404, blog, búsqueda, páginas, sino que tendremos acceso a modificar elementos que estas tienen en su interior.

Podemos modificar once plantillas predeterminadas en el tema Twenty TwentyThree, las más comunes en cualquier página web. Además, podemos editar cuatro partes de una plantilla: cuerpo, header WordPress o cabecera, footer WordPress o pie de página y barra lateral o sidebar.

Al momento de ingresar a una de ellas tendremos todas las opciones de edición disponible.

Edición de elementos dentro de plantilla

  Mejoras en los estilos globales de Twenty Twenty-Three

 

Como hemos mencionado previamente, el tema Twenty Twenty-Three cuenta con unos diez estilos para poder alternar entre ellos sin tener que cambiar el tema, y como hemos visto, estas variaciones cambian en gran medida lo que se puede tener o no en el tema.

Si queremos cambiar algunos elementos de los estilos globales en el tema Twenty Twenty-Three, podemos hacerlo sin restricciones, ya que estos estilos solo son guías que podemos modificar mientras trabajamos en nuestro sitio web.

Para realizar la modificación de los estilos globales podemos o bien hacerlo de forma generalizada o a un solo elemento que estemos agregando, esto quiere decir que podemos utilizar la interfaz sin ser programadores para cambiar elementos que no nos gusten como se presentan.

Editar tema y bloques

Entre las ventajas principales de esta mejora, es que no es necesario ser un programador para poder modificar estos aspectos de estilos, simplemente podemos ir moviendo ajustes hasta que tengamos nuestro sitio de la forma en que nos agrade para mostrarla a nuestros clientes.

Igualmente, sí, por el contrario, si tienes habilidades con códigos, es posible modificarlos por medio de un archivo .JSON ubicado en la raíz de la carpeta del tema, por lo que se adapta en gran medida tanto si eres un programador como si solo quieres un sitio web elegante y minimalista para tus clientes.

Podemos personalizar o crear nuestras propias plantillas en el tema Twenty Twenty-Three con el plugin gratuito Create Block Theme. Solo tenemos que instalar el plugin en WordPress y podrás modificar colores, tipografías y otros elementos de diseño fácilmente.

Create block theme

Al instalarlo y tenerlo activo veremos como tendremos disponible una nueva opción al situarnos sobre el menú lateral de Apariencias, este nos indica Crear tema de bloques, básicamente aquí podemos:

Exportar tema actual, crear tema hijo, crear una nueva plantilla desde cero y crear una nueva plantilla con base en la actual.

Una vez que realicemos los cambios, estos se mostrarán como un nuevo tema en la lista de plantillas de Twenty Twenty-Three. hay que tener en cuenta que para hacer estos cambios es necesario tener conocimientos básicos o intermedios de codificación en WordPress.

  Conclusiones

 

El nuevo tema de WordPress en la versión 6.1, puede ser a simple vista muy vacío y sin funciones nuevas, pero a medida que vamos viendo ajustes nuevos y opciones que normalmente no estaban presentes nos damos cuenta de que es mucho más que esto, nos permite aprovechar al máximo las funciones nuevas de últimas versiones de WordPress.

No solo encontraremos plantillas que anteriormente eran imposibles de editar sin un plugin especializado, sino que también tenemos a disposición diez variaciones de los estilos que se pueden utilizar en el sitio, todo teniendo como base nuestra única web, siendo este cambio compatible con todas las funciones que tenemos en nuestro sitio.

El uso de las tipografías fluidas nos ayudan en gran medida a desarrollar sitios de mejor calidad y pensados en beneficiar tanto al usuario final como a nosotros mismos que estamos desarrollando el sitio. Por lo que podemos ver el tema Twenty Twenty-Three realiza un trabajo espléndido ofreciéndonos mejoras de última generación de manera gratuita.

Por lo que si no has utilizado o probado este tema quizás es el momento de darle un vistazo con las novedades que tiene disponible para nosotros.

¿Te ha resultado útil este artículo?

Promo abril