Las cajas de información son una forma muy conveniente y bonita de mostrar información relevante a tus lectores. Las hay de diversos tipos, ya sea para advertir, para avisar de un error, para notificar al usuario de que algo sea hecho satisfactoriamente… En este artículo te mostraré cómo añadir automáticamente una caja de información con estilo en WordPress utilizando los hooks, la fuente de iconos FontAwesome y algo de CSS.
Descargando e insertando FontAwesome
Lo primero que tienes que hacer es descargar FontAwesome, para que podamos utilizar sus populares iconos.
Una vez la hayas descargado, debes incluirla dentro del tag <head> del archivo header.php de tu tema:
<link rel="stylesheet" href="ruta/a/font-awesome/css/font-awesome.min.css">
El CSS
Vamos a continuar añadiendo algo de CSS para que nuestras cajas de información luzcan con estilo. Así que, abre el style.css de tu tema y añade el siguiente código:
.box{
background: #E4F0FC;
margin: 1em 0px 1.5em;
padding: 12px 10px 12px 15px;
color: #555;
text-shadow: none;
font-weight: bold;
}
.box i.fa{
background: #5999cf;
color:#fff;
padding:7px 10px 8px 11px;
border-radius:50%;
}
.box a{ color:#5999cf !important}
.box.red{ background: #FFD9C8; }
.box.red a{ color:#E97373 !important}
.box.red i.fa{ background: #E97373; }
.box.green{ background: #edfcd5}
.box.green a{ color:#80b42b !important}
.box.green i.fa{ background: #80b42b; }
Si no has entendido ni papa, te lo explico. En la primera clase definimos el estilo de nuestra caja de información, y las dos siguientes nos servirán para cambiar su color. Es decir, la caja de información por defecto es azul, pero mediante las otras dos clases, podremos cambiarle el color a rojo y verde, respectivamente. Ojo, debes ajustar el padding de .box i .fa puesto que los iconos de FontAwesome pueden tener distintos tamaños. Ajusta el padding según tus necesidades…
Añadir la caja de información después de cada post
Muchos blogs muestran una caja de información automáticamente después del contenido del post. Puedes utilizar esto para mostrar posts relacionados, información del autor o, como vamos a hacer en el ejemplo, sugerir a tus lectores que te donen Bitcoins.
Para ello, añade este código dentro del fichero functions.php.
function cajainfo_despuespost( $content ) {
if( is_single() ) {
$mensaje = '<div class="box"><i class="fa fa-btc" aria-hidden="true"></i>¿Te ha gustado el artículo? Puedes donarme bitcoins: <a href="bitcoin:3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK">3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK</a></div>';
$content .= $mensaje;
}
return $content;
}
add_filter( 'the_content', 'cajainfo_despuespost' );
Añadir la caja de información antes de cada post
Ahora que ya sabemos cómo añadir la caja de información automáticamente después de un artículo, es muy sencillo adaptar el mismo código para que muestre la caja justo antes de cada post.
Pega el siguiente código en el archivo functions.php de tu tema:
function cajainfo_antespost( $content ) {
if( is_single() ) {
$mensaje = '<div class="box green"><i class="fa fa-info" aria-hidden="true"></i> Pon lo que quieras aquí.</div>';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'cajainfo_antespost' );
Añadir una advertencia después de cada post que tenga más de 2 años
Si ya llevas con tu sitio web mucho tiempo, probablemente ciertos artículos estén un pelín desfasados con el avance de las nuevas tecnologías.
Por dicha razón, lo ideal es avisar a tus lectores. Mediante la función is_old_post() es muy fácil, solo tienes que agregarla al archivo function.php de tu tema y llamarla cuando el post supere el tiempo que determines como «antiguo».
function is_old_post($days = 5) {
$days = (int) $days;
$offset = $days*60*60*24;
if ( get_post_time() < date('U') - $offset )
return true;
return false;
}
function alerta_postviejo( $content ) {
if( is_single() && is_old_post(730) ) {
$mensaje = '<div class="box red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Ojo: Este artículo tiene más de dos años, así que no te lo tomes al pie de la letra.</div>';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'alerta_postviejo' );
Crear un shortcode para estas cajas de información
Este artículo no estaría completo sin una manera de mostrar estas cajas de información cuando queramos en nuestros posts. Para ello crearemos un shortcode personalizado mediante una función en el fichero function.php del tema.
function cajainfo( $atts, $content = null ) {
return '<div class="box"><i class="fa fa-info" aria-hidden="true"></i> '.$content.'</div>';
}
add_shortcode('cajadeinformacion', 'cajainfo');
Una vez hechos los cambios, puedes emplear las cajas de información utilizando el shortcode que acabamos de crear.
[cajadeinformacion]Este es mi mensaje[/cajadeinformacion]
Y hasta aquí nuestro artículo sobre cómo añadir automáticamente una caja de información con estilo en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo está extraido de CatsWhoCode y el icono de la imagen destacada es obra de arjuazka. ¡Nos leemos!
