Crear cajas de colores para destacar contenido

Cómo añadir cajas de colores para destacar contenido

En esta ocasión veremos cómo podemos crear cajas de colores para destacar contenido dentro de nuestro WordPress. En primer lugar, crearemos el código necesario y después podremos usarlo mediante un shortcode.

Ya verás lo sencillo y vistoso que puede resultar este efecto.

Destacar contenido… ¿es algo necesario?

¿Alguna vez has necesitado destacar un texto con un color llamativo?, me refiero a destacarlo ya sea poniéndolo en negrita, cambiando el color de la fuente utilizada, aumentándole el tamaño de letra… ¿Y no crees que hubiera sido más sencillo poder crear una clase que pudieras utilizar cuando lo necesitaras?.

¿Y que tal si en lugar de crear una clase, creas una función que puedas utilizar en cualquier parte de tu web?. Pues esto es precisamente lo que vamos a hacer en esta ocasión: crear una función que formatee un bloque de texto, y después aplicar esos estilos en cualquier parte de nuestro WordPress, mediante un shortcode.

Código para crear las cajas de colores para destacar contenido

En esta ocasión utilizaremos este código, lo que haremos será crear una caja amarilla que haga que el contenido que pongamos dentro de de esa caja, destaque sobre el resto de contenido de tu web.

Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.

¡Nos vemos dentro!

Una vez que se agrega el código, cualquier texto envuelto dentro del shortcode aparecerá en un cuadro de color amarillo destacado.

¿Dónde debemos colocar este código?

A estas alturas, ya deberías saber que este código podemos pegarlo directamente en el archivo functions.php de tu tema activo (no recomendado, se pierden los códigos cuando actualices el tema), en tu plugin de funciones, o como snippet de código.

Ya sabes que personalmente te recomiendo hacerlo en tu plugin de funciones.

Cajas de colores para destacar contenido: el efecto en acción

Para crear el efecto, debemos utilizar este shortcode:

Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.

¡Nos vemos dentro!

Vamos a hacer un ejemplo con este texto:

Nota
Cada semana publico un artículo nuevo con al menos un código nuevo.

Y así es cómo quedará este efecto para destacar contenido, por cierto, mira qué bien me viene este artículo y su ejemplo :-):

Nota
Cada semana publico un artículo nuevo con al menos un código nuevo.

Ni que decir tiene que puedes crear tantas cajas con tantos colores como quieras o necesites, tan sólo debes cambiar el nombre de la función y del shortcode que quieras utilizar, y evidentemente, el color de fondo para la cajita.

Este artículo ha sido visitado: 11 veces

Obtén acceso a los secretos mejor guardados de WordPress con solo un clic

Suscríbete a la newsletter y recibe en tu correo electrónico 10 snippets de código exclusivos que nunca se han publicado en nuestra membresía y que nunca se publicarán.

Obtén la ventaja definitiva en WordPress y conviértete en un experto.

leadmagnetcodigos

PDF

10 códigos para WordPress, Divi y WooCommerce, que nunca han sido publicados aquí, ni se publicarán

Deja que WordPress trabaje por ti, utiliza código.