Inicio Informática Cuadros de alerta en Wordpress, ¿cómo añadirlos de forma sencilla?

Cuadros de alerta en Wordpress, ¿cómo añadirlos de forma sencilla?

Añade cuadros de alerta a Wordpress sin necesidad de plugins

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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:

codigo css alerta
.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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.