• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir una clase CSS a las páginas que usan Gutenberg

Aprende a introducir una clase CSS en las páginas que utilizan Gutenberg en tu child theme de Genesis Framework mediante código.

El nuevo editor de WordPress no solo modifica cómo creas la entradas (mediante bloques), sino también cómo se visualizan.

Y, dependiendo del tema, este cambio será más o menos notable.

Lo primero que debes hacer para adaptar el diseño a tus necesidades estéticas, es dar estilos a los nuevos bloques.

Pero también puedes otorgar una clase CSS a las páginas que utilicen Gutenberg para aplicar determinados estilos solo en ellas.

¿Te interesa? Usa el siguiente código.

Snippet para insertar una clase personalizada a las páginas con Gutenberg

Añade la siguiente línea en functions.php:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Este fragmento te permite utilizar el selector CSS «.gutenberg-page» para aplicar estilos específicos en las páginas creadas con Gutenberg.

El snippet de arriba está pensado para cuando Gutenberg está en formato plugin, pero si ya estás utilizando WordPress 5.0 (o superior) el editor está integrado en el core (y algunas funciones han cambiado de nombre). En ese caso, utiliza este otro:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Conclusiones

Introducir una clase CSS a las páginas que usan el nuevo editor de WordPress resulta muy útil para maquetarlas tal y como deseas. 

Y ahora ya sabes cómo hacerlo con un bloque de código. 😉 

Si estás interesado en adaptar un child theme a Gutenberg, consulta el tutorial que incluye todos los cambios que debes realizar para asegurarte de que tu child theme es compatible con el nuevo editor de WordPress.

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).

CSS Editor de bloques Página PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?