Tabla de contenido
Una vez más aquí. En el día de hoy vengo a dejar un pequeño artículo relacionado con algo sobre lo que me preguntó un usuario el otro día (hace ya un par de semanas, pero me había olvidado de hacer este artículo). El caso es que este usuario me preguntó cómo podía mostrar cuadros de alerta en su instalación de Wordpress con los que destacar algún texto del contenido de sus artículos, todo sin tener que añadir más plugins.
Algunos temas para esta plataforma ya permiten utilizar este tipo de cuadros, sobre todo si utilizan Bootstrap. Pero para todos aquello que no usen esta biblioteca y que no tenga disponibles los cuadros de alerta, pueden crearlos de forma bastante sencilla mediante un poco de CSS.
Crear cuadros de alerta en Wordpress
El código CSS
Tan solo vamos a tener que añadir el siguiente código al archivo style.css de nuestro tema o del tema hijo que estemos utilizando. En el código que vamos a utilizar veremos que se va a usar una clase general llamada alerta, y después clases específicas para cada una de las alertas. El código CSS que tendremos que añadir será el siguiente:
.alerta {
font-family: monospace,Helvetica;
font-size: .90rem;
padding: 15px;
border: 1px solid #000;
border-radius: 5px;
}
.alerta-informacion {
color: #40716b;
background-color: #8afff1;
border-color: #85b6b0;
}
.alerta-correcto {
color: #4a7c44;
background-color: #98ff8a;
border-color: #b8d6b4;
}
.alerta-alert {
color: #76763d;
background-color: #ffff8a;
border-color: #bbbb92;
}
.alerta-peligro {
color: #6c2b31;
background-color: #fe6876;
border-color: #e3b7bc;
}Una vez añadido el anterior código al archivo style.css, solo queda guardar y volver a subir el archivo a nuestro hosting.
¿Cómo utilizar los cuadros de alerta?
Utilizar estos cuadros de alerta es muy sencillo. Desde el editor Gutenberg tendremos la opción de editar como HTML cada uno de los párrafos. Así será como podremos usar las clases CSS que acabamos de crear.
Así cada uno de los mensajes que queramos mostrar, solo tendremos que escribirlos, editarlos como HTML y añadir la clase CSS que queramos mostrar.
<p class="alerta alerta-informacion">Esto es un cuadro de alerta de la clase información</p>
Esto es un cuadro de alerta de la clase información
<p class="alerta alerta-correcto">Esto es un cuadro de alerta de la clase información</p>
Esto es un cuadro de alerta de la clase correcto
<p class="alerta alerta-alert">Esto es un cuadro de alerta de la clase alert</p>
Esto es un cuadro de alerta de la clase alert
<p class="alerta alerta-peligro">Esto es un cuadro de alerta de la clase peligro</p>
Esto es un cuadro de alerta de la clase peligro
Como se puede ver, si tu theme no tiene estos cuadros de alerta, se pueden utilizar de forma sencilla utilizando tan solo algo de CSS, y sin necesidad de utilizar plugins.