Color palette, de Ankhesenamun 96

Hace unas pocas semanas se publicó la versión 5.3 de WordPress. La nueva versión de WordPress se caracteriza, principalmente, por introducir un montón de mejoras en la interfaz de usuario del editor de bloques y por el nuevo tema por defecto que incluye.

Twenty Twenty se ha diseñado pensando específicamente en el editor de bloques de WordPress. En la entrada de hoy me gustaría presentarte brevemente el nuevo tema, compartir contigo algunas de las curiosidades que lo hacen especial y enseñarte cómo puedes configurarlo y adaptarlo a tus necesidades.

Twenty Twenty de un vistazo

Con cada nueva actualización de WordPress, el editor de bloques da un salto cualitativo hacia adelante (no olvides que el editor en sí está bajo un desarrollo muy activo y disponible como plugin). El objetivo final de Gutenberg es llegar a un maquetador de páginas completo que permita a los usuarios diseñar y estructurar sus webs como quieran.

Tema Twenty Twenty en WordPress
Nuevo tema Twenty Twenty en WordPress.

La responsabilidad de un tema en WordPress es dotar de personalidad a la estructura y estilo que define el usuario en el editor de bloques. Tal y como lo define el creador del tema:

Twenty Twenty ha sido diseñado pensando en la flexibilidad. Si quieres usarlo para tu empresa o negocio, puedes combinar columnas e imágenes junto con estilos de ancho amplio o completo para crear diseños dinámicos con los que mostrar tu portafolio de productos o servicios. Pero si quieres usarlo para tu blog personal, el diseño a columna única también es ideal.

Anders Norén

Una de las principales curiosidades del nuevo tema por defecto de WordPress es que, a diferencia de sus antecesores, no ha sido creado desde cero, sino que se basa en un tema que ya existía en el repositorio de WordPress.org: Chaplin.

Tema Chaplin para WordPress
Imagen promocional del tema Chaplin para WordPress.

Otra característica que distingue a Twenty Twenty es la tipografía que trae bajo el brazo: Inter, diseñada por Rasmus Andersson. Se trata de un tipo de letra libre y gratuito creado para facilitar la lectura en todos los posibles tamaños de letra, especialmente cuando son muy pequeños.

Inter es la tipografía por defecto del tema Twenty Twenty
Inter es la tipografía por defecto del tema Twenty Twenty.

Cómo instalar el nuevo tema Twenty Twenty

Como ya te he comentado, este tema es el nuevo tema por defecto en WordPress 5.3. Por lo tanto, si estás creando una nueva instalación de WordPress y usas la versión más reciente del mismo, el tema que aparecerá por defecto será, precisamente, Twenty Twenty.

El tema Twenty Twenty es el tema por defecto en WordPress 5.3
El tema Twenty Twenty es el tema por defecto en WordPress 5.3.

Pero también es posible instalarlo en versiones anteriores de WordPress. Simplemente ve a Apariencia » Temas » Añadir nuevo y busca el tema «Twenty Twenty»:

Instala el tema Twenty Twenty fácilmente
Instala el tema Twenty Twenty fácilmente.

Recuerda que el tema está pensado para funcionar con Gutenberg, así que te recomiendo que únicamente lo uses si creas tus contenidos con Gutenberg.

Cómo personalizar el tema Twenty Twenty de WordPress

El tema es fácilmente personalizable desde el propio Escritorio de WordPress. Haz clic en Apariencia » Personalizar y verás todas las opciones que tienes disponibles:

Personalizando el tema Twenty Twenty en WordPress
Personalizando el tema Twenty Twenty en WordPress.

Es probable que muchas de ellas ya las conozcas, puesto que suelen ser habituales en absolutamente todos los temas (como la identidad del sitio). Uno de los primeros ajustes que yo personalmente modificaría es la paleta de colores, puesto que el color de fondo sepia no me gusta y lo cambiaría a blanco:

Esquema de colores de Twenty Twenty
Esquema de colores de Twenty Twenty.

Las otras opciones típicas incluyen ajustes como «en el blog, mostrar el post completo o sólo el resumen», «qué mostrar en la página principal» o «cómo añadir CSS adicionales a nuestra web». Pero hay algunas opciones específicas del tema a las que merece la pena prestarles un poco más de atención.

Estilo de las entradas

Por defecto, la apariencia de las entradas en el blog es sobria y elegante. Como puedes ver en la siguiente captura de pantalla, aparece el título junto a la meta información de la entrada (autor, fecha de publicación, categoría) de forma destacada y muy limpia:

Vista por defecto de una entrada con el tema Twenty Twenty
Vista por defecto de una entrada con el tema Twenty Twenty.

dejando la imagen destacada como un elemento que aparece a continuación. Si no sueles poner imagen destacada o sólo lo haces a veces, este estilo sea (probablemente) la mejor opción. Pero si sueles poner siempre imagen destacada a tus entradas, te recomiendo que cambies la plantilla en tu entrada:

Plantillas de página y entrada disponibles en el tema
Plantillas de página y entrada disponibles en el tema.

a la plantilla de ancho completo para que la imagen destacada pase a ocupar un lugar más destacado. Con esta plantilla, la imagen destacada se fusiona con el título y pasa a ocupar el primer fold de tu web, dejando algo parecido a esto:

Plantilla con la imagen destacada ocupando el primer fold
Plantilla con la imagen destacada ocupando el primer fold, como si se tratara del bloque de fondo de Gutenberg.

Se trata de un diseño que a mí personalmente me encanta y que, en cierta forma, me recuerda al que tenemos en nuestra web ?

Menús

Otra de las cosas que me gusta del tema es que permite crear múltiples menús, según el estilo que queramos conseguir. Por un lado, podemos escoger entre dos opciones de menú para el escritorio:

  • Menú horizontal. Es el menú que aparece en las capturas anteriores. Básicamente, son opciones de menú que están visibles en la barra superior de tu web.
Diferentes menús en el tema Twenty Twenty
Diferentes menús en el tema Twenty Twenty.
  • Menú extendido. Aparece un botón con puntos suspensivos en el menú. Cuando haces clic aparece el menú extendido como un elemento deslizante que nace de la esquina derecha de tu web:
Menú extendido del tema Twenty Twenty
Menú extendido del tema Twenty Twenty.

Otro de los menús que me parece comodísimo es el menú social. Con él, podemos añadir enlaces a nuestras redes sociales y el tema, automáticamente, mostrará cada elemento como un botón con el icono de la red social en cuestión:

Menú social del tema Twenty Twenty
El menú social del tema Twenty Twenty te permite añadir enlaces a tus redes sociales y que aparezcan con los iconos correspondientes automáticamente.

Esto no es algo que sea nuevo de este tema (llevamos ya varios temas Twenty con esto), pero me sigue encantando ??

Widgets y otras curiosidades

Finalmente, también merece la pena comentar la sección de widgets que hay en el tema. Por defecto, únicamente podrás añadir widgets en el pie de página. Así que si confiabas en poder tener una barra lateral en tu menú en la que añadir banners u otros elementos, me temo que tendrás que crear un tema hijo y adaptar las plantillas a tus necesidades.

Áreas de widget disponibles en el tema Twenty Twenty
Twenty Twenty viene con dos áreas de widgets en el pie de página, que se corresponden con las dos columnas que ves en la captura.

Por cierto, si te fijas en las primeras capturas del tema que he compartido verás que hay un botón de búsqueda. Pues bien, haciendo clic en él, aparece por JavaScript el cuadro de búsqueda en la parte superior de tu web:

Cuadro de búsqueda dinámico en el nuevo tema
Cuadro de búsqueda dinámico en el nuevo tema.

Rápido, cómodo y sencillo.

Conclusión

El tema Twenty Twenty es el siguiente paso en los temas Twenty que acompañan a las nuevas versiones de WordPress año tras año. Bajo ningún concepto estamos delante de una revolución, pero cada vez tenemos temas más elegantes, mejor integrados con las novedades de WordPress y más fácilmente adaptables. Si estás pensando en cambiar de tema y no sabes qué poner, dale una oportunidad a Twenty Twenty. Es rápido y visualmente muy atractivo.

Imagen destacada de Ankhesenamun 96 en Unsplash.

13 respuestas a «El tema Twenty Twenty de WordPress 5.3»

  1. Avatar de Luis Quero
    Luis Quero

    yo estoy usando éste Tema pero quiero cambiarle el color a las letras de los post, ya que estoy usando un fondo de una imagen oscura y las letras negraas no se ven bien. ¿Donde puedo cambiarlas?

    1. Avatar de David Aguilera

      Si vas a Apariencia » Personalizar hay una opción para personalizar los colores del tema. Si pones un color de fondo oscuro, las letras se ponen automáticamente en blanco.

  2. Avatar de Raul
    Raul

    Hola, como puedo hacer que la imagen de la pantalla de portada, no se vea en todas las paginas? ¿saben si es posible? Gracias!

    1. Avatar de David Aguilera

      No recuerdo que haya ninguna opción para ello, pero quizás alguna de las plantillas de página que ofrece consigue ese efecto. Te recomiendo que plantees la duda en los hilos de soporte del tema Twenty Twenty; allí otros usuarios del mismo o incluso alguno de los desarrolladores podrá ayudarte.

  3. Avatar de guiselle
    guiselle

    Hola, como añado una sección de cuestionario

    1. Avatar de David Aguilera

      ¿Qué es, para ti, una «sección de cuestionario»?

  4. Avatar de manu
    manu

    porque no encuentro la pagina en google cuando la busco? tengo el dominio y hosting con 1&1 ionos. saludos!

    1. Avatar de David Aguilera

      Asegúrate de que en la sección de Ajustes » Lectura tienes desactivada la opción «Disuadir a los motores de búsqueda de indexar este sitio». A partir de ahí, todo es cuestión de ir generando contenido y esperar a que los buscadores indexen tu web. O, si no quieres esperar, invertir un poco de dinero en publicidad para que tu web salga cuando los usuarios busquen ciertas palabras clave.

  5. Avatar de Jvr
    Jvr

    Como agrego redes al menú de enlaces sociales? borre WhatsApp sin querer y no consigo recuperarla

    1. Avatar de David Aguilera

      Normalmente, el icono de redes sociales en los menús de los temas Twenty X de WordPress se pone automáticamente cuando pones la URL que toca. Por ejemplo, https://twitter.com/davilera es un enlace a mi perfil de Twitter; si meto este enlace como opción de menú, el tema lo cambiará por el icono directamente (suponiendo que esté en el menú social, claro). Con WhatsApp será parecido.

  6. Avatar de Rober
    Rober

    Hola,

    ¿Como hacer mas anchos los bloques en las entradas? Cual es el maximo? pueden ocupar toda la pantalla?

    Gracias y saludos

    1. Avatar de David Aguilera

      Este tema usa variables CSS para definir muchas de sus propiedades, como por ejemplo la paleta de colores o los anchos. Así que, en teoría, puedes usar la pantalla de «Personalizar» en la sección «Apariencia» y añadir una regla CSS adicional que modifique el ancho. En concreto, añadiendo esto: :root { --responsive--aligndefault-width: 90vw; } podrás sobrescribir la variable --responsive--aligndefault-width y meterle el ancho que quieras.

  7. Avatar de Rober
    Rober

    Muchas gracias.

    Me pide un plan premium para activar la personalización de CSS y no podre hacerlo, de momento.

    Gracias por la respuesta y la rapidez.

    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.