En este tutorial, analizaremos más detenidamente cómo puedes modificar la forma en que se muestran las entradas individuales. Exploraremos dos diseños y aprenderemos a reestructurar y anidar distintos tipos de bloques.
Resultados del aprendizaje
- Acceder al Editor del sitio y a la plantilla de entrada.
- Reconocer el diseño predeterminado de la plantilla de entrada de tu tema.
- Identificar diversos bloques del tema que se utilizan para crear el diseño de una entrada individual.
- Modificar la plantilla de entrada para adaptarla a tus necesidades.
- Mover y anidar distintos tipos de bloques.
Preguntas de comprensión
- ¿Cómo te gustaría que se mostrara el contenido de tu entrada?
- ¿Qué bloques del tema se utilizan con más frecuencia?
Transcripción
Hola y bienvenido a Learn WordPress. En la sesión de hoy, veremos cómo personalizar el diseño del contenido de tus entradas. Cada tema de bloques incluye la plantilla de entrada individual, que proporciona la estructura o el diseño de cómo se muestra una entrada individual. Y, por supuesto, tienes la posibilidad de modificarla para adaptarla a tus necesidades.
Actualmente, tengo instalado el tema Twenty Twenty-Two, y así es como se estructura una entrada de forma predeterminada al editar una plantilla en el Editor del sitio. Hagamos clic en la Vista de lista para obtener una mejor visión de la estructura de la página y, ahora, observarás que tenemos el bloque Título de la entrada, el bloque Imagen destacada de la entrada, el bloque Contenido de la entrada y, justo al final, el bloque Fecha de la entrada, el bloque Autor de la entrada, el bloque Categorías de la entrada y el bloque Etiquetas de la entrada. Ten en cuenta que este diseño predeterminado variará según el tema que estés utilizando. Veamos cómo se muestra esto en la parte pública de tu sitio web. Observarás que tenemos el título de la entrada, la imagen destacada de la entrada, el contenido de la entrada, la fecha de la entrada, el autor de la entrada y, después, una etiqueta o categoría.
Déjame mostrarte cómo podrías cambiar este diseño predeterminado de dos maneras diferentes. En mi primer ejemplo, observarás que he cambiado la alineación del título del sitio y he movido los bloques Fecha de la entrada, Autor de la entrada y Categorías de la entrada debajo del título del sitio y encima de la imagen destacada de la entrada. Y he dejado los bloques Imagen destacada de la entrada y Contenido de la entrada en el mismo lugar.
En el segundo ejemplo, creé una cabecera personalizada para la entrada, utilicé un bloque de portada y anidé el menú de navegación, la imagen destacada, el bloque Título de la entrada y también los bloques Fecha de la entrada y Autor de la entrada.
Veamos cómo puedes personalizar la plantilla de entrada y recrear estos ejemplos. Para conseguir el diseño que vimos en el primer ejemplo, haz clic en Apariencia y después en Editor. Haz clic en el icono de WordPress o en el icono del sitio, ve a Plantillas y selecciona la plantilla de entrada individual. Haz clic en la Vista de lista para obtener una mejor visión de la estructura de la página y, primero, vamos a cambiar la alineación del título de la entrada al centro. Después, desplázate hacia abajo y busca los otros bloques del tema; selecciona el bloque Fila principal. Ahora vamos a arrastrar el bloque Fila hasta colocarlo debajo del bloque Título de la entrada en nuestra Vista de lista y después cambiaremos la alineación al centro. Cuando hayas terminado, haz clic en Guardar. Ahora podemos volver a la parte pública de nuestro sitio web para ver cómo se mostrará para alguien que visite tu sitio. Y ahí lo tienes.
Para recrear el segundo ejemplo, estamos de nuevo en el Editor del sitio y nos dirigiremos a Plantillas para seleccionar otra vez la plantilla de entrada individual. Lo primero que vamos a hacer es eliminar la cabecera, el bloque Título de la entrada, el bloque Imagen destacada de la entrada y todos los demás bloques del tema. Ahora vamos a añadir un bloque de portada en la parte superior de nuestra página. En la barra de herramientas del bloque hay una opción para añadir medios y, a la izquierda, una opción para usar la imagen destacada. Haz clic en Usar imagen destacada y selecciona un color de superposición. Selecciona el bloque de portada y cambia la opacidad a 80. Una vez hecho esto, haz clic en el Insertador y añade un bloque Fila; dentro del bloque Fila vamos a añadir el logotipo del sitio, después el título del sitio y, a continuación, el bloque Navegación. Seleccionaré uno de los menús que ya he creado. Cuando hayas hecho esto, selecciona los bloques Logotipo del sitio y Título del sitio y agrúpalos juntos en una fila.
A continuación, selecciona de nuevo el bloque Fila principal y, junto a la justificación, elige Espacio entre los elementos. Por último, selecciona el bloque Navegación y asegúrate de desactivar la opción Permitir que se ajuste a varias líneas. Después, vamos a seleccionar el bloque y enviarlo a la parte superior del bloque de portada. A continuación, voy a añadir mi bloque Título de la entrada y lo voy a alinear al centro. Ahora voy a añadir otro bloque Fila para agrupar la fecha de la entrada y el autor de la entrada. Primero, añadiré el bloque Fecha de la entrada y después el bloque Autor de la entrada. Volveré a seleccionar el bloque principal y cambiaré la justificación al centro. Después añadiremos un párrafo entre ambos y escribiremos un punto, que pondremos en negrita. Me aseguraré de haber seleccionado de nuevo el bloque principal y utilizaré los ajustes de la barra lateral para cambiar el espaciado del bloque a 10 píxeles y acercarlos. Después cerraré los ajustes de la barra lateral y la Vista de lista, y me aseguraré de aumentar el tamaño del bloque de portada. Por último, también puedes decidir eliminar el bloque Separador que está justo debajo del bloque de portada. Después, puedes volver a la parte pública del sitio web para ver los cambios en acción.
Si has modificado una plantilla, observarás que aparece un pequeño punto sobre la imagen, junto al nombre de tu tema. Si no estás satisfecho con los cambios, haz clic en los tres puntos verticales y selecciona Borrar personalizaciones. Ahora la plantilla ha vuelto a su estado original. Con esto llegamos al final de este tutorial.
Te deseamos lo mejor al personalizar tu propia plantilla de entrada, y visita Learn WordPress para encontrar más tutoriales y material de formación.