Crear cajas de colores para destacar contenido

Tiempo estimado de lectura: 8 minutos

 

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.

function crear_cajamarilla($atts, $content = null) {
return '<p style="background: none repeat scroll 0 0 #ffff00; clear: both; margin-bottom: 18px; overflow: hidden; border: 2px solid #000; padding: 13px;">' . do_shortcode($content) . '</p>';
}
add_shortcode('cajamarilla', 'crear_cajamarilla');

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:

[ cajamarilla]Aquí irá el texto que quieres destacar.[ /cajamarilla]

Nota
Le he puesto un espacio entre el corchete /[/ y el shortcode para que no se ejecute este código y puedas copiarlo. Recuerda que debes quitárselo cuando pruebes este código.

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

Nota
Le he puesto un espacio entre el corchete /[/ y el shortcode para que no se ejecute este código y puedas copiarlo. Recuerda que debes quitárselo cuando pruebes este código.

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.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *