cajas-mensajes

Cajas de mensaje con shortcodes y dashicons

Shortcodes usa lenguaje PHP para definir su uso.

Afortunadamente hay muchos scripts, snippets, hacks, porciones de código o simples funciones que podemos usar. Como shortcode, en nuestro WordPress y nos simplifican las cosas. Pudiendo de esa manera añadir un botón de enlace sin tener que escribir código HTML, por ejemplo.

En este post veremos cómo crear nuestras propias cajas de alerta o cajas de información mediante shortcodes que podamos poner en nuestra página o post.



Además vamos a usar personalizando widgets wp con dashicons para personalizar nuestras cajas con los iconos de WordPress.

Crear cajas de mensaje con Shortcodes y Dashicons

Edita el archivo functions.php de tu tema y añade el siguiente código

function alertbox($atts, $content=null, $code="") {
$return = '<div class="alert">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('alert' , 'alertbox' );

Este sería el código para la caja de alerta, vamos a crear dos más para la caja de información y la de éxito.

function infobox($atts, $content=null, $code="") {
$return = '<div class="info">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('info' , 'infobox' );
function correctbox($atts, $content=null, $code="") {
$return = '<div class="correcto">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('correcto' , 'correctbox' );

Hemos creado tres funciones, una para cada caja.

Explicando el código

Se crea la función Alertbox y se establece un valor predeterminado para el contenido como nulo o que no hay ningún texto predeterminado que se inserta.

El primer $return es el comienzo de una clase Div llamada “alert”.

El segundo $return es la búsqueda de cualquier texto que se inserta entre los corchetes.

El tercer $return está cerrando la Clase Div “alert”.

La última línea que dice “add_shortcode se desglosa de la siguiente manera:

‘alert’ está definiendo lo que se coloca entre [], es decir el shortcode.

‘alertbox’ aquí se declara el nombre de la función, como se indica en la primera línea.

Añadiendo CSS a nuestras cajas

Ahora que has escrito el código PHP, necesitarás darle estilo a tu shortcode.

Como hemos dicho anteriormente, para ilustrar este ejemplo vamos a crear tres tipos de cajas diferentes: Una de alerta, otra de información o aviso y otra de éxito o correcto.

Además, y aprovechando lo aprendido en el tutorial anterior, vamos a personalizar esas cajas con los iconos de WordPress Dashicons. Vamos a ello.

Dependiendo de la caja que queramos mostrar crearemos los siguientes estilos para el color de fondo de cada caja, además le añadiremos un borde. Estos son los estilos que tienes que añadir a tu hoja de estilo style.css.

.alert {background: #F4082C;border: 3px solid #CB081E;} /* Fondo color rojo */
.info {background: #66BCCD;border: 3px solid #055C76;} /* Fondo color azul */
.correcto {background: #51DD4D;border: 3px solid #0FA917;} /* Fondo color verde */
.alert, .info, .correcto {
width: 100%;
color: #ffffff;
text-align: center;
padding: 7px;
line-height: 40px;
font-size: 20px;
margin: 0 0 5px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

A las tres cajas les hemos asignado las mismas medidas y estructura, añadiendo bordes redondeados. Y a cada una le hemos asignado un color de fondo así como un borde, para resaltar más las cajas.

Añadiendo Dashicons

Bien, ya tenemos nuestras respectivas cajas, ahora queda por personalizar cada una con su icono correspondiente.
Hemos accedido a la página de Dashicons para escoger los iconos que representaran nuestras cajas.

CSS para la cajas

.alert:before {float:left;
font-size: 54px;
 -webkit-font-smoothing: antialiased;
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 font-family: 'dashicons';
 content: "\f158"; /* default widget icon */
}
.info:before {float:left;
font-size: 54px;
 -webkit-font-smoothing: antialiased;
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 font-family: 'dashicons';
 content: "\f348"; /* default widget icon */
}
.correcto:before {float:left;
font-size: 54px;
 -webkit-font-smoothing: antialiased;
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 font-family: 'dashicons';
 content: "\f147"; /* default widget icon */
}

Ahora edita una página o entrada y escribe

× Error al guardar archivo
Hola. Te informo que debes actualizar la plataforma
El mensaje ha sido enviado

Actualiza la página y ya podrás ver las cajas en funcionamiento.

cajas-mensajesConclusión

Como verás es un sistema muy básico y sencillo de como mostrar cajas de mensaje en WordPress. Hay más en la red, simplemente usa el que más te apetezca y experimenta con ellos.

Fuente: Mojo Themes

Espero que este post te haya resultado útil.

Y tú. ¿Usas shortcodes en tu blog?.

Comenta, comparte, difunde. Gracias

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *