...
✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

15

En esta publicación, veremos cómo utilizar el editor de Gutenberg para crear portadas o páginas de destino modernas y atractivas. Veremos especialmente cómo usted, como desarrollador, puede ajustar el código de su tema para admitir esto. Esta guía es perfecta para aquellos que desean ajustar un tema antiguo para que sea compatible con Gutenberg o para aprender a desarrollar nuevos temas optimizados para Gutenberg.

Cuando WordPress presentó el nuevo editor Gutenberg en WordPress 5.0 (lanzado alrededor de diciembre de 2018), en su mayoría hizo innecesario el uso de un complemento de creación de páginas por separado. El editor de Gutenberg le brinda al autor de WordPress mucha flexibilidad y la posibilidad de crear contenido y diseños enriquecidos que antes no era fácil, a menos que el tema o un complemento les proporcionara la funcionalidad usando, por ejemplo, códigos cortos.

Obtiene mucho estilo para los bloques de Gutenberg listos para usar en WordPress, pero con un poco de trabajo en su tema y conocimiento sobre los bloques, puede agregar mucho más a la experiencia de Gutenberg. ¡Veamos cómo!

Habilitación de bloques anchos y de ancho completo

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

La mayoría de los bloques le permiten elegir alineaciones de bloques. Cuando está trabajando en Gutenberg en un tema no desarrollado para Gutenberg, puede elegir entre "Alinear a la izquierda", "Alinear al centro" y "Alinear a la derecha".

¿Pero sabías que en realidad hay dos más? Los otros dos, "Ancho ancho" y "Ancho completo" son perfectos para hacer una página de inicio o una página de destino. Veremos más de cerca cómo optimizar el diseño y el diseño de su tema para admitir bloques anchos y de ancho completo más adelante. Primero debe decirle a WordPress que agregue soporte para estas dos alineaciones de bloques en su tema.

En una función enganchada a after_setup_themeusted, simplemente llame a add_theme_support('align-wide'). Probablemente ya tenga una función de "configuración" en su tema, o si no, agregue esto en su tema functions.php:

add_action('after_setup_theme', function() { add_theme_support('align-wide'); });

Con este código activo en su tema, ahora debería obtener un total de cinco opciones para las alineaciones de bloques. Para algunos bloques, por ejemplo Columnas, obtienes solo los dos nuevos.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Hay ciertos tipos de bloques en los que puede establecer alineaciones de bloques; en su mayoría, son del tipo que admiten bloques anidados, es decir. un bloque que le permite agregar bloques dentro. Tales bloques populares son Portada, Columnas, Imagen, bloques incrustados, etc. El bloque Portada es un gran bloque para crear portadas o páginas de destino, como veremos a lo largo de esta publicación.

Usando el bloque de portada

El bloque Portada es definitivamente el mejor bloque cuando quieres construir una página de inicio o una página de destino dividida en secciones. Puede agregar cualquier tipo de bloque y tantos bloques como desee dentro de un bloque de portada. Con un bloque de portada, puede establecer un color de fondo, una imagen de fondo o una imagen de fondo con una superposición de color.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Combinado con la opción de establecer el ajuste del bloque en ancho o ancho completo (como hicimos anteriormente), el bloque de cubierta es una herramienta poderosa. Puede crear una página en la que todo el contenido resida dentro de secciones de bloques de portada de ancho completo con su propio color de fondo o imagen de fondo. Con el estilo y el diseño correctos en su tema, tiene un generador de portada moderno y completo.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

En WordPress 5.3 se produjo una mejora importante para el bloque de portada: un contenedor HTML interno. Esto significa que el bloque Portada tiene un elemento HTML para la sección en sí, con su color de fondo o imagen de fondo, y luego otro elemento HTML donde reside todo el contenido. Combine esto con una alineación de bloque de ancho completo: diseñe el elemento externo (con el color o la imagen de fondo) para que ocupe completamente el ancho y luego diseñe el elemento HTML interno con el contenido para que quepa en el contenedor de su tema.

Por ejemplo, suponga que su tema tiene un contenedor de ancho máximo de 1200 px. Probablemente ya tenga una clase HTML específica que tenga un estilo de ancho máximo, lo que garantiza que su contenido no se extienda por completo sin importar el tamaño de la pantalla. Agregue su estilo de ancho máximo al HTML interno de la portada; wp-block-cover__inner-containernombre de la clase Como ejemplo:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, .wp-block-cover.alignfull .wp-block-cover__inner-container { position: relative; width: 100%; max-width: 1200px; padding: 0 20px; }

En el código CSS anterior me dirijo a dos clases principales de Cover. La clase de bloque de portada principal cambia dependiendo de si elige o no una imagen de fondo. Cubrir bloques con una imagen de fondo obtiene la clase " wp-block-cover-image" y Cubrir bloques con un color de fondo obtiene la clase " wp-block-cover". Además, también apunto la alineación de bloque "Ancho completo" con la clase " alignfull". La alineación de bloque "Ancho ancho" obtiene la clase " alignwide". Agregue CSS para apuntar también a esta alineación de bloques, según lo que desee hacer.

Si ha comenzado a jugar con esto, es posible que haya encontrado problemas con el diseño general del tema. Es probable que su tema obligue a sus bloques de portada de ancho completo a no ocupar el ancho completo en absoluto. Veamos esto a continuación.

Diseño de tema y estilo de ancho completo

Hasta ahora, hemos agregado soporte para bloques anchos y de ancho completo y hemos aprendido a usar y optimizar el bloque Portada para que actúe como secciones de portada o página de destino. Pero en la mayoría de los temas, su HTML y diseño pueden evitar que el contenido de su publicación ocupe el ancho completo.

Su tema probablemente tenga una barra lateral derecha en una sola publicación o vista de página. Probablemente haya envoltorios HTML adicionales, incluido un elemento contenedor de ancho máximo, que evita que los bloques de ancho completo realmente tengan el ancho completo. Es probable que sus envoltorios también tengan un poco de márgenes o relleno, lo que nuevamente evita que los bloques de ancho completo toquen completamente los bordes de la pantalla. Pero debe hacer que una sola publicación o página se vea bien para las publicaciones en las que el usuario no usa bloques de portada también. Debe tener en cuenta sus contenedores al desarrollar para Gutenberg con soporte para bloques anchos y de ancho completo. Todo depende del diseño, HTML y estilo de su tema, pero veamos algunas ideas para resolver esto.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Una buena solución sería agregar opciones de publicación; metaconfiguraciones personalizadas para publicaciones y páginas que afectan el diseño de esa página. Puede hacer una configuración para ocultar la barra lateral o forzar el contenido de su publicación para que ocupe todo el ancho. Cree configuraciones de publicación manualmente agregando metaboxes, o use Campos personalizados avanzados para facilitar este proceso. Y luego, en su tema, obtiene la configuración de la publicación y maneja la salida HTML correspondiente.

Otras buenas opciones de publicación son ocultar el título de la página y/o ocultar la imagen destacada. Esto le permite crear contenido normalmente, pero para páginas específicas puede configurar fácilmente una página de destino completamente con bloques de portada de ancho completo. Al ocultar el título de la página estándar, puede crear un encabezado o una sección de llamada a la acción que se vea mejor para que actúe como el título de la página.

Crear estilos de bloque

Hay una característica poco conocida en WordPress Gutenberg; Los bloques pueden tener diferentes estilos. Puede ver los estilos de bloque en acción con el bloque Cita. Agregue el bloque en su editor y eche un vistazo al Inspector (barra lateral derecha). Encontrarás el tema “Estilos" y dos opciones entre diferentes estilos.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Cree estilos personalizados que faciliten la creación de portadas y páginas de destino. Sugiero al menos agregar estilos de bloque personalizados al bloque de encabezado, para que pueda crear estilos personalizados sin interrumpir los encabezados de las publicaciones normales. Cree un estilo de bloque para los títulos de las secciones con fuente extra grande y relleno adicional.

Mientras intenta crear portadas, tome nota de lo que tiene que personalizar repetidamente; esto podría ser una buena opción para un estilo de bloque.

Agregar estilos de bloque personalizados es realmente muy fácil y no requiere conocimientos de Javascript. Tengo un tutorial separado sobre cómo hacer esto si quieres aprender más sobre esto.

PD: si no ve estilos de bloque, es posible que su tema carezca de soporte para esto. El proceso es el mismo que hicimos para las alineaciones de bloques de ancho y de ancho completo; en el gancho after_setup_theme, agregas add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() { add_theme_support('wp-block-styles'); });

Uso de los colores del tema como paleta de colores

Si ha jugado con Gutenberg, probablemente haya notado que Gutenberg le ofrece un determinado conjunto de colores para el texto o el color de fondo. Por ejemplo, agregar un bloque de portada le pedirá que elija un color de una paleta de colores.

Tiene la opción de usar un selector de color para elegir o ingresar el color hexadecimal en el color exacto que desea. Puede acceder a esto haciendo clic en el enlace "Color personalizado". Pero si está utilizando el mismo conjunto de colores en su tema y quiere mantenerlo consistente, puede ser engorroso recordar e ingresar constantemente los mismos códigos de color hexadecimales cada vez.

¡Afortunadamente, WordPress Gutenberg te permite definir la paleta de colores! Este es otro add_theme_support()en el que proporciona una variedad de colores que desea en la paleta. En una función enlazada a after_setup_theme, haz esto:

En el código anterior, agregamos soporte de tema para ‘ editor-color-palette‘ y, como segundo parámetro de la función, definimos una matriz de todos los colores que queremos. Cada color requiere los atributos name, slugy color. namees lo que aparece cuando pasas el mouse sobre el color en la paleta. sluges el nombre de clase que se agregará al elemento de bloque. Y colordefine el código hexadecimal para su color.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Tenga en cuenta que debe agregar estilos en su CSS para cada una de estas clases (definidas por slug). WordPress no aplica automáticamente el color hexadecimal en sus bloques aunque le digamos a WordPress cuál es el código de color.

Como ejemplo, la imagen de la derecha es mi paleta de colores que he definido para el tema de este sitio, para A White Pixel:

Estos son los colores de mi tema y en el 95% de los casos usaré uno de estos colores, ya sea como fondo o como color de texto. En casos raros, puedo sacar el selector de color, pero tener los sospechosos habituales ya definidos en la paleta de colores hace que la vida sea mucho más fácil.

Un consejo es asegurarse siempre de agregar negro puro (#000000) y blanco puro (#FFFFFF) en su paleta de colores. Probablemente también sea una buena idea tener uno o dos colores grises claros.

Usar una portada estática y optimizar la plantilla de la portada

Probablemente ya sepas sobre esto, pero lo mencionaré de todos modos. En WordPress, puede configurar una página estática como página principal yendo a Configuración> Lectura.

Guía para desarrolladores: uso de WordPress Gutenberg para portada y páginas de destino

Por defecto, la página principal de WordPress muestra una lista de las publicaciones más recientes. Pero si selecciona "Una página estática" y elige una página del menú desplegable, WordPress mostrará esta página como la página principal de su sitio.

Esta es una obviedad al configurar una página principal para su sitio de WordPress. En la página seleccionada, puede crear la página principal utilizando todos los trucos mencionados anteriormente. Por ejemplo, es posible que tenga opciones de publicación sin marcar para mostrar el título de la página, la barra lateral y la imagen destacada. Y la página está totalmente construida con contenido y bloques de portada de ancho completo. Sin embargo, puede optar por no ir a la ruta de opciones de publicación (ocultar barra lateral, etc.) y simplemente hacer una plantilla de página principal para reemplazar o aplicar estas.

Cuando su WordPress está configurado como una página estática como página principal, WordPress buscará la plantilla front-page.phpen su tema. Esto se usará en lugar de page.php. Esto le permite crear y ajustar una plantilla separada que se usa solo para su portada.

En esa front-page.phpplantilla, ya puede definir HTML para asegurarse de que los bloques ocupen todo el ancho, no tengan barra lateral, título de página ni imagen destacada. Es posible que desee simplemente hacer solo the_content()para mostrar el contenido de la página en su totalidad.

Por ejemplo, esto es lo que tengo en el tema de este sitio front-page.php. Mientras que en todas las demás plantillas, como page.php, tengo muchas salidas para la barra lateral, el título de la publicación, etc., esta es la extensión total de mi bucle en front-page.php:

while (have_posts()): the_post(); the_content(''); endwhile;

Eso es todo. Mis clases y HTML envolventes aseguran que el contenido de la publicación sea completamente de ancho completo.

Recuerde que esta es una buena solución si usted, como usuario del tema, comprende cómo funcionan sus plantillas. Sé que todo el contenido de mi página principal debe estar completamente envuelto dentro de los bloques de portada. Confío en el HTML del contenedor interno del bloque Cover para garantizar que mi contenido se vea bien y caiga en un contenedor de ancho máximo. Si tuviera que agregar un bloque de Párrafo simple sin un bloque de Cubierta envolvente, no se vería bien porque le faltaría relleno a los lados.

Hacer que el encabezado de su sitio sea transparente en el primer bloque de portada

Una característica muy común en los sitios web modernos es hacer que el encabezado sea transparente en la página principal. A medida que el usuario comienza a desplazarse hacia abajo en la página, el encabezado cambia a un estilo fijo y obtiene un fondo. Pero mantener un encabezado transparente puede verse muy bien cuando podemos ver los colores o la imagen detrás de la primera sección.

Hago esto en la página principal de este sitio. ¡Echar un vistazo! En la parte superior de la página, mi encabezado no tiene fondo y muestra el fondo de la sección de degradado púrpura (un bloque de portada) detrás. Una vez que comienza a desplazarse, obtiene un fondo sólido fijo.

Tenga en cuenta que debe tener en cuenta los colores de su encabezado y el fondo de la primera portada. Si su encabezado consta de un logotipo blanco y elementos de menú blancos (como el mío), no puede usar este truco con un bloque de portada que tiene un fondo claro. ¡Eso haría que su encabezado fuera ilegible!

Si desea hacer esto, tenga en cuenta que requiere un poco de conocimiento de Javascript. Pero en realidad es muy simple. Voy a repasar los conceptos básicos para usted:

Todo mi elemento de encabezado siempre es position: fixed. Debido a que normalmente no quiero que mi contenido desaparezca detrás del encabezado, agregué una parte superior de relleno en el elemento del cuerpo, empujando el contenido hacia abajo debajo del encabezado. Sin embargo, agregué una regla de que si estamos en la plantilla de la página principal, este relleno no se agregará. Eso asegura que solo en la portada, la parte del cuerpo aparecerá detrás del encabezado. Luego apunto el primer bloque de portada en la página principal y agrego un relleno superior adicional, para garantizar que el contenido de este primer bloque no se superponga detrás del encabezado, lo que le da un buen relleno después del encabezado.

Y luego agregué un código Javascript muy simple usando jQuery:

Lo que hace este código es agregar una clase ‘ navbar-fixed‘ cuando la página se desplaza más de 60 px hacia abajo. Y en mi CSS simplemente me dirijo a esta clase y agrego un color de fondo fijo. Sin esta clase, el fondo del encabezado es transparente en la página principal.

Eso es lo básico. Juega con el CSS: ajusta el "punto de punta" de Javascript y usa, por ejemplo transition, la propiedad para hacer una transición más suave cuando se aplica el color de fondo.

Grandes bloques para portadas y páginas de aterrizaje

WordPress ofrece una gama completa de bloques listos para usar. Algunos de ellos son especialmente útiles cuando se construye una página principal o una página de destino. Si ya está familiarizado con todos los bloques disponibles, probablemente ya los conozca.

  • columnas _ Un bloque que permite bloques anidados, lo que significa que puede agregar cualquier bloque dentro de cada columna. También puede agregar columnas dentro de un bloque de portada. Perfecto para estructurar contenidos en columnas. Puede decidir el número de columnas y para cada columna puede decidir su ancho. Todos pueden tener anchos iguales o anchos personalizados.
  • grupo _ Otro bloque que permite bloques anidados. Genial para establecer un fondo de color alrededor de un montón de otros bloques (como un título y un par de párrafos).
  • botón _ No hay portada sin botones. Los botones son geniales como llamada a la acción y para dirigir a tus visitantes a donde quieres que vayan. Puede personalizar el aspecto y el diseño del botón. ¡Combine esto con estilos de bloques personalizados para botones!
  • espaciador _ Si siente que le falta espacio en sus secciones, agregue un bloque espaciador, que es simplemente espacio sin ningún contenido. Puede definir la altura del espaciador.
  • separador _ Similar al bloque espaciador, pero agrega una bonita línea. Otra opción para separar claramente el contenido. Personaliza el diseño de la línea en el CSS de tu tema o agrega estilos de bloque personalizados.
  • galería. Excelente para mostrar imágenes. Tiene soporte para la alineación de bloques de ancho completo, por lo que puede crear una galería de imágenes de ancho completo en su página principal.
  • Medios y texto. Una buena manera fácil de alinear una imagen o un medio junto al texto. Podría ser una mejor opción que las columnas en algunos casos.
  • Incrustaciones: Youtube ++. WordPress ofrece un montón de incrustaciones para medios. Por ejemplo, puede reproducir un video de YouTube de ancho completo en su página principal.
  • Widgets: campo de búsqueda, últimas publicaciones, calendario ++. WordPress ofrece algunos buenos elementos de contenido predeterminados. Si desea mostrar una lista de publicaciones recientes o una barra de búsqueda en su página de destino, hágalo.

Sin embargo, si siente que le faltan bloques para hacer lo que quiere, la solución es crear sus propios bloques personalizados.

Creación de bloques personalizados

Una característica muy común en una portada o página de destino es un elemento de "acceso directo"; donde elige una publicación o página, y genera un bloque que vincula a la publicación, que contiene la imagen destacada, el título de la publicación, posiblemente el extracto. Al momento de escribir esto, no existe tal opción en WordPress estándar. Tendría que hacer manualmente este acceso directo usted mismo, insertando manualmente la misma imagen destacada que la publicación, escribiendo manualmente el título y el extracto de la publicación, y envolviendo todo en un enlace.

Otros ejemplos de bloques que son muy útiles para la creación de portadas y páginas de destino son los controles deslizantes/carruseles, las tablas de comparación de precios y los testimonios.

Para optimizar este tipo de bloques, debe encontrar un complemento que le proporcione esto (no he explorado esta opción) o hacerlo usted mismo. Hacer sus propios bloques personalizados requiere un conocimiento significativo de Javascript y React y una gran cantidad de codificación. Sin embargo, recomiendo seguir esta ruta si te tomas en serio ser un desarrollador de WordPress.

Si está interesado en aprender a crear bloques personalizados para Gutenberg, tengo una serie de tutoriales que explica esto en detalle.

También puede optar por una ruta más fácil y comprar Advanced Custom Fields Pro (ACF). Con este complemento, puede crear bloques de Gutenberg personalizados sin ningún conocimiento de Javascript. Simplemente controla la salida de PHP de los bloques y deja que ACF maneje la parte de Javascript. Pero tenga en cuenta que esto crea una dependencia de su tema a un complemento con licencia.

Conclusión

¡Espero que esta publicación te haya ayudado a desarrollar aún más tus habilidades y conocimientos con WordPress Gutenberg! Al momento de escribir esto, realmente hay una falta de información y experiencia sobre cómo optimizar su tema para Gutenberg. Me costó especialmente encontrar algo sobre cómo construir bien una página principal. Así que esto es lo que he aprendido al experimentar y jugar mucho.

Fuente de grabación: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More