estilos personalizados WordPress: Cómo Agregar Estilos Personalizados a Blo…

Si buscas personalizar tus bloques en WordPress, añadir estilos personalizados es una excelente opción. En esta guía, te explicaremos cómo hacerlo de manera sencilla utilizando PHP.nn

¿Qué son los Estilos de Bloques?

Los estilos de bloques son opciones que puedes seleccionar al editar un bloque en el editor de Gutenberg. Permiten aplicar diferentes estilos a un mismo bloque, lo que se logra mediante la adición de una clase CSS a su contenedor.

Ventajas de Registrar Estilos Personalizados

Registrar estilos personalizados te permite tener diseños variados para tus bloques, adaptándolos a diferentes contextos de tu sitio. Por ejemplo, si tu sitio tiene un diseño predominantemente blanco, un estilo de bloque con borde puede hacer que las imágenes se destaquen mejor.

Facilidad de Uso

Al registrar estos estilos, los usuarios pueden aplicarlos sin recordar nombres de clase, lo que resulta en una experiencia más fluida, especialmente en sitios de clientes.

También podés ampliar este tema con Cómo Agregar Estilos Personalizados a Bloques en WordPress.

Como referencia general, también se puede consultar Wikipedia sobre estilos personalizados WordPress.

Cómo Registrar un Nuevo Estilo de Bloque

Para registrar un estilo, se utiliza la función register_block_style en PHP. Esta función requiere dos argumentos: el bloque al que deseas añadir el estilo y un array con las propiedades del estilo.

Ejemplo de Registro

Para añadir un estilo llamado “Simple” a un bloque de lista, puedes usar el siguiente código:

function registrar_estilos_bloques() { register_block_style( 'core/list', [ 'name' => 'list-simple', 'label' => 'Simple' ] ); } add_action( 'init', 'registrar_estilos_bloques' );

Registrar Múltiples Estilos

Para añadir varios estilos a un bloque, puedes utilizar un array, simplificando el proceso de registro:

function registrar_estilos_bloques() { $estilos = [ 'core/list' => [ [ 'name' => 'list-simple', 'label' => 'Simple' ], [ 'name' => 'list-checkmark', 'label' => 'Con Marca' ] ] ]; foreach ( $estilos as $bloque => $estilos_bloque ) { foreach ( $estilos_bloque as $props_estilo ) { register_block_style( $bloque, $props_estilo ); } } } add_action( 'init', 'registrar_estilos_bloques' );

Estilizando los Estilos de Bloque con CSS

Después de registrar tus estilos, es necesario agregar CSS para que se reflejen visualmente en tu sitio. Puedes hacer esto de varias maneras: utilizando un archivo CSS externo o incluyendo estilos en línea.

Ejemplo de CSS en Línea

Para aplicar un estilo de lista con marcas de verificación, puedes usar el siguiente código:

function registrar_estilo_lista_checkmark() { register_block_style( 'core/list', [ 'name' => 'list-checkmark', 'label' => 'Con Marca', 'inline_style' => '.wp-block-list.is-style-list-checkmark { list-style: checkmark; }' ] ); } add_action( 'init', 'registrar_estilo_lista_checkmark' );

Definir un Estilo como Predeterminado

Si deseas establecer un estilo personalizado como el predeterminado para un bloque, puedes hacerlo añadiendo la propiedad is_default:

register_block_style( 'core/list', [ 'name' => 'list-default', 'label' => 'Predeterminado', 'is_default' => true ] );

Eliminar un Estilo Registrado

Si necesitas eliminar un estilo ya registrado, puedes utilizar la función unregister_block_style:

function eliminar_estilo_lista_checkmark() { unregister_block_style( 'core/list', 'list-checkmark' ); } add_action( 'init', 'eliminar_estilo_lista_checkmark' );

Con estos pasos, podrás personalizar los bloques de Gutenberg en tu sitio de WordPress de manera eficiente y adaptada a tus necesidades específicas.

nnPor qué este tema es relevante para el posicionamiento digital actualnnnTendencias que las empresas deberían considerarnLa evolución del ecosistema digital exige integrar estrategias de contenido, SEO semántico e inteligencia artificial para sostener la competitividad online en los próximos años.

Preguntas frecuentes

¿Qué son los estilos personalizados en WordPress?

Los estilos personalizados son opciones que puedes aplicar a bloques en el editor de Gutenberg, permitiendo diferentes diseños mediante clases CSS.

¿Cómo puedo registrar estilos personalizados para bloques en WordPress?

Para registrar estilos, utiliza la función register_block_style en PHP, especificando el bloque y las propiedades del estilo.

¿Cuáles son las ventajas de usar estilos personalizados en bloques?

Los estilos personalizados permiten diseños variados y mejoran la experiencia del usuario al facilitar la selección de estilos sin recordar nombres de clase.

¿Puedo eliminar un estilo registrado en WordPress?

Sí, puedes eliminar un estilo registrado utilizando la función unregister_block_style en PHP.

¿Cómo puedo definir un estilo como predeterminado para un bloque?

Para establecer un estilo como predeterminado, añade la propiedad is_default al registrar el estilo con register_block_style.

Lecturas relacionadas

• Cómo Agregar Estilos Personalizados a Bloques en WordPress