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 :-):
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.
