Configura el Tema Twenty Nineteen WordPress

[ 6 febrero 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

WordPress 5.0 llegó con un nuevo tema llamado Twenty Nineteen, este theme esta adaptado a la personalización de contenido con Gutenberg y aprovecha todas sus ventajas. En este artículo verás cómo configurar Twenty Nineteen y adaptarlo a tus necesidades.

1- Generalidades

Luego de actualizar o instalar la versión 5.x verás que tienes la opción de activar y personalizar el nuevo theme Twenty Nineteen.

Desde esta pantalla puedes ingresar a la opción de personalizar para realizar los cambios en la configuración del theme.

El theme Twenty Nineteen esta pensado para un blog profesional, sin embargo es posible adaptarla para una marca empresarial

Los bloques de ejemplo, imágenes y contenido estan basados en la demo del theme Twenty Nineteen en WordPress.com

2- Identidad del sitio

En la personalización tienes la opción de Identidad del Sitio, tal como se muestra en la imagen adjunta, verás que puedes cambiar el nombre del sitio, colocar una descripción y añadir una imagen.

Opción de identidad del sitio en personalización del theme

Toda esta configuración se mostrará en la parte superior del sitio, la imagen que agregues se verá como un círculo.

Parte superior del theme mostrando información del sitio

3- Personalizar Colores

Twenty Nineteen tiene la opción de definir un color corporativo para tu sitio, lo puedes hacer desde las opciones de personalización, tal como se muestra en la siguiente imagen.

En esta pantalla también se puede ver una opción de aplicación de filtro en las imágenes usando el color seleccionado, esta característica la notarás cuando agregues una imagen destacada a tus entradas.

4- Opciones de Menús

El tema tiene por defecto tres posiciones de menú que se detallan a continuación.

Tres posiciones por defecto tema Twenty Nineteen

Menú Principal: Este menú se mostrará en la parte superior al costado de la imagen del logo y bajo el nombre del sitio, aquí puedes colocar las opciones principales del sitio.

Menú del Pie de Página Se mostrará enlaces de menú en el pie de página del sitio. Puedes usarlo para poner enlaces de la política de privacidad o contacto.

Menú de redes sociales: Este menú se mostrará debajo del menú principal, los iconos de las redes se generan automáticamente de acuerdo a la url que ingreses en los enlaces personalizados del menú.

Menús en Front-end del tema Twenty Nineteen

5- Zona de Widgets

El tema Twenty Nineteen tiene por defecto sólo una zona en donde puedes agregar Widgets, lo puedes comprobar desde Apariencia – Widgets, tal como se muestra en la imagen.

Puedes agregar cualquier tipo de Widgets en esta posición y se mostrará en la parte inferior del theme, en nuestro ejemplo agregamos dos Widgets de HTML Personalizado obteniendo el siguiente resultado:

6- Ajustes de Portada

Para los ajustes de portada te recomiendo tener una página de Bienvenida y una página para de Blog, tal como se muestra en la siguiente imagen.

Para aprender más sobre esta configuración, revisa el artículo de Página de Inicio y Página de Entradas en WordPress

7- Construcción de la página de Inicio con Gutenberg

Para el maquetado de la página de inicio del theme Twenty Nineteen usamos Gutenberg, una de las primeras opciones es colocar un bloque de imagen de fondo con la siguiente configuración que se muestra en la siguiente imagen:

Luego agregamos un bloque de párrafo con la opción de capitalizar tal como se muestra en la siguiente imagen:

Agregamos la sección de servicios con un bloque de columnas y en cada columna un bloque de medios y texto con el cual puedes agregar una imagen y un texto. La imagen será necesario redimensionarla manualmente, al final obtendremos algo similar a la siguiente imagen:

Agregar Columnas y medios y texto en Gutenberg

Agregamos una nueva sección colocando un bloque de encabezado, tal como se muestra en la siguiente imagen:

Agregamos una frase usando el bloque de Párrafo de cita, tal como se muestra a continuación:

Agregamos un bloque de Galería de imágenes, con la configuración que aparece en la siguiente imagen:

Galería de imágenes en contenido Gutenberg

Agregamos un bloque de espaciado tal como se muestra en la siguiente imagen:

Finalmente agregamos un bloque de cita, similar a como se muestra en la siguiente imagen:

8- Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:

Comentarios

danilo

11 agosto, 2019

Cómo podría hacer para mostrar resumenes de los post?
- Jhon Marreros Guzmán
  
  11 agosto, 2019
  
  Hola, puedes usar un Leer más, en Gutenberg lo puedes encontrar como un bloque “más” o “more”, revisa también el siguiente artículo de referencia: https://decodecms.com/leer-mas-y-extracto-en-wordpress/ , recuerda que estos resúmenes sólo se verán en una página que liste varias entradas.
francisco

6 febrero, 2020

Hola, gran vídeo, estoy configurando mi primera web con su ayuda.

Estéticamente me gusta, pero para darle un toque más personal, querría quietar esa pequeña línea horizontal que se sale encima de los encabezados, podría quitarse de algún modo ??

Saludos
- Jhon Marreros Guzmán
  
  6 febrero, 2020
  Hola, si podrías quitarlo con CSS, prueba con el siguiente código CSS:
```
.entry .entry-title::before,
h1:not(.site-title)::before, 
h2::before{
  display: none;
}
```
  Puedes agregar este código en la configuración del theme: Apariencias > Personalizar > CSS.
  
  Saludos.
francisco

7 febrero, 2020

Muchísimas gracias Jhon, me va a quedar una web estupenda !!
Grande !