¿Te gustaría destacar algún texto como parte del contenido de tus entradas?, ya sea para mostrar mensajes de advertencia, éxito, información o peligro. En este artículo veremos cómo agregar estos cuadros de alerta de manera simple a través de código CSS.
Resultado Final
Al final lo que obtendremos será algo similar a lo que se muestra en la siguiente imagen:
Código CSS para agregar cuadros de alerta
Puedes agregar el siguiente código:
.alert {
font-family: Helvetica, sans-serif;
font-size: .85rem;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
En el código anterior verás que hay una clase general llamada alert y luego clases específicas alert-success, alert-danger, alert-warning, alert-info
Usando el código CSS
Para usar el código CSS tienes dos opciones:
Ver código HTML
Desde el editor Gutenberg de WordPress tienes la opción de ver el código HTML de un bloque de párrafo, tal como se muestra en la siguiente imagen.
Luego puedes agregar las clases CSS al párrafo, agregas la clase genérica alert y la clase específica, en el ejemplo alert-info
<p class="alert alert-info">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
</p>
Sección Avanzado
La otra opción para agregar las clases CSS es desde la opción de avanzados para un bloque de párrafo, tal como se muestra en la imagen
Bonus: Agregar clases CSS para el editor
La gracia de Gutenberg es mostrar el contenido lo más parecido posible a lo que se verá en el front-end, por lo tanto algo que podría ser útil es mostrar las alertas igualmente en el editor, para esto puedes agregar estilos al editor, creando un archivo llamado style-editor.css, colocar este archivo al mismo nivel de functions.php de tu theme o child-theme y luego usar el código CSS anterior.
Adicionalmente tienes que agregar el siguiente código PHP en tu archivo functions.php
function dcms_editor_css_support(){
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
}
add_action( 'after_setup_theme', 'dcms_editor_css_support' );
Con esto verás que los bloques de alerta aparecen igualmente en el editor, tal como se muestra en la siguiente imagen:
Conclusión
Tal como vemos, si tu theme no tiene estas cajas de alerta puedes agregarlas fácilmente a través de código, no es necesario usar un plugin para esto.
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando…
Hola! Agrego el código css al style.css y en la entrada en modo texto (no tengo gutenberg) pongo Hola pero nada. No hay cuadro. Que puede ser?
Hola, primero asegúrate de haber puesto los estilos CSS al contenedor, por ejemplo la clase : alert alert-info , luego verifica con el inspector de código, ya que es posible que igual tu theme sobreescriba estos estilos. Si sigues con problemas puedes comunicarte a través del formulario de contacto y enviar la url de tu sitio para verificar.