Propiedades avanzadas de los bloques

En este artículo vamos a analizar un aspecto de uso de los bloques del nuevo editor de WordPress al que todavía no hemos prestado la debida atención. Nos referimos a la opción «Avanzado», que aparece en último lugar en la columna de propiedades de los bloques, y mediante la cual se puede modificar su apariencia. Para ello es necesario acudir al uso de técnicas especiales, que explicamos a continuación.

1. Las propiedades avanzadas de los bloques

La opción Avanzado de las propiedades de los bloques muestra un campo desde el cual se pueden invocar estilos CSS. Gracias a estos estilos es posible modificar totalmente la apariencia de uno o varios bloques. Para conseguirlo, basta con escribir en el campo titulado «Clase CSS adicional» el nombre del estilo o clase CSS; si se quieren utilizar varias clases a la vez, estas deben estar separadas por un espacio.

Por tanto, si se han definido dos clases CSS denominadas .bloque-azul y .bloque-con-borde-negro y se quieren aplicar ambas clases a un bloque, lo que hay que escribir en el campo «Clase CSS adicional» es lo siguiente:

bloque-azul bloque-con-borde-negro.

Debe tenerse en cuenta que la opción Avanzado solo permite llamar a los estilos, pero no dispone de ningún medio para crearlos. Por tanto, quien quiera utilizar esta funcionalidad, ha de valerse de alguna de las técnicas que hacen posible utilizar estilos CSS en WordPress. Existen varias, pero la única que está disponible para todos los usuarios administradores en los sitios web alojados en los servidores del PNTE es la que hace uso del personalizador de temas de WordPress.

No es este el lugar para explicar en detalle cómo se escribe código CSS en el personalizador de temas, pero baste decir por ahora que, para acceder a dicha funcionalidad, hay que iniciar sesión con el rol de administrador e ir al menú Apariencia > Personalizar > CSS adicional, desde donde se pueden crear los estilos necesarios.

Advertencia muy importante: la edición de estilos CSS debe utilizarse con cuidado, ya que un estilo mal definido puede estropear o modificar negativamente la apariencia del sitio web.

2. Algunos ejemplos de estilos CSS

Como ilustración de la técnica que acabamos de explicar, hemos creado tres bloques a los que hemos aplicado sendos estilos CSS:

• El primero es un párrafo al que se ha aplicado una clase CSS definida a tal efecto, denominada .bloque-recuadrado. Bajo el párrafo de ejemplo puede verse el código correspondiente, que se ha creado mediante el personalizador de temas, desde el menú Apariencia > Personalizar > CSS adicional.
• El segundo es un titular <h2> de fondo negro y texto de color blanco. En este caso, la clase CSS se llama .titular-negro, y también se ha definido mediante el personalizador de temas.
• El tercero es un párrafo al que se ha añadido un icono vectorial, tomado de la fuente Dashicons. A este icono se le ha aplicado una animación, a su vez adaptada de los ejemplos que ofrece WAIT! Animate.

El resultado de los bloques puede verse a continuación. Tras cada uno de los bloques hemos incluido el correspondiente código CSS.

Sed varius, eros et sagittis sagittis, purus lacus volutpat nisi, id lacinia justo tellus in lorem. Integer mollis libero at fringilla mollis. Praesent eu nisl mi. 

/* Bloque rojo recuadrado con guiones y con texto negro*/

.bloque-recuadrado {
	font-size: x-large;
	color: white;
	padding: 10px;
	background-color: #dc143c;
	border: 5px;
	border-style: dashed;
	border-color: black;
	box-shadow: 5px 10px #888888;
}

Sed varius, eros et sagittis sagittis

/* Titular de color amarillo con fondo negro */

.titular-negro {
	color: yellow;
	background-color: black;
	padding: 10px;
}

Al final de este párrafo aparece el icono de un teléfono que vibra como si estuviera sonando.

/* Efecto de vibración */

.ring {
  animation: ring_9612 2.4s ease infinite;
  color: red;
  font-size: 200%;
}

@keyframes ring_9612 {
  0% { transform: rótate(-15deg) }
  1.66667% { transform: rotate(15deg) }
  3.33333% { transform: rotate(-18deg) }
  5% { transform: rotate(18deg) }
  6.66667% { transform: rotate(-22deg) }
  8.33333% { transform: rotate(22deg) }
  10% { transform: rotate(-18deg) }
  11.66667% { transform: rotate(18deg) }
  13.33333% { transform: rotate(-12deg) }
  15% { transform: rotate(12deg) }
  16.66667% { transform: rotate(0deg) }
  100% { transform: rotate(0deg) }
}

3. La potencia de los estilos CSS

Los estilos definidos en el personalizado de temas de WordPress se pueden aplicar tantas veces como convenga, no solo a cualquier bloque de cualquier artículo, sino también a otros elementos, como widgets, entradas de menús, etc. La potencia y versatilidad de esta técnica es indiscutible, aunque al mismo tiempo exige una cuidadosa planificación.

4. Recursos sobre CSS

Para dominar el uso de los estilos CSS hay que emplear mucho tiempo y dedicación. Como estos recursos son, a menudo, bienes muy escasos, recomendamos utilizar alguna de entre las muchas herramientas online que permiten generar, de forma visual e intuitiva, los estilos necesarios. En la página Recursos hemos incluido media docena de referencias.