• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar cuadros de alerta en el contenido de WordPress

Agregar cuadros de alerta en el contenido de WordPress

Agregar cuadros de alerta en el contenido de WordPress

[ 22 abril 2019 ] [ Actualizado: 29 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

css editor

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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:

cuadros alerta en el contenido

Es posible que algunos themes ya incluyan estos cuadros de alerta, especialmente los themes que usan Bootstrap, revisa tu theme antes en caso ya lo incluya.

 

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

Puedes usar este código al final de tu archivo style.css de tu child-theme

 

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.

ver HTML para insertar clases CSS

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

Clase CSS en el bloque

 

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:

Mostrar CSS de alertas en el editor Gutenberg

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Estilos de editor en GutenbergEstilos de editor en Gutenberg
  • Incluir Bootstrap en WordPressIncluir Bootstrap en WordPress
  • Fijar Widget lateral en WordPress sin pluginsFijar Widget lateral en WordPress sin plugins
  • Posts relacionados sin pluginsPosts relacionados sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Max

    1 abril, 2020

    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?

    • Jhon Marreros Guzmán

      2 abril, 2020

      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.

  2. Any

    28 abril, 2021

    hola, tengo woocommerce y me gustaría que me ayudaras mas en concreto a poner una ALERTA cuando se termine la compra, que ahí mismo aparezca el cuadrito que diga GRACIAS POR SU COMPRA, he estado buscando pero no encuentro nada al respecto y lo único que tengo esto:

    function alert(){
    alert(“Gracias por su compra, lo esperamos pronto!!”);
    }

    function add_action( ‘woocommerce_after_checkout_form’, ‘add_checkout_top_text’, 11 );

    function add_checkout_top_text() {

    wc_print_notice( ‘Gracias por su compra, lo esperamos pronto!!’ );
    }

    Se que esta mal y me gustaría saber como queda listo pero no se como estructurar todo eso.

    • Jhon Marreros Guzmán

      28 abril, 2021

      ¿No te es suficiente con el mensaje que da WooCommerce?, si quieres cambiar el texto del mensaje puedes cambiar los textos de traducción. La función alert() es javascript, te vas a complicar innecesariamente.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

WordPress Multisite para gestionar una red de sitios

Productos de ejemplo en WooCommerce

Eliminar campo URL de los comentarios de WordPress

Animación de saltos de enlace en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados